sidebar with tailwind

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",

frontend/public/index.html

@@ -11,6 +11,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Jost:wght@200&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
     <title>Company Files Management Plug-in ~ Team Galileo ~ Zuri Chat</title>
   </head>

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;
 }

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 (
-    <div className='App'>
-      <header className='App-header'>
-        <div className='logo-container'>
-          <img src='/zurichat-logo.svg' />
-          <span>Zuri Chat</span>
-        </div>
-        <br/>
-        <h2>Team Galileo</h2>
-        <h4>Company Files Management Plug-in</h4>
-      </header>
+    <div className="App">
+      <Sidebar/> 
+      <div className="main">
+          <div >Top items and Search Component <SearchBar/></div>
+          <div>
+            <RecentlyViewed/>
+            <Folder/>
+            <Files/>
+          </div>
+          <div>
+            <TotalSpace/>
+            <Activities/>
+            <Upload/>
+         </div>
+      </div>
     </div>
   );
 }

frontend/src/components/Activities/Activities.js

@@ -0,0 +1,9 @@
+function Activities() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default Activities

frontend/src/components/Files/Files.js

@@ -0,0 +1,11 @@
+import FilesCard from "../FilesCard/FilesCard";
+
+function Files() {
+    return (
+        <div>
+            <FilesCard/>
+        </div>
+    )
+}
+
+export default Files;

frontend/src/components/FilesCard/FilesCard.js

@@ -0,0 +1,9 @@
+function FilesCard() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default FilesCard

frontend/src/components/Folder/Folder.js

@@ -0,0 +1,11 @@
+import FolderCard from "../FolderCard/FolderCard";
+
+function Folder() {
+    return (
+        <div>
+            <FolderCard/>
+        </div>
+    )
+}
+
+export default Folder

frontend/src/components/FolderCard/FolderCard.js

@@ -0,0 +1,9 @@
+function FolderCard() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default FolderCard;

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;

frontend/src/components/RecentlyViewed/RecentlyViewed.js

@@ -0,0 +1,9 @@
+function RecentlyViewed() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default RecentlyViewed

frontend/src/components/SearchBar/SearchBar.js

@@ -0,0 +1,9 @@
+function SearchBar() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default SearchBar;

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 (
+        <div className="bg-white w-72 p-5 main">
+            <div className= "flex items-center flex-wrap">
+                <img className="h-6 w-6 object-cover" src="/zurichat-logo.svg"/>
+                <h1 className="m-1 text-lg uppercase tracking-wider font-semibold lato">Zuri</h1>
+            </div>
+            <div>
+                <ul>
+                    <li className="text-base font-normal flex items-center"> <img src="/Icons/Insight.png" alt="icon" /> Insight</li>
+                    <li className="text-base font-normal flex items-center"><img src="/Icons/Group1.png" alt="icon" />Threads</li>
+                    <li className="text-base font-normal flex items-center"><img src="/Icons/message.png" alt="icon" /> All DMs</li>
+                    <li className="text-base font-normal flex items-center"><img src="/Icons/Group.png" alt="icon" />Draft</li>
+                    <li className="text-base font-normal flex items-center justify-between" onClick={handleShowFiles}> <div className="flex"><img src="/Icons/Insight.png" alt="icon" /> Files</div> <FontAwesomeIcon className= "icon" icon={showFiles ? faChevronDown : faChevronRight} /></li>
+                    {
+                        showFiles &&
+                        <ul>
+                            <li className="text-base mx-5 font-normal flex items-center"><img src="/Icons/Vector.png" alt="icon" />All Files</li>
+                            <li className="text-base mx-5 font-normal flex items-center"><img src="/Icons/default.png" alt="icon" />Shared</li>
+                            <li className="text-base mx-5 font-normal flex items-center"><img src="/Icons/Star.png" alt="icon" />Favourites</li>
+                            <li className="text-base mx-5 font-normal flex items-center"><img src="/Icons/Bin.png" alt="icon" />Trash</li>
+                            <li className="text-base mx-5 font-normal flex items-center"><img src="/Icons/Question.png" alt="icon" />Help</li>
+                        </ul>
+                    }
+                    <li className="text-base font-normal flex items-center"> <img src="/Icons/Integrate.png" alt="icon" />Integrate</li>
+                    <li className="text-base font-normal" onClick={handleLounge}><FontAwesomeIcon className= "icon" icon={lounge ? faChevronDown : faChevronRight} /> Lounge</li>
+                    {
+                        lounge &&
+                        <ul>
+                            <li className="text-base mx-5 font-normal">Lounge 1</li>
+                            <li className="text-base mx-5 font-normal">Lounge 2</li>
+                            <li className="text-base mx-5 font-normal">Lounge 3</li>
+                            <li className="text-base mx-5 font-normal">Lounge 4</li>
+                        </ul>
+                    }
+                    <li className="text-base flex justify-between" onClick ={handleShowChannels}> <div className="flex"><FontAwesomeIcon className= "icon" icon={showChannels ? faChevronDown : faChevronRight} />  <p className="mx-1">Channels</p></div> <button><FontAwesomeIcon className="icon" icon={faPlusCircle} /></button></li>
+                    {
+                        showChannels &&
+                        <ul>
+                            <li className="text-base mx-5 font-bold"># annonucement</li>
+                            <li className="text-base mx-5 font-bold"># Games</li>
+                            <li className="text-base mx-5 font-bold"># Designers</li>
+                            <li className="text-base mx-5 font-bold"># Developers</li>
+                        </ul>
+                    }
+
+                    <li className="text-base flex justify-between" onClick ={handleShowDMs}> <div className="flex"><FontAwesomeIcon className="icon" icon={showDMs ? faChevronDown : faChevronRight} /> <p className="mx-1">Direct Messages</p></div> <button><FontAwesomeIcon className="icon" icon={faPlusCircle} /></button></li>
+                    {
+                        showDMs &&
+                        <ul>
+                            <li className="text-base mx-5 flex items-center m-1">
+                                <div className="h-10 w-10 pic-image relative">
+                                    <img className="object-cover" src="" alt="" />
+                                    <span className="h-2 w-2 bg-white absolute right"></span>
+                                </div>
+                                <p className="mx-1 font-normal">John Doe</p>
+                            </li>
+
+                            <li className="text-base mx-5 flex items-center m-1">
+                                <div className="h-10 w-10 pic-image relative">
+                                    <img className="object-cover" src="" alt="" />
+                                    <span className="h-2 w-2 bg-white absolute right"></span>
+                                </div>
+                                <p className="mx-1 font-normal">John Doe</p>
+                            </li>
+                            <li className="text-base mx-5 flex items-center m-1">
+                                <div className="h-10 w-10 pic-image relative">
+                                    <img className="object-cover" src="" alt="" />
+                                    <span className="h-2 w-2 bg-white absolute right"></span>
+                                </div>
+                                <p className="mx-1 font-normal">John Doe</p>
+                            </li>
+
+                        </ul>
+                    }
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default Sidebar

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%;
+}
+

frontend/src/components/TotalSpace/TotalSpace.js

@@ -0,0 +1,9 @@
+function TotalSpace() {
+    return (
+        <div>
+
+        </div>
+    )
+}
+
+export default TotalSpace;