From 8edf0cb7a15f5db14112c543ba9ecb9e2f37411f Mon Sep 17 00:00:00 2001
From: Jacob Sommer <jacobgsommer@gmail.com>
Date: Wed, 7 Feb 2024 20:52:36 -0800
Subject: [PATCH 1/5] Profile menu

---
 site/src/component/AppHeader/AppHeader.scss |   5 +
 site/src/component/AppHeader/AppHeader.tsx  |  13 +-
 site/src/component/AppHeader/Profile.scss   | 136 ++++++++++++++++
 site/src/component/AppHeader/Profile.tsx    | 164 ++++++++++++++++++++
 site/src/component/SideBar/SideBar.tsx      |  88 +++++++----
 site/src/component/SideBar/Sidebar.scss     |  39 +++--
 6 files changed, 398 insertions(+), 47 deletions(-)
 create mode 100644 site/src/component/AppHeader/Profile.scss
 create mode 100644 site/src/component/AppHeader/Profile.tsx

diff --git a/site/src/component/AppHeader/AppHeader.scss b/site/src/component/AppHeader/AppHeader.scss
index 44a09687..56eaea1f 100644
--- a/site/src/component/AppHeader/AppHeader.scss
+++ b/site/src/component/AppHeader/AppHeader.scss
@@ -18,6 +18,11 @@
   }
 }
 
