From 93e25a02c17333fc98cc38a6e375e09586e93fb9 Mon Sep 17 00:00:00 2001 From: berryboylb Date: Tue, 31 Aug 2021 09:05:10 +0100 Subject: [PATCH] sidebar with tailwind --- frontend/package-lock.json | 29 +++++ frontend/package.json | 3 + frontend/public/Icons/Bin.png | Bin 0 -> 501 bytes frontend/public/Icons/Group.png | Bin 0 -> 390 bytes frontend/public/Icons/Group1.png | Bin 0 -> 501 bytes frontend/public/Icons/Insight.png | Bin 0 -> 521 bytes frontend/public/Icons/Integrate.png | Bin 0 -> 535 bytes frontend/public/Icons/Question.png | Bin 0 -> 476 bytes frontend/public/Icons/Star.png | Bin 0 -> 575 bytes frontend/public/Icons/Vector.png | Bin 0 -> 452 bytes frontend/public/Icons/default.png | Bin 0 -> 510 bytes frontend/public/Icons/message.png | Bin 0 -> 311 bytes frontend/public/index.html | 1 + frontend/src/App.css | 45 +------- frontend/src/App.js | 33 ++++-- .../src/components/Activities/Activities.js | 9 ++ frontend/src/components/Files/Files.js | 11 ++ .../src/components/FilesCard/FilesCard.js | 9 ++ frontend/src/components/Folder/Folder.js | 11 ++ .../src/components/FolderCard/FolderCard.js | 9 ++ .../InitFontawesome/InitFontawesome.js | 20 ++++ .../RecentlyViewed/RecentlyViewed.js | 9 ++ .../src/components/SearchBar/SearchBar.js | 9 ++ frontend/src/components/SideBar/Sidebar.js | 106 ++++++++++++++++++ frontend/src/components/SideBar/sidebar.css | 33 ++++++ .../src/components/TotalSpace/TotalSpace.js | 9 ++ frontend/src/components/Upload/Upload.js | 10 ++ 27 files changed, 303 insertions(+), 53 deletions(-) create mode 100644 frontend/public/Icons/Bin.png create mode 100644 frontend/public/Icons/Group.png create mode 100644 frontend/public/Icons/Group1.png create mode 100644 frontend/public/Icons/Insight.png create mode 100644 frontend/public/Icons/Integrate.png create mode 100644 frontend/public/Icons/Question.png create mode 100644 frontend/public/Icons/Star.png create mode 100644 frontend/public/Icons/Vector.png create mode 100644 frontend/public/Icons/default.png create mode 100644 frontend/public/Icons/message.png create mode 100644 frontend/src/components/Activities/Activities.js create mode 100644 frontend/src/components/Files/Files.js create mode 100644 frontend/src/components/FilesCard/FilesCard.js create mode 100644 frontend/src/components/Folder/Folder.js create mode 100644 frontend/src/components/FolderCard/FolderCard.js create mode 100644 frontend/src/components/InitFontawesome/InitFontawesome.js create mode 100644 frontend/src/components/RecentlyViewed/RecentlyViewed.js create mode 100644 frontend/src/components/SearchBar/SearchBar.js create mode 100644 frontend/src/components/SideBar/Sidebar.js create mode 100644 frontend/src/components/SideBar/sidebar.css create mode 100644 frontend/src/components/TotalSpace/TotalSpace.js create mode 100644 frontend/src/components/Upload/Upload.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b3ed6d50..c4b6ff62 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1292,6 +1292,35 @@ } } }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz", + "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.36", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz", + "integrity": "sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.4", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz", + "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.36" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.15", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz", + "integrity": "sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index ec75f311..38710a8d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-solid-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.15", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/frontend/public/Icons/Bin.png b/frontend/public/Icons/Bin.png new file mode 100644 index 0000000000000000000000000000000000000000..90eac5501c383679b3d1976388a55d90a4c60799 GIT binary patch literal 501 zcmVV`Bt%0*8WB?jT66jp9*wdrv#qKRer{V=C#BSCt{(Y? zR4(NKm<|3L+~wwD^D;iyN*!WML8o73R(qX_5fn)O81s;3*~yFu+5m)MTDbrxsjRBE zk#+w6o%9jJ5S*zacep^^!=`A1|zgb6?A6#)KfqNhHXo{)}q- zE>G?yfvYQG8-R3O*E)uYKO>0m14X98#%a8b&iBWcGx&gjX(B|pY{h%g67+JAs3ExC zZY=J5U}~>)Y5GPe%k%sQb73#puphCo=as5Y^Ku}vAJg#mWr(})iM>Dkv#&mD9m7Dw rqxSAi0MfywkVgI~hiskXNqX@MsPn*MSXc#L00000NkvXXu0mjfH!$1q literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/Group.png b/frontend/public/Icons/Group.png new file mode 100644 index 0000000000000000000000000000000000000000..5baf2a33ea8ab140b5d9a4268c123c3b9d94f392 GIT binary patch literal 390 zcmV;10eSw3P)$0Kc)Y#G=74(u&!I zZ|BVqQcRX4$+KWA48w{$mjo!KPViY!N?AIN^P#n_jq@zaa&mm%*BqFp=>>4TgcU{V z`~EB**f@@_UDuuRJa^~dE?dHzAY@h?Y;S?c?XzhbPfW!_Az#|IEevpK$zgs5=&Qh$0n7Q`0HY`>aU{-v_5c6? literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/Group1.png b/frontend/public/Icons/Group1.png new file mode 100644 index 0000000000000000000000000000000000000000..02e29e4ceecbf9d547a9bd8ae00842cbed07ec95 GIT binary patch literal 501 zcmV5r00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP;8YN}@DK-}0-yrO0T6Jo(gCR;F2Nn(637XJc;uTED>>ji z7-?niJpTFTpHHJ{; z^;4--p;oJv48UwQTS2iToh3+zm!v|vM^bcd`T^U4qS%9arO{}3&J8x1OgdWYM@{EE z_s|9e@a(%Xn5_|TB>xl#Orz|ovtzcpFpu?*PDs_L( r`^3K#fiFkYF;%-H1+7*qbZ)RON{Hv40|(Zb00000NkvXXu0mjfcFodx literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/Insight.png b/frontend/public/Icons/Insight.png new file mode 100644 index 0000000000000000000000000000000000000000..ec5b33ef535fd01ada99db3ae21a378f3a6b640f GIT binary patch literal 521 zcmV+k0`~ohP)tsfZl+v5C|!7f~F^ExdBJ;5weVwU*AJ^nns3% z1tVFG?V0D9=Qk0e#(dxJu2w5q=jYfq5jb*PHyn@0!Dh4h&hvb5a(0}bG)?!D$z)fJ zX;%PbtJV5MU?0ms51Pud>;Uiw41c{|&#@i?P?=b_3<4+KF0q^;n`d)|J%ykV_If~Iiz^K;cwp>yyS?M9Np6DBvnAo?K4joqjwIql9LK%3XmBflq|uVa z6h~Ws2xB9(x9db@TtJzdjaHmUMRG{s?xszLZ6xGw}0J_dY>@ynY&1Nht$8&4vK#Q3^p>w zN1u>gP!_ObyAjjED7IpJlz`=wJKqXqjLnEX>gy6{3S1sF4Y#vj!w}NLLjAY900000 LNkvXXu0mjfF;3vy literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/Integrate.png b/frontend/public/Icons/Integrate.png new file mode 100644 index 0000000000000000000000000000000000000000..e08283d5a399bbe6adb8b04c48e45d9260bfc0fc GIT binary patch literal 535 zcmV+y0_gpTP)$h*l1FoYjj$`j|I0Q~XYq#5*eD3nGSS)(i>$UIv&QiP+8A5kF9tWjTsdu~G zcF31S7(n0&A-eEdxm>P9QKTdi4$){r;837%9#IWSR9aP( zl_bP~B?~-Qv(MgqM~D}m(A+x0XP#%QbDDDbIq@a78c3i(-EjoC?Ca-)cmrSMXN_1k zFIr8Xw*vGm5euYQE7?*2m8VRMRkb#uwhqFxaOmjRs+OV zOIShfdCXLSvMk%9aW?j8YMfyZWcVR-c4H+;vO{74@RO!)S_1$ADxj`)C+gh6_wIS# ztNP9vk=ghKKyrm+$p&c{WIw78Y%oivZvv3Uys`8A5hdP1^Y%(Ie=FcXjl(nzl1$;J zNRRZI<@<8+Z?6DG1{@&*$;yCATpN~1m6$?zoWd&r4akAi2Vp$3Px^S@W&HqUgwXQH S7g$>W0000J%=P)~d zw!Dz|;R7D{h%m5<$6`Umw_x!0=Gra$@~|(ErfF=W(T;&Uf=R=no_O!8KjoS}kWn;R zNQKqR%~n!st9DFa_4=C!F$6dGQtt$z3$9Z4EP6vY-my5N1{65qzMP5y)oRSkIW zoh!TdY?@`4_QHG-v?(*k04&H@Nf#f_%4s)%rQwJXNKYk@1e0wbJq?Nxq!`%tF8x1hf>| za3GpU{N=2Z5JE{h7J`(CADTK$5&_Vd{^XfUCd72FVDc?Wu%T-2{sO2U@a)`JNXGyG N002ovPDHLkV1hG_0s8;| literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/Vector.png b/frontend/public/Icons/Vector.png new file mode 100644 index 0000000000000000000000000000000000000000..964edc124ab558abcbb341cba835c0f9feab2010 GIT binary patch literal 452 zcmV;#0XzPQP)Z<^)@P;ssK z2IGLS7mZ7hysM&)>(xBC}_mDHGVf%%DditItV$%y+pwQU=D;tdf0000d literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/default.png b/frontend/public/Icons/default.png new file mode 100644 index 0000000000000000000000000000000000000000..0408b3e126778b7bedafeec717953b105dda664b GIT binary patch literal 510 zcmV&QXf#+Syvx1$e9o)1kZcF6pif#e z*><|k(n9}1Vn`S<_EBLX*kSCF4FvanpY4(`+VA&FdpI0^qz#}|xO%xJ^%m!07*qoM6N<$f?eO$ Ar2qf` literal 0 HcmV?d00001 diff --git a/frontend/public/Icons/message.png b/frontend/public/Icons/message.png new file mode 100644 index 0000000000000000000000000000000000000000..412ab22f0fd826d82c24743053e9f3115aa885df GIT binary patch literal 311 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9c!3HGfPKx~mq&N#aB8wRqxP?KOkzv*x37{Zj zage(c!@6@aFM%AEbVpxD28NCO+!=t>9E;Fe zdZ$G!$jfz-ip}}rj|`!qQxhL_nKfs=65O_F!wK0pGAXOKiZu${o};-m=dI-@W!JzG z1IN->bF8}}l literal 0 HcmV?d00001 diff --git a/frontend/public/index.html b/frontend/public/index.html index 954f52cb..306acbbd 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -11,6 +11,7 @@ + Company Files Management Plug-in ~ Team Galileo ~ Zuri Chat diff --git a/frontend/src/App.css b/frontend/src/App.css index fd90ea27..0d837966 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,46 +1,5 @@ .App { - text-align: center; - font-family: "Jost", serif; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #261D45; - min-height: 100vh; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: #fff; -} - -.App-header h2 { - color: cornflowerblue; - text-shadow: 0 0 #dc1aa3; -} - -.App-header h2, -.App-header h4 { - font-weight: 200; - letter-spacing: 1px; -} - -.logo-container { - display: flex; - align-items: center; -} - -.logo-container span { - margin-left: 10px; + justify-content: space-between; + background: #F6F6F6; } \ No newline at end of file diff --git a/frontend/src/App.js b/frontend/src/App.js index d2a4e1b5..2ff21799 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,17 +1,30 @@ import './App.css'; +import Sidebar from './components/SideBar/Sidebar'; +import RecentlyViewed from './components/RecentlyViewed/RecentlyViewed'; +import Files from './components/Files/Files'; +import Folder from './components/Folder/Folder'; +import SearchBar from './components/SearchBar/SearchBar'; +import Activities from './components/Activities/Activities'; +import TotalSpace from './components/TotalSpace/TotalSpace'; +import Upload from './components/Upload/Upload'; function App() { return ( -
-
-
- - Zuri Chat -
-
-

