feat: collections page (resolves #24)

packages/bruno-app/src/components/Sidebar/MenuBar/index.js

@@ -1,34 +1,37 @@
 import React from 'react';
 import Link from 'next/link';
-import { IconCode, IconFiles, IconUser, IconUsers, IconSettings, IconBuilding, IconChevronsLeft} from '@tabler/icons';
+import { useRouter } from 'next/router';
+import { IconCode, IconFiles, IconUser, IconUsers, IconSettings, IconChevronsLeft} from '@tabler/icons';
 import { useSelector, useDispatch } from 'react-redux';
 import { toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'
 import StyledWrapper from './StyledWrapper';
 
 const MenuBar = () => {
-  const leftMenuBarOpen = useSelector((state) => state.app.leftMenuBarOpen);
+  const router = useRouter();
   const dispatch = useDispatch();
 
+  const getClassName = (menu) => {
+    return router.pathname === menu ? "active menu-item": "menu-item";
+  };
+
   return (
     <StyledWrapper className="h-full flex flex-col">
       <div className="flex flex-col">
-        <div className="menu-item active">
+        <Link href="/">
-          <Link href="/">
+          <div className={getClassName('/')}>
             <IconCode size={28} strokeWidth={1.5}/>
-          </Link>
+          </div>
-        </div>
+        </Link>
-        <div className="menu-item">
+        <Link href="/collections">
-          <IconFiles size={28} strokeWidth={1.5}/>
+          <div className={getClassName('/collections')}>
-        </div>
+            <IconFiles size={28} strokeWidth={1.5}/>
+          </div>
+        </Link>
         <div className="menu-item">
           <IconUsers size={28} strokeWidth={1.5}/>
         </div>
       </div>
       <div className="flex flex-col flex-grow justify-end">
-        {/* Teams Icon */}
-        {/* <div className="menu-item">
-          <IconBuilding size={28} strokeWidth={1.5}/>
-        </div> */}
         <div className="menu-item">
           <Link href="/login">
             <IconUser size={28} strokeWidth={1.5}/>

packages/bruno-app/src/pageComponents/Collections/StyledWrapper.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .heading {
+    display: inline-flex;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    padding: 6px 0px;
+    border-bottom: 2px solid !important;
+  }
+
+  .collection-list {
+    min-width: 500px;
+
+    .collection-list-item {
+      padding: 4px 0px;
+      border-radius: 3px;
+
+      &:hover {
+        background-color: #f4f4f4;
+        margin-left: -8px;
+        margin-right: -8px;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+    }
+  }
+`;
+
+export default Wrapper;

packages/bruno-app/src/pageComponents/Collections/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IconEdit, IconTrash } from "@tabler/icons";
+import { useSelector } from 'react-redux';
+import StyledWrapper from './StyledWrapper';
+
+
+export default function Collections() {
+  const collections = useSelector((state) => state.collections.collections);
+
+  return (
+    <StyledWrapper>
+      <h4 className="heading">Collections</h4>
+
+      <div className="collection-list mt-6">
+        {collections && collections.length ? collections.map((collection) =>
+          <div className="flex justify-between items-baseline mb-2 collection-list-item" key={collection.uid} >
+            <li style={{listStyle: 'none'}} className="collection-name">{collection.name}</li>
+            <div className="flex gap-x-4" >
+              <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5}/>
+              <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5}/>
+            </div>
+          </div>
+        ): null}
+      </div>
+    </StyledWrapper>
+  );
+};
+

packages/bruno-app/src/pages/collections.js

@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import Collections from 'pageComponents/Collections';
+import MenuBar from 'components/Sidebar/MenuBar';
+import GlobalStyle from '../globalStyles';
+
+export default function CollectionsPage() {
+  return (
+    <div>
+      <Head>
+        <title>bruno</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <GlobalStyle />
+
+      <main>
+        <div className="flex flex-row h-full">
+          <MenuBar />
+          <div className="flex flex-grow h-full px-8">
+            <Collections />
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+};