Update Sidebar Styles Across Mobile and Desktop (#454)

* Consolidate Navigation & update styles
* always show mini sidebar
  - Hiding the mini sidebar while the main one is open causes a layout shift of the rest of the page content, which looks very unprofessional
* Footer → Sidenav, add transition
  - This commit also removes information that is redundant with the user profile popover as that is now shown on mobile
* Make it so clicking outside closes the sidebar
* fix the size of the sidebar close button
* center logo in header
* Tweak styles of user popover
* Add monochrome logo to sidebar
* Put the logo there correctly
* fix course footer
* open footer links in new tab
* update logo height for desktop
* Buttons should use same color as text by default
  - This only has an effect on mobile, where the unstyled button font color is blue by default. Any styled buttons won't be affected since their selector's specificity is higher
* Fix styles and remove unused CSS
* add back title to name/email

site/package.json

@@ -22,6 +22,7 @@
     "react-redux": "^9.0.4",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.18.0",
+    "react-transition-group": "^4.4.5",
     "react-twemoji": "^0.5.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.4",

site/src/App.scss

@@ -1,6 +1,10 @@
+button {
+  color: inherit;
+}
+
 .app-body {
   display: flex;
-  height: 92vh;
+  height: calc(100% - 72px);
   overflow: hidden;
 }
 

site/src/App.tsx

@@ -7,7 +7,6 @@ import './style/theme.scss';
 import './App.scss';
 
 import AppHeader from './component/AppHeader/AppHeader';
-import Footer from './component/Footer/Footer';
 import SearchPage from './pages/SearchPage';
 import CoursePage from './pages/CoursePage';
 import ProfessorPage from './pages/ProfessorPage';
@@ -106,7 +105,6 @@ export default function App() {
               <Route path="/reviews" element={<ReviewsPage />} />
               <Route path="*" element={<ErrorPage />} />
             </Routes>
-            <Footer />
           </div>
         </div>
       </ThemeContext.Provider>

site/src/component/AppHeader/AppHeader.scss

@@ -1,6 +1,9 @@
 #peterportal-logo {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: 32px;
+  @media (min-width: 800px) {
+    height: 36px;
+  }
 }
 
 [data-theme='dark'] {
@@ -27,10 +30,10 @@
   position: sticky;
   z-index: 300;
   width: 100%;
-  height: 8vh;
+  height: 72px;
   background-color: var(--overlay1);
   padding-right: 3vw;
-  padding-left: 2vw;
+  padding-left: 16px;
   display: flex;
   top: 0;
 
@@ -58,47 +61,7 @@
       align-items: center;
       border: none;
       background: none;
-    }
-
-    .desktop-toggle {
-      display: contents;
-    }
-
-    .mobile-toggle {
-      display: none;
-    }
-
-    .navbar-toggle {
-      background-color: var(--overlay2);
-      margin-left: 5vw;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      height: 60%;
-      border-radius: 1rem;
-      width: 12vw;
-
-      .navbar-toggle-item {
-        width: 50%;
-        height: 100%;
-        text-align: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 1rem;
-
-        a {
-          color: var(--text);
-        }
-      }
-
-      .active {
-        background-color: var(--peterportal-secondary-orange);
-
-        a {
-          color: white;
-        }
-      }
+      padding: 4px;
     }
 
     .navbar-logo {
@@ -110,46 +73,14 @@
       right: 0;
       margin-left: auto;
       margin-right: auto;
-      width: 7vw;
+      width: fit-content;
     }
 
     @media only screen and (max-width: 800px) {
       .beta {
         display: none;
       }
 
-      .desktop-toggle {
-        display: none;
-      }
-
-      .mobile-toggle {
-        display: contents;
-      }
-
-      .navbar-toggle {
-        margin-left: 5vw;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 60%;
-        border-radius: 1rem;
-        width: 17vw;
-
-        .navbar-toggle-item {
-          width: 100%;
-          height: 100%;
-          text-align: center;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 1rem;
-
-          a {
-            font-size: 10px;
-          }
-        }
-      }
-
       .navbar-logo {
         display: flex;
         flex-direction: row;
@@ -159,7 +90,6 @@
         right: 0;
         margin-left: auto;
         margin-right: auto;
-        width: 18vw;
       }
 
       .school-term {
@@ -175,13 +105,3 @@
   flex-direction: row;
   justify-content: space-between;
 }
-
-@media only screen and (max-width: 1300px) {
-  .navbar {
-    .navbar-nav {
-      .navbar-toggle {
-        width: 20vw;
-      }
-    }
-  }
-}

site/src/component/AppHeader/AppHeader.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, FC } from 'react';
 import { Icon, Popup, Grid, Label } from 'semantic-ui-react';
-import { useLocation, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import axios from 'axios';
 
 import { List } from 'react-bootstrap-icons';
@@ -12,73 +12,32 @@ import './AppHeader.scss';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { setSidebarStatus } from '../../store/slices/uiSlice';
 import Profile from './Profile';
-import { useIsDesktop, useIsMobile } from '../../helpers/util';
 
 const AppHeader: FC = () => {
   const dispatch = useAppDispatch();
   const sidebarOpen = useAppSelector((state) => state.ui.sidebarOpen);
-  const location = useLocation();
   const [week, setWeek] = useState('');
 
-  const splitLocation = location.pathname.split('/');
-  const coursesActive =
-    splitLocation[1] === '' ||
-    (splitLocation.length > 0 && splitLocation[splitLocation.length - 1] == 'courses') ||
-    (splitLocation.length > 1 && splitLocation[1] == 'course');
-  const professorsActive =
-    (splitLocation.length > 0 && splitLocation[splitLocation.length - 1] == 'professors') ||
-    (splitLocation.length > 1 && splitLocation[1] == 'professor');
-
   useEffect(() => {
     // Get the current week data
     axios.get<WeekData>('/api/schedule/api/currentWeek').then((res) => {
-      setWeek(res.data.display);
+      /** @todo make this less code-smelly */
+      setWeek(res.data.display.split(' • ')[0]);
     });
   }, []);
 
   const toggleMenu = () => {
     dispatch(setSidebarStatus(!sidebarOpen));
   };
 
-  const isDesktop = useIsDesktop();
-  const isMobile = useIsMobile();
-
   return (
     <header className="navbar">
       <div className="navbar-nav">
         <div className="navbar-left">
           {/* Hamburger Menu */}
-          {isMobile && (
-            <button className="navbar-menu" onClick={toggleMenu}>
-              <List className="navbar-menu-icon" size={'3vh'} />
-            </button>
-          )}
-
-          {/* Toggle Course and Professor */}
-          {(coursesActive || professorsActive) && (
-            <div className="navbar-toggle">
-              <div className="desktop-toggle">
-                <div className={`navbar-toggle-item ${coursesActive ? 'active' : ''}`}>
-                  <Link to={'/search/courses'}>Courses</Link>
-                </div>
-                <div className={`navbar-toggle-item ${professorsActive ? 'active' : ''}`}>
-                  <Link to={'/search/professors'}>Professors</Link>
-                </div>
-              </div>
-              <div className="mobile-toggle">
-                {coursesActive === true && (
-                  <div className={`navbar-toggle-item active`}>
-                    <Link to={'/search/professors'}>Professors</Link>
-                  </div>
-                )}
-                {professorsActive === true && (
-                  <div className={`navbar-toggle-item active`}>
-                    <Link to={'/search/courses'}>Courses</Link>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
+          <button className="navbar-menu" onClick={toggleMenu}>
+            <List className="navbar-menu-icon" size="32px" />
+          </button>
         </div>
 
         {/* Logo */}
@@ -142,7 +101,7 @@ const AppHeader: FC = () => {
           <p className="school-term" style={{ height: '1rem', lineHeight: '1rem' }}>
             {week}
           </p>
-          {isDesktop && <Profile />}
+          <Profile />
         </div>
       </div>
     </header>

site/src/component/AppHeader/Profile.scss

@@ -23,50 +23,66 @@
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
   border: 1px solid var(--background);
-  width: 350px;
+  width: 310px;
   max-width: 100vw;
+  box-shadow: 0 0 12px rgba(196, 198, 209, 0.24);
 
   .arrow::before {
     border-bottom-color: var(--background);
   }
 
   h1 {
-    font-size: 1.5em;
+    font-size: 18px;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-weight: bold;
   }
 
   h2 {
-    font-size: 1em;
+    font-size: 14px;
     color: var(--text-light);
     overflow: hidden;
     text-overflow: ellipsis;
   }
 }
+[data-theme='dark'] {
+  #profile-popover {
+    box-shadow: 2px 4px 24px rgba(0, 0, 0, 0.24);
+  }
+}
 
 .profile-popover__header {
   display: flex;
-  min-height: 6vh;
+  height: 50px;
   margin-bottom: 0.75em;
 
-  span {
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     white-space: nowrap;
     overflow: hidden;
   }
 
   img {
-    margin-right: 0.75em;
-    height: 6vh;
+    margin-right: 12px;
+    height: 50px;
     border-radius: 100%;
   }
 
   button {
     border: none;
     background: none;
-    font-size: 1.5em;
+    font-size: 20px;
     line-height: 1em;
     padding: 0 0.5em;
     border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    span {
+      font-size: 18px;
+    }
   }
 
   button:hover {
@@ -79,6 +95,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
+    font-size: 16px;
   }
 
   li div {
@@ -94,15 +111,6 @@
     background: none;
     width: 100%;
   }
-
-  .divider-before::before {
-    display: block;
-    content: '';
-    width: 100%;
-    height: 1px;
-    background-color: var(--overlay2);
-    margin: 0.25em 0;
-  }
 }
 
 .profile-popover__link,