+.school-term {
+  margin-bottom: 0;
+  margin-right: 0.75em;
+}
+
 .navbar {
   position: sticky;
   z-index: 300;
diff --git a/site/src/component/AppHeader/AppHeader.tsx b/site/src/component/AppHeader/AppHeader.tsx
index 782221b3..7de22344 100644
--- a/site/src/component/AppHeader/AppHeader.tsx
+++ b/site/src/component/AppHeader/AppHeader.tsx
@@ -11,6 +11,8 @@ import './AppHeader.scss';
 
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { setSidebarStatus } from '../../store/slices/uiSlice';
+import Profile from './Profile';
+import { isDesktop, isMobile } from 'react-device-detect';
 
 const AppHeader: FC = () => {
   const dispatch = useAppDispatch();
@@ -43,9 +45,11 @@ const AppHeader: FC = () => {
       <div className="navbar-nav">
         <div className="navbar-left">
           {/* Hamburger Menu */}
-          <div className="navbar-menu">
-            <List className="navbar-menu-icon" onClick={toggleMenu} />
-          </div>
+          {isMobile && (
+            <div className="navbar-menu">
+              <List className="navbar-menu-icon" onClick={toggleMenu} />
+            </div>
+          )}
 
           {/* Toggle Course and Professor */}
           {(coursesActive || professorsActive) && (
@@ -82,7 +86,7 @@ const AppHeader: FC = () => {
         </div>
 
         {/* Week */}
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
           <div className="beta" style={{ margin: 'auto 12px' }}>
             <Popup
               className="beta-popup"
@@ -135,6 +139,7 @@ const AppHeader: FC = () => {
           <p className="school-term" style={{ height: '1rem', lineHeight: '1rem' }}>
             {week}
           </p>
+          {isDesktop && <Profile />}
         </div>
       </div>
     </header>
diff --git a/site/src/component/AppHeader/Profile.scss b/site/src/component/AppHeader/Profile.scss
new file mode 100644
index 00000000..54251255
--- /dev/null
+++ b/site/src/component/AppHeader/Profile.scss
@@ -0,0 +1,136 @@
+.navbar-profile {
+  height: 70%;
+}
+
+.navbar-profile-pic {
+  height: 100%;
+  border-radius: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+#profile-popover,
+#theme-popover {
+  font-size: 1rem;
+  padding: 1em;
+  background-color: var(--overlay1);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--background);
+  max-width: 94vw;
+
+  .arrow::before {
+    border-bottom-color: var(--background);
+  }
+
+  h1 {
+    font-size: 1.5em;
+  }
+
+  h2 {
+    font-size: 1em;
+    color: var(--text-light);
+  }
+}
+
+.profile-popover__header {
+  display: flex;
+  min-height: 6vh;
+  margin-bottom: 0.75em;
+
+  img {
+    margin-right: 0.75em;
+    height: 6vh;
+    border-radius: 100%;
+  }
+
+  button {
+    border: none;
+    background: none;
+    font-size: 1.5em;
+    line-height: 1em;
+    padding: 0 0.5em;
+    border-radius: var(--border-radius);
+  }
+
+  button:hover {
+    background-color: var(--overlay2);
+  }
+}
+
+#theme-popover {
+  padding: 0.5em;
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li div {
+    display: inline;
+  }
+
+  a {
+    color: var(--text);
+  }
+}
+
+.profile-popover__links {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li div {
+    display: inline;
+  }
+
+  a {
+    color: var(--text);
+  }
+
+  button {
+    border: none;
+    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,
+.theme-popover__link {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  border-radius: var(--border-radius);
+
+  &:hover {
+    background-color: var(--overlay2);
+  }
+}
+
+.profile-popover__link.active,
+.theme-popover__link.active {
+  color: var(--peterportal-primary-color-1);
+}
+
+i.login-icon {
+  margin-right: 0.75em;
+}
+
+.theme-button:hover,
+.theme-popover__link:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
diff --git a/site/src/component/AppHeader/Profile.tsx b/site/src/component/AppHeader/Profile.tsx
new file mode 100644
index 00000000..0f07c341
--- /dev/null
+++ b/site/src/component/AppHeader/Profile.tsx
@@ -0,0 +1,164 @@
+import { useCookies } from 'react-cookie';
+import { useContext, useEffect, useState } from 'react';
+import ThemeContext from '../../style/theme-context';
+import { Button, OverlayTrigger, Popover } from 'react-bootstrap';
+import { Icon } from 'semantic-ui-react';
+import './Profile.scss';
+import { NavLink } from 'react-router-dom';
+import { ArrowLeftCircleFill } from 'react-bootstrap-icons';
+
+type ProfileMenuTab = 'default' | 'theme';
+
+const Profile = () => {
+  const { darkMode, setTheme, usingSystemTheme } = useContext(ThemeContext);
+  const [cookies] = useCookies(['user']);
+  const [show, setShow] = useState(false);
+  const [tab, setTab] = useState<ProfileMenuTab>('default');
+
+  const { name, email, picture }: { name: string; email: string; picture: string } = cookies?.user ?? {};
+  const isLoggedIn: boolean = cookies.user;
+
+  useEffect(() => {
+    if (!show) {
+      setTimeout(() => setTab('default'), 150); // popover transition time is 150ms
+    }
+  }, [show]);
+
+  const DefaultTab = (
+    <>
+      <div className="profile-popover__header">
+        <img src={picture} alt={name} />
+        <span>
+          <h1>{name}</h1>
+          <h2>{email}</h2>
+        </span>
+      </div>
+      <div className="profile-popover__links">
+        <ul>
+          <li className="divider-before">
+            <NavLink
+              className={({ isActive }) => 'profile-popover__link' + (isActive ? ' active' : '')}
+              to="/reviews"
+              onClick={() => setShow(false)}
+            >
+              <div>
+                <Icon name="sticky note outline" size="large" />
+              </div>
+              Your Reviews
+            </NavLink>
+          </li>
+          <li>
+            <button className="theme-button profile-popover__link" onClick={() => setTab('theme')}>
+              <div>
+                <Icon name={usingSystemTheme ? 'laptop' : darkMode ? 'moon outline' : 'sun outline'} size="large" />
+              </div>
+              Theme
+            </button>
+          </li>
+          <li className="divider-before">
+            <a href={`/api/users/logout`} className="profile-popover__link">
+              <div>
+                <Icon name="sign out" size="large" />
+              </div>
+              Log Out
+            </a>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+
+  const ThemeTab = (
+    <>
+      <div className="profile-popover__header">
+        <button onClick={() => setTab('default')}>
+          <ArrowLeftCircleFill />
+        </button>
+      </div>
+      <div className="profile-popover__links">
+        <ul>
+          <li className="divider-before">
+            <button
+              className={`theme-popover__link${!usingSystemTheme && !darkMode ? ' active' : ''}`}
+              onClick={() => setTheme('light')}
+            >
+              <div>
+                <Icon name="sun outline" size="large" />
+              </div>
+              Light
+            </button>
+          </li>
+          <li>
+            <button
+              className={`theme-popover__link${!usingSystemTheme && darkMode ? ' active' : ''}`}
+              onClick={() => setTheme('dark')}
+            >
+              <div>
+                <Icon name="moon outline" size="large" />
+              </div>
+              Dark
+            </button>
+          </li>
+          <li>
+            <button
+              className={`theme-popover__link${usingSystemTheme ? ' active' : ''}`}
+              onClick={() => setTheme('system')}
+            >
+              <div>
+                <Icon name="laptop" size="large" />
+              </div>
+              System
+            </button>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+
+  const ProfilePopover = (
+    <Popover id="profile-popover">
+      {tab === 'default' && DefaultTab}
+      {tab === 'theme' && ThemeTab}
+    </Popover>
+  );
+
+  return (
+    <>
+      {isLoggedIn ? (
+        <div className="navbar-profile">
+          <OverlayTrigger
+            rootClose
+            trigger="click"
+            placement="bottom"
+            overlay={ProfilePopover}
+            show={show}
+            onToggle={setShow}
+            popperConfig={{
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [-100, 15],
+                  },
+                },
+              ],
+            }}
+          >
+            <img src={picture} alt={name} className="navbar-profile-pic" />
+          </OverlayTrigger>
+        </div>
+      ) : (
+        <a href={`/api/users/auth/google`}>
+          <Button variant={darkMode ? 'dark' : 'light'}>
+            <span>
+              <Icon name="sign in" className="login-icon" />
+            </span>
+            Log In
+          </Button>
+        </a>
+      )}
+    </>
+  );
+};
+
+export default Profile;
diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx
index 16bcc5b5..2b27a015 100644
--- a/site/src/component/SideBar/SideBar.tsx
+++ b/site/src/component/SideBar/SideBar.tsx
@@ -6,7 +6,7 @@ import { useCookies } from 'react-cookie';
 import './Sidebar.scss';
 import defaultAvatarLight from '../../asset/default-avatar.png';
 import defaultAvatarDark from '../../asset/default-avatar-dark.png';
-import { Button } from 'react-bootstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 
 import { useAppSelector, useAppDispatch } from '../..//store/hooks';
 import { setSidebarStatus } from '../../store/slices/uiSlice';
@@ -20,7 +20,7 @@ const SideBar = () => {
   const [name, setName] = useState('');
   const [picture, setPicture] = useState('');
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
-  const { darkMode, setTheme } = useContext(ThemeContext);
+  const { darkMode, setTheme, usingSystemTheme } = useContext(ThemeContext);
   const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
 
   const isLoggedIn = cookies.user !== undefined;
@@ -29,20 +29,20 @@ const SideBar = () => {
     admin: boolean;
   }
 
-  const checkAdmin = async () => {
-    const res: AxiosResponse<AdminResponse> = await axios.get('/api/users/isAdmin');
-    const admin = res.data.admin;
-    setIsAdmin(admin);
-  };
-
   useEffect(() => {
     // if the user is logged in
     if (isLoggedIn) {
       setName(cookies.user.name);
       setPicture(cookies.user.picture);
+      // useEffect's function is not allowed to be async, create async checkAdmin function within
+      const checkAdmin = async () => {
+        const res: AxiosResponse<AdminResponse> = await axios.get('/api/users/isAdmin');
+        const admin = res.data.admin;
+        setIsAdmin(admin);
+      };
+      checkAdmin();
     }
-    checkAdmin();
-  });
+  }, [cookies.user, isLoggedIn]);
 
   const closeSidebar = () => dispatch(setSidebarStatus(false));
 
@@ -75,29 +75,55 @@ const SideBar = () => {
             <span>Peter's Roadmap</span>
           </NavLink>
         </li>
-        {isLoggedIn && (
-          <li>
-            <NavLink
-              to="/reviews"
-              className={({ isActive }) => (isActive ? 'sidebar-active' : '')}
-              onClick={closeSidebar}
-            >
-              <div>
-                <Icon name="sticky note outline" size="large" />
-              </div>
-              <span>Reviews</span>
-            </NavLink>
-          </li>
-        )}
         {showSidebar && (
-          <li>
-            <a className="theme-toggle" onClick={() => setTheme(darkMode ? 'light' : 'dark')}>
-              <div>
-                <Icon name={darkMode ? 'moon outline' : 'sun outline'} size="large" />
+          <>
+            {isLoggedIn && (
+              <li>
+                <NavLink
+                  to="/reviews"
+                  className={({ isActive }) => (isActive ? 'sidebar-active' : '')}
+                  onClick={closeSidebar}
+                >
+                  <div>
+                    <Icon name="sticky note outline" size="large" />
+                  </div>
+                  <span>Reviews</span>
+                </NavLink>
+              </li>
+            )}
+            <li>
+              <div className="theme-button">
+                <div>
+                  <Icon name={usingSystemTheme ? 'laptop' : darkMode ? 'moon outline' : 'sun outline'} size="large" />
+                </div>
+                <Dropdown>
+                  <Dropdown.Toggle variant={darkMode ? 'dark' : 'light'} id="dropdown-basic">
+                    Theme
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu>
+                    <Dropdown.Item
+                      className={`${!usingSystemTheme && !darkMode ? 'active' : ''}`}
+                      onSelect={() => setTheme('light')}
+                    >
+                      Light
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      className={`${!usingSystemTheme && darkMode ? 'active' : ''}`}
+                      onSelect={() => setTheme('dark')}
+                    >
+                      Dark
+                    </Dropdown.Item>
+                    <Dropdown.Item
+                      className={`${usingSystemTheme ? 'active' : ''}`}
+                      onSelect={() => setTheme('system')}
+                    >
+                      System
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </Dropdown>
               </div>
-              <span>Toggle Dark Mode</span>
-            </a>
-          </li>
+            </li>
+          </>
         )}
         {isAdmin && (
           <>
diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss
index e2740d66..3b60fa11 100644
--- a/site/src/component/SideBar/Sidebar.scss
+++ b/site/src/component/SideBar/Sidebar.scss
@@ -60,10 +60,11 @@
 
   .sidebar-links {
     min-width: 60%;
-    margin-bottom: 20vh;
+    margin-bottom: 2em;
 
     ul li {
-      a {
+      a,
+      .theme-button {
         color: var(--text);
         display: flex;
         grid-gap: 10px;
@@ -77,7 +78,7 @@
   }
 
   .sidebar-login {
-    margin-bottom: 5vh;
+    margin-bottom: 20vh;
 
     .sidebar-login-icon {
       margin-right: 0.4vw;
@@ -85,6 +86,28 @@
   }
 }
 
+.theme-button .dropdown {
+  width: 100%;
+
+  button {
+    background-color: transparent;
+    padding: 0;
+    width: 100%;
+    text-align: left;
+    border: none;
+  }
+
+  .dropdown-item.active {
+    background-color: transparent;
+    color: var(--peterportal-primary-color-1);
+  }
+}
+
+.theme-button .show.dropdown button {
+  outline: none;
+  background-color: transparent;
+}
+
 .sidebar.mini {
   position: static;
   width: 5vw;
@@ -130,16 +153,8 @@
   .sidebar {
     width: 100vw;
     z-index: 400;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-
-    .sidebar-login {
-      margin-top: -20vh;
-      margin-bottom: 35vh;
-    }
   }
+
   .sidebar.mini {
     display: none;
   }

From 12724b9cb9c20e775912592286f5619c9258bc98 Mon Sep 17 00:00:00 2001
From: Jacob Sommer <jacobgsommer@gmail.com>
Date: Tue, 13 Feb 2024 23:05:00 -0800
Subject: [PATCH 2/5] Remove unused styles

---
 site/src/component/AppHeader/Profile.scss | 21 +--------------------
 site/src/component/AppHeader/Profile.tsx  |  2 +-
 2 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/site/src/component/AppHeader/Profile.scss b/site/src/component/AppHeader/Profile.scss
index 54251255..b842254e 100644
--- a/site/src/component/AppHeader/Profile.scss
+++ b/site/src/component/AppHeader/Profile.scss
@@ -11,8 +11,7 @@
   }
 }
 
-#profile-popover,
-#theme-popover {
+#profile-popover {
   font-size: 1rem;
   padding: 1em;
   background-color: var(--overlay1);
@@ -59,24 +58,6 @@
   }
 }
 
-#theme-popover {
-  padding: 0.5em;
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  li div {
-    display: inline;
-  }
-
-  a {
-    color: var(--text);
-  }
-}
-
 .profile-popover__links {
   ul {
     list-style: none;
diff --git a/site/src/component/AppHeader/Profile.tsx b/site/src/component/AppHeader/Profile.tsx
index 0f07c341..e0a2c91e 100644
--- a/site/src/component/AppHeader/Profile.tsx
+++ b/site/src/component/AppHeader/Profile.tsx
@@ -101,7 +101,7 @@ const Profile = () => {
           </li>
           <li>
             <button
-              className={`theme-popover__link${usingSystemTheme ? ' active' : ''}`}
+              className={`profile-popover__link${usingSystemTheme ? ' active' : ''}`}
               onClick={() => setTheme('system')}
             >
               <div>

From 92c18e9738bcf4952507484c8926b7d14b4d071f Mon Sep 17 00:00:00 2001
From: Jacob Sommer <jacobgsommer@gmail.com>
Date: Tue, 13 Feb 2024 23:27:45 -0800
Subject: [PATCH 3/5] Set a width/max width for profile menu. Ellipsis text
 overflow

---
 site/src/component/AppHeader/Profile.scss | 12 +++++++++++-
 site/src/component/AppHeader/Profile.tsx  |  8 ++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/site/src/component/AppHeader/Profile.scss b/site/src/component/AppHeader/Profile.scss
index b842254e..c5dca006 100644
--- a/site/src/component/AppHeader/Profile.scss
+++ b/site/src/component/AppHeader/Profile.scss
@@ -17,7 +17,8 @@
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
   border: 1px solid var(--background);
-  max-width: 94vw;
+  width: 350px;
+  max-width: 100vw;
 
   .arrow::before {
     border-bottom-color: var(--background);
@@ -25,11 +26,15 @@
 
   h1 {
     font-size: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   h2 {
     font-size: 1em;
     color: var(--text-light);
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
@@ -38,6 +43,11 @@
   min-height: 6vh;
   margin-bottom: 0.75em;
 
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   img {
     margin-right: 0.75em;
     height: 6vh;
diff --git a/site/src/component/AppHeader/Profile.tsx b/site/src/component/AppHeader/Profile.tsx
index e0a2c91e..5030a7f8 100644
--- a/site/src/component/AppHeader/Profile.tsx
+++ b/site/src/component/AppHeader/Profile.tsx
@@ -29,8 +29,8 @@ const Profile = () => {
       <div className="profile-popover__header">
         <img src={picture} alt={name} />
         <span>
-          <h1>{name}</h1>
-          <h2>{email}</h2>
+          <h1 title={name}>{name}</h1>
+          <h2 title={email}>{email}</h2>
         </span>
       </div>
       <div className="profile-popover__links">
@@ -101,7 +101,7 @@ const Profile = () => {
           </li>
           <li>
             <button
-              className={`profile-popover__link${usingSystemTheme ? ' active' : ''}`}
+              className={`theme-popover__link${usingSystemTheme ? ' active' : ''}`}
               onClick={() => setTheme('system')}
             >
               <div>
@@ -138,7 +138,7 @@ const Profile = () => {
                 {
                   name: 'offset',
                   options: {
-                    offset: [-100, 15],
+                    offset: [-150, 15],
                   },
                 },
               ],

From 3da883189635696d6a6bd4441846c54fa850867d Mon Sep 17 00:00:00 2001
From: Jacob Sommer <jacobgsommer@gmail.com>
Date: Tue, 13 Feb 2024 23:48:41 -0800
Subject: [PATCH 4/5] Fix sidebar accessibility. Use buttons

---
 site/src/component/AppHeader/AppHeader.scss |  3 ++-
 site/src/component/AppHeader/AppHeader.tsx  |  6 +++---
 site/src/component/SideBar/SideBar.tsx      |  6 +++---
 site/src/component/SideBar/Sidebar.scss     | 13 ++++---------
 4 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/site/src/component/AppHeader/AppHeader.scss b/site/src/component/AppHeader/AppHeader.scss
index 56eaea1f..72f4a383 100644
--- a/site/src/component/AppHeader/AppHeader.scss
+++ b/site/src/component/AppHeader/AppHeader.scss
@@ -56,7 +56,8 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      cursor: pointer;
+      border: none;
+      background: none;
 
       .navbar-menu-icon {
         width: 3vh;
diff --git a/site/src/component/AppHeader/AppHeader.tsx b/site/src/component/AppHeader/AppHeader.tsx
index 7de22344..c7066a0a 100644
--- a/site/src/component/AppHeader/AppHeader.tsx
+++ b/site/src/component/AppHeader/AppHeader.tsx
@@ -46,9 +46,9 @@ const AppHeader: FC = () => {
         <div className="navbar-left">
           {/* Hamburger Menu */}
           {isMobile && (
-            <div className="navbar-menu">
-              <List className="navbar-menu-icon" onClick={toggleMenu} />
-            </div>
+            <button className="navbar-menu" onClick={toggleMenu}>
+              <List className="navbar-menu-icon" />
+            </button>
           )}
 
           {/* Toggle Course and Professor */}
diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx
index 2b27a015..65cf9898 100644
--- a/site/src/component/SideBar/SideBar.tsx
+++ b/site/src/component/SideBar/SideBar.tsx
@@ -163,9 +163,9 @@ const SideBar = () => {
   return (
     <div className="sidebar">
       {/* Close Button */}
-      <div className="sidebar-close">
-        <XCircle className="sidebar-close-icon" onClick={closeSidebar} />
-      </div>
+      <button className="sidebar-close" onClick={closeSidebar}>
+        <XCircle className="sidebar-close-icon" size={'3vh'} />
+      </button>
 
       {/* Profile Icon and Name */}
       <div className="sidebar-profile">
diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss
index 3b60fa11..22348786 100644
--- a/site/src/component/SideBar/Sidebar.scss
+++ b/site/src/component/SideBar/Sidebar.scss
@@ -27,15 +27,10 @@
   }
 
   .sidebar-close {
-    padding: 2vw;
-    width: 100%;
-
-    .sidebar-close-icon {
-      width: 3vh;
-      height: 3vh;
-      float: right;
-      cursor: pointer;
-    }
+    padding: 1em;
+    margin-left: auto;
+    border: none;
+    background: none;
   }
 
   .sidebar-profile {

From 65a39a75387f95f5859ee0617b4bf1eab61d985d Mon Sep 17 00:00:00 2001
From: Jacob Sommer <jacobgsommer@gmail.com>
Date: Tue, 13 Feb 2024 23:50:54 -0800
Subject: [PATCH 5/5] Use size prop for hamburger icon size

---
 site/src/component/AppHeader/AppHeader.scss | 5 -----
 site/src/component/AppHeader/AppHeader.tsx  | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/site/src/component/AppHeader/AppHeader.scss b/site/src/component/AppHeader/AppHeader.scss
index 72f4a383..2caee222 100644
--- a/site/src/component/AppHeader/AppHeader.scss
+++ b/site/src/component/AppHeader/AppHeader.scss
@@ -58,11 +58,6 @@
       align-items: center;
       border: none;
       background: none;
-
-      .navbar-menu-icon {
-        width: 3vh;
-        height: 3vh;
-      }
     }
 
     .desktop-toggle {
diff --git a/site/src/component/AppHeader/AppHeader.tsx b/site/src/component/AppHeader/AppHeader.tsx
index c7066a0a..c9a42f1b 100644
--- a/site/src/component/AppHeader/AppHeader.tsx
+++ b/site/src/component/AppHeader/AppHeader.tsx
@@ -47,7 +47,7 @@ const AppHeader: FC = () => {
           {/* Hamburger Menu */}
           {isMobile && (
             <button className="navbar-menu" onClick={toggleMenu}>
-              <List className="navbar-menu-icon" />
+              <List className="navbar-menu-icon" size={'3vh'} />
             </button>
           )}