Merge pull request #15 from public-awesome/my-collections

Add My Collections & Update navigation

components/Sidebar.tsx

@@ -9,9 +9,11 @@ import { SidebarLayout } from './SidebarLayout'
 import { WalletLoader } from './WalletLoader'
 
 const routes = [
-  { text: 'Create Collection', href: `/collections/create/` },
-  { text: 'Collections', href: `/collections/` },
-  { text: 'Contract Dashboards', href: `/contracts/` },
+  { text: 'Collections', href: `/collections/`, isChild: false },
+  { text: 'Create a Collection', href: `/collections/create/`, isChild: true },
+  { text: 'My Collections', href: `/collections/myCollections/`, isChild: true },
+  { text: 'Collection Actions', href: `/collections/actions/`, isChild: true },
+  { text: 'Contract Dashboards', href: `/contracts/`, isChild: false },
 ]
 
 export const Sidebar = () => {
@@ -29,13 +31,15 @@ export const Sidebar = () => {
       <WalletLoader />
 
       {/* main navigation routes */}
-      {routes.map(({ text, href }) => (
+      {routes.map(({ text, href, isChild }) => (
         <Anchor
           key={href}
           className={clsx(
-            'py-2 px-4 -mx-4 uppercase rounded-lg', // styling
+            'px-4 -mx-5 font-extrabold uppercase rounded-lg', // styling
             'hover:bg-white/5 transition-colors', // hover styling
-            { 'font-bold bg-plumbus hover:bg-plumbus': router.asPath === href }, // active route styling
+            { 'py-0 ml-2 text-sm font-bold': isChild },
+            { 'text-gray hover:text-white': router.asPath !== href && isChild },
+            { 'text-plumbus': router.asPath === href && isChild }, // active route styling
             // { 'text-gray-500 pointer-events-none': disabled }, // disabled route styling
           )}
           href={href}