Team Galileo

-

Company Files Management Plug-in

-
+
+ +
+
Top items and Search Component
+
+ + + +
+
+ + + +
+
); } diff --git a/frontend/src/components/Activities/Activities.js b/frontend/src/components/Activities/Activities.js new file mode 100644 index 00000000..fc1c18ca --- /dev/null +++ b/frontend/src/components/Activities/Activities.js @@ -0,0 +1,9 @@ +function Activities() { + return ( +
+ +
+ ) +} + +export default Activities diff --git a/frontend/src/components/Files/Files.js b/frontend/src/components/Files/Files.js new file mode 100644 index 00000000..4a0228c0 --- /dev/null +++ b/frontend/src/components/Files/Files.js @@ -0,0 +1,11 @@ +import FilesCard from "../FilesCard/FilesCard"; + +function Files() { + return ( +
+ +
+ ) +} + +export default Files; diff --git a/frontend/src/components/FilesCard/FilesCard.js b/frontend/src/components/FilesCard/FilesCard.js new file mode 100644 index 00000000..ffe170f3 --- /dev/null +++ b/frontend/src/components/FilesCard/FilesCard.js @@ -0,0 +1,9 @@ +function FilesCard() { + return ( +
+ +
+ ) +} + +export default FilesCard diff --git a/frontend/src/components/Folder/Folder.js b/frontend/src/components/Folder/Folder.js new file mode 100644 index 00000000..e3cd1863 --- /dev/null +++ b/frontend/src/components/Folder/Folder.js @@ -0,0 +1,11 @@ +import FolderCard from "../FolderCard/FolderCard"; + +function Folder() { + return ( +
+ +
+ ) +} + +export default Folder diff --git a/frontend/src/components/FolderCard/FolderCard.js b/frontend/src/components/FolderCard/FolderCard.js new file mode 100644 index 00000000..61f97c29 --- /dev/null +++ b/frontend/src/components/FolderCard/FolderCard.js @@ -0,0 +1,9 @@ +function FolderCard() { + return ( +
+ +
+ ) +} + +export default FolderCard; diff --git a/frontend/src/components/InitFontawesome/InitFontawesome.js b/frontend/src/components/InitFontawesome/InitFontawesome.js new file mode 100644 index 00000000..0238e5ad --- /dev/null +++ b/frontend/src/components/InitFontawesome/InitFontawesome.js @@ -0,0 +1,20 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faShoppingCart, faChevronDown, faPhone, faFileAlt, faEnvelopeOpen, faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons'; +import { faFacebook, faWhatsapp, faLinkedin, faTwitter } from '@fortawesome/free-brands-svg-icons' ; + +function initFontAwesome(){ + library.add(faShoppingCart, + faChevronDown, + faPhone, + faFileAlt, + faEnvelopeOpen, + faFacebook, + faWhatsapp, + faChevronRight, + faChevronLeft, + faLinkedin, + faTwitter, + ); +} + +export default initFontAwesome; \ No newline at end of file diff --git a/frontend/src/components/RecentlyViewed/RecentlyViewed.js b/frontend/src/components/RecentlyViewed/RecentlyViewed.js new file mode 100644 index 00000000..a041ce2e --- /dev/null +++ b/frontend/src/components/RecentlyViewed/RecentlyViewed.js @@ -0,0 +1,9 @@ +function RecentlyViewed() { + return ( +
+ +
+ ) +} + +export default RecentlyViewed diff --git a/frontend/src/components/SearchBar/SearchBar.js b/frontend/src/components/SearchBar/SearchBar.js new file mode 100644 index 00000000..b9668d59 --- /dev/null +++ b/frontend/src/components/SearchBar/SearchBar.js @@ -0,0 +1,9 @@ +function SearchBar() { + return ( +
+ +
+ ) +} + +export default SearchBar; diff --git a/frontend/src/components/SideBar/Sidebar.js b/frontend/src/components/SideBar/Sidebar.js new file mode 100644 index 00000000..f1e06cca --- /dev/null +++ b/frontend/src/components/SideBar/Sidebar.js @@ -0,0 +1,106 @@ +import {useState} from 'react'; +import './sidebar.css'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import {faChevronDown, faChevronRight, faPlusCircle} from '@fortawesome/free-solid-svg-icons' +function Sidebar() { + const [showFiles, setshowFiles] = useState(false); + const [showChannels, setshowChannels] = useState(false); + const [showDMs, setshowDMs] = useState(false); + const [lounge, setlounge] = useState(false) + const handleShowFiles = () => { + setshowFiles(!showFiles); + } + + const handleShowChannels = () => { + setshowChannels(!showChannels); + } + + const handleShowDMs = () => { + setshowDMs(!showDMs); + } + + const handleLounge =() => { + setlounge(!lounge); + } + + return ( +
+
+ +

Zuri

+
+
+
    +
  • icon Insight
    • +
  • iconThreads
    • +
  • icon All DMs
    • +
  • iconDraft
    • +
  • icon Files
    • + { + showFiles && +
      +
    • iconAll Files
      • +
    • iconShared
      • +
    • iconFavourites
      • +
    • iconTrash
      • +
    • iconHelp
      • +
    + } +
  • iconIntegrate
    • +
  • Lounge
    • + { + lounge && +
      +
    • Lounge 1
      • +
    • Lounge 2
      • +
    • Lounge 3
      • +
    • Lounge 4
      • +
    + } +

  • Channels

    • + { + showChannels && +
      +
    • # annonucement
      • +
    • # Games
      • +
    • # Designers
      • +
    • # Developers
      • +
    + } + +

  • Direct Messages

    • + { + showDMs && +
      +
    • +
      + + +
      +

      John Doe

      +
      • + +
    • +
      + + +
      +

      John Doe

      +
      • +
    • +
      + + +
      +

      John Doe

      +
      • + +
    + } +
+
+
+ ) +} + +export default Sidebar diff --git a/frontend/src/components/SideBar/sidebar.css b/frontend/src/components/SideBar/sidebar.css new file mode 100644 index 00000000..7ba206a1 --- /dev/null +++ b/frontend/src/components/SideBar/sidebar.css @@ -0,0 +1,33 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap'); + +.main { + min-height: 100vh; + white-space: nowrap; +} + +.lato { + font-family: 'Lato', sans-serif; +} + +li { + font-family: 'Lato', sans-serif; + color: #999999; + cursor: pointer; +} + +li img { + margin-right: 2%; +} + +.pic-image { + border-radius: 50%; + background: #ACFFE6; +} + +.right { + top: 5%; + right: 5%; + background: #18D24C; + border-radius: 50%; +} + diff --git a/frontend/src/components/TotalSpace/TotalSpace.js b/frontend/src/components/TotalSpace/TotalSpace.js new file mode 100644 index 00000000..374ac55c --- /dev/null +++ b/frontend/src/components/TotalSpace/TotalSpace.js @@ -0,0 +1,9 @@ +function TotalSpace() { + return ( +
+ +
+ ) +} + +export default TotalSpace; diff --git a/frontend/src/components/Upload/Upload.js b/frontend/src/components/Upload/Upload.js new file mode 100644 index 00000000..3a454f32 --- /dev/null +++ b/frontend/src/components/Upload/Upload.js @@ -0,0 +1,10 @@ + +function Upload() { + return ( +
+ +
+ ) +} + +export default Upload;