Redesign left and top navbars

src/app/App.module.scss

@@ -21,7 +21,7 @@
     background-color: use-color("white");
     flex-grow: 0;
     flex-shrink: 0;
-    height: 70px;
+    height: 60px;
     position: relative;
     width: 100%;
   }
@@ -54,8 +54,6 @@
       flex-shrink: 1;
       max-height: 100%;
       overflow-y: auto;
-      padding-bottom: 1rem;
-      padding-top: 1rem;
       position: relative;
     }
   }

src/features/account/Account.tsx

@@ -1,11 +1,13 @@
 import { Container, Stack, Tab, Tabs } from '@mui/material';
 import { FC, useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { usePageTitle } from '../layout/layoutSlice';
 
 /**
  * Main Account page with four subpages represented as tabs.
  */
 export const Account: FC = () => {
+  usePageTitle('Account');
   const navigate = useNavigate();
   const location = useLocation();
   const [activeTab, setActiveTab] = useState(() => {

src/features/collections/Collections.module.scss

@@ -4,23 +4,22 @@ $border: 1px solid use-color("base-lighter");
 
 .collections-main {
   min-height: 100%;
+  padding: 1rem;
 }
 
 .collections-main .inner-container {
   margin-left: 0;
-  padding-left: 1rem;
 }
 
 .collections-list {
   overflow: scroll;
-  padding: 1rem;
 }
 
 .collections-subtitle {
+  border-bottom: 1px solid use-color("silver");
   font-size: 1.25rem;
   font-weight: 500;
-  margin: 0;
-  padding: 1rem;
+  padding-bottom: 1rem;
 }
 
 .collection-card {

src/features/collections/CollectionsList.tsx

@@ -13,11 +13,11 @@ export const CollectionsList = () => {
   const collections = listCollections.useQuery();
 
   return (
-    <main className={classes['collections-main']}>
-      <h2 className={classes['collections-subtitle']}>
-        Explore, relate, and integrate curated data collections.
-      </h2>
+    <section className={classes['collections-main']}>
       <Container className={classes['inner-container']} disableGutters>
+        <h2 className={classes['collections-subtitle']}>
+          Explore, relate, and integrate curated data collections.
+        </h2>
         <Grid container spacing={2}>
           {collections.isSuccess &&
             collections.data?.data.map((collection) => (
@@ -27,7 +27,7 @@ export const CollectionsList = () => {
             ))}
         </Grid>
       </Container>
-    </main>
+    </section>
   );
 };
 

src/features/layout/LeftNavBar.module.scss

@@ -10,15 +10,25 @@ ul.nav_list {
   padding: 3px 0 0;
   width: 100%;
 
-  li.nav_item {
+  &:first-of-type:not(:last-of-type) {
+    border-bottom: 1px solid use-color("silver");
+    padding-bottom: 1rem;
+  }
+
+  .nav_item {
     align-items: center;
     background: use-color("white");
+    border-radius: 4px;
+    color: use-color("base-darker");
     display: flex;
     flex-flow: column nowrap;
-    margin: 3px 0;
-    padding: 3px;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
+    margin-top: 1rem;
+    padding: 0.25rem;
     position: relative;
     text-align: center;
+    transition: 0.25s;
 
     // Items contain links, so lets remove the default link styles
     a {
@@ -28,20 +38,20 @@ ul.nav_list {
     }
 
     &.active {
-      background: use-rgba-color("silver", 0.5);
+      background: use-color("base-lighter");
     }
 
-    &:hover {
-      background: use-rgba-color("silver", 0.7);
+    &:hover:not(.active) {
+      background: use-rgba-color("silver", 0.5);
     }
 
     .nav_icon {
-      font-size: 42px;
+      font-size: 2rem;
       width: 100%;
     }
 
     .nav_desc {
-      font-size: 14px;
+      font-size: 0.75rem;
     }
 
     .nav_notifs {
@@ -59,6 +69,18 @@ ul.nav_list {
   }
 }
 
+.more_menu_item {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .more_menu_icon {
+    color: use-color("base-darker");
+    margin-right: 1rem;
+  }
+}
+
 @each $state, $_ in $palette {
   ul.nav_list li.nav_item .nav_notifs.nav_notifs-bg--#{$state} {
     background-color: use-color($state);

src/features/layout/LeftNavBar.tsx

@@ -9,15 +9,21 @@ import {
   faSuitcase,
   faUsers,
   IconDefinition,
+  faEllipsis,
+  faInfoCircle,
+  faQuestionCircle,
+  faServer,
+  faNoteSticky,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { getFeedsUnseenCount } from '../../common/api/feedsService';
 import { useAppSelector } from '../../common/hooks';
 import { authMe, authToken } from '../auth/authSlice';
 import { useAuthMe } from '../auth/hooks';
 import classes from './LeftNavBar.module.scss';
+import { Button, Menu, MenuItem } from '@mui/material';
 
 const LeftNavBar: FC = () => {
   const token = useAppSelector(authToken);
@@ -27,6 +33,14 @@ const LeftNavBar: FC = () => {
     refetchOnFocus: true,
     refetchOnReconnect: true,
   });
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const moreMenuOpen = Boolean(anchorEl);
+  const handleClickMoreMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseMoreMenu = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <nav>
@@ -52,6 +66,80 @@ const LeftNavBar: FC = () => {
         />
         <DevNav />
       </ul>
+      <ul className={classes.nav_list}>
+        <Button
+          className={classes.nav_item}
+          id="more-item"
+          aria-controls={moreMenuOpen ? 'more-menu' : undefined}
+          aria-haspopup="true"
+          aria-expanded={moreMenuOpen ? 'true' : undefined}
+          onClick={handleClickMoreMenu}
+        >
+          <FAIcon className={classes.nav_icon} icon={faEllipsis} />
+          <span className={classes.nav_desc}>More</span>
+        </Button>
+        <Menu
+          id="more-menu"
+          anchorEl={anchorEl}
+          open={moreMenuOpen}
+          onClose={handleCloseMoreMenu}
+          MenuListProps={{
+            'aria-labelledby': 'more-item',
+          }}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right',
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+        >
+          <MenuItem
+            className={classes.more_menu_item}
+            onClick={handleCloseMoreMenu}
+          >
+            <Link to="about">
+              <FAIcon className={classes.more_menu_icon} icon={faInfoCircle} />
+              About
+            </Link>
+          </MenuItem>
+          <MenuItem
+            className={classes.more_menu_item}
+            onClick={handleCloseMoreMenu}
+          >
+            <Link to="services">
+              <FAIcon className={classes.more_menu_icon} icon={faServer} />
+              Services
+            </Link>
+          </MenuItem>
+          <MenuItem
+            className={classes.more_menu_item}
+            onClick={handleCloseMoreMenu}
+          >
+            <a
+              href="https://www.kbase.us/support/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <FAIcon
+                className={classes.more_menu_icon}
+                icon={faQuestionCircle}
+              />
+              Support
+            </a>
+          </MenuItem>
+          <MenuItem
+            className={classes.more_menu_item}
+            onClick={handleCloseMoreMenu}
+          >
+            <a href="https://docs.kbase.us/" target="_blank" rel="noreferrer">
+              <FAIcon className={classes.more_menu_icon} icon={faNoteSticky} />
+              Documentation
+            </a>
+          </MenuItem>
+        </Menu>
+      </ul>
     </nav>
   );
 };