Add highlight to primary navbar items

Set background to active item in primary navbar.

src/components/Navbar/Navbar.tsx

@@ -21,7 +21,6 @@ const Base = styled('aside')({
 const PrimaryNavItems = styled('nav')({
   width: '100%',
   height: '4rem',
-  display: 'flex',
   position: 'fixed',
   bottom: 0,
   left: 0,
@@ -35,6 +34,17 @@ const PrimaryNavItems = styled('nav')({
     left: 'auto',
     width: '4rem',
     height: '100%',
+  },
+})
+
+const PrimaryNavItemsContainer = styled('div')({
+  width: '100%',
+  height: '100%',
+  maxWidth: 720,
+  display: 'flex',
+  margin: '0 auto',
+  '@media (min-width: 1080px)': {
+    width: '100%',
     flexDirection: 'column',
     justifyContent: 'space-between',
     alignItems: 'stretch',
@@ -42,8 +52,7 @@ const PrimaryNavItems = styled('nav')({
 })
 
 const PrimaryNavItemGroup = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
+  display: 'contents',
   '@media (min-width: 1080px)': {
     display: 'block',
   },
@@ -120,39 +129,41 @@ const Navbar = ({
       <NavbarContainer>
         <NavbarItems>
           <PrimaryNavItems>
-            <PrimaryNavItemGroup>
+            <PrimaryNavItemsContainer>
+              <PrimaryNavItemGroup>
+                {
+                  Array.isArray(primaryItemsStart!)
+                  && primaryItemsStart.map(i => (
+                    <PrimaryNavItem
+                      key={i.id}
+                      mobileOnly={i.mobileOnly}
+                      href={i.href}
+                      iconName={i.iconName}
+                      title={i.title}
+                      active={i.active}
+                    />
+                  ))
+                }
+              </PrimaryNavItemGroup>
               {
-                Array.isArray(primaryItemsStart!)
-                && primaryItemsStart.map(i => (
-                  <PrimaryNavItem
-                    key={i.id}
-                    mobileOnly={i.mobileOnly}
-                    href={i.href}
-                    iconName={i.iconName}
-                    title={i.title}
-                    active={i.active}
-                  />
-                ))
+                Array.isArray(primaryItemsEnd!)
+                && (
+                  <PrimaryNavItemGroup>
+                    {
+                      primaryItemsEnd.map(i => (
+                        <PrimaryNavItem
+                          key={i.id}
+                          href={i.href}
+                          iconName={i.iconName}
+                          title={i.title}
+                          active={i.active}
+                        />
+                      ))
+                    }
+                  </PrimaryNavItemGroup>
+                )
               }
-            </PrimaryNavItemGroup>
-            {
-              Array.isArray(primaryItemsEnd!)
-              && (
-                <PrimaryNavItemGroup>
-                  {
-                    primaryItemsEnd.map(i => (
-                      <PrimaryNavItem
-                        key={i.id}
-                        href={i.href}
-                        iconName={i.iconName}
-                        title={i.title}
-                        active={i.active}
-                      />
-                    ))
-                  }
-                </PrimaryNavItemGroup>
-              )
-            }
+            </PrimaryNavItemsContainer>
           </PrimaryNavItems>
           <SecondaryNavItemsComponent>
             <SecondaryNavItemsOverflow>

src/components/PrimaryNavItem/PrimaryNavItem.tsx

@@ -4,12 +4,54 @@ import Link from 'next/link'
 import styled from 'styled-components'
 import Icon from '../Icon/Icon'
 
-const Base = styled('a')({
-  width: '4rem',
+const Base = styled('div')({
+  width: 0,
   height: '4rem',
+  flex: 'auto',
+  padding: '0.25rem',
+  boxSizing: 'border-box',
+  position: 'relative',
+  '@media (min-width: 1080px)': {
+    width: '4rem',
+    height: '4rem',
+  },
+})
+
+const ClickArea = styled('a')({
   display: 'grid',
-  placeContent: 'center',
   color: 'inherit',
+  placeContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  textDecoration: 'none',
+})
+
+const ClickAreaContent = styled('span')({
+  display: 'block',
+  textAlign: 'center',
+  lineHeight: 1,
+})
+
+const Highlight = styled('div')({
+  width: '100%',
+  height: '100%',
+  backgroundColor: 'var(--color-primary)',
+  opacity: 0.5,
+  borderRadius: '0.25rem',
+  [`+ ${ClickArea}`]: {
+    opacity: 0.75,
+  },
+})
+
+const Title = styled('small')({
+  display: 'block',
+  fontWeight: 'bolder',
+  '@media (min-width: 1080px)': {
+    display: 'none',
+  },
 })
 
 const MobileBase = styled(Base)({
@@ -37,18 +79,31 @@ const PrimaryNavItem: React.FC<Props> = ({
 }) => {
   const BaseComponent = mobileOnly ? MobileBase : Base
   return (
-    <Link
-      href={href}
-      passHref
-    >
-      <BaseComponent
-        title={title}
+    <BaseComponent>
+      {
+        active
+        && (
+          <Highlight />
+        )
+      }
+      <Link
+        href={href}
+        passHref
       >
-        <Icon
-          name={iconName}
-        />
-      </BaseComponent>
-    </Link>
+        <ClickArea
+          title={title}
+        >
+          <ClickAreaContent>
+            <Icon
+              name={iconName}
+            />
+            <Title>
+              {title}
+            </Title>
+          </ClickAreaContent>
+        </ClickArea>
+      </Link>
+    </BaseComponent>
   )
 }
 

src/pages/notes.tsx

@@ -96,6 +96,7 @@ const Notes = ({ id: idProp }) => {
           {
             id: 'sidebar',
             mobileOnly: true,
+            active: Boolean(router.query.navbar),
             href: {
               pathname: router.pathname,
               query: {
@@ -104,13 +105,13 @@ const Notes = ({ id: idProp }) => {
               },
             },
             iconName: 'menu',
-            title: 'Notes',
+            title: 'Menu',
           },
           {
             id: 'folders',
-            active: router.pathname.startsWith('/folders'),
+            active: router.pathname.startsWith('/notes') && !Boolean(router.query.navbar),
             href: {
-              pathname: '/folders',
+              pathname: '/notes',
             },
             iconName: 'note',
             title: 'Notes',
@@ -135,7 +136,7 @@ const Notes = ({ id: idProp }) => {
               },
             },
             iconName: 'bin',
-            title: 'View Binned Notes',
+            title: 'Bin',
           },
         ]}
         primaryItemsEnd={[
@@ -155,6 +156,7 @@ const Notes = ({ id: idProp }) => {
               pathname: '/notes',
               query: {
                 folder: '00000000-0000-0000-000000000000',
+                navbar: router.query.navbar,
               },
             },
             iconName: 'back',