refactor: streamline navbar and settings tab cues

2026-02-18 14:52:41 -08:00 · 2026-02-18 14:52:41 -08:00 · d62564fd0d
commit d62564fd0d
parent c1259f0bf5
6 changed files with 330 additions and 144 deletions
--- a/frontend/src/components/layout/Navbar.jsx
+++ b/frontend/src/components/layout/Navbar.jsx
@ -8,11 +8,9 @@ import HouseholdSwitcher from "../household/HouseholdSwitcher";

 export default function Navbar() {
  const { role, logout, username } = useContext(AuthContext);
-  const [showNavMenu, setShowNavMenu] = useState(false);
  const [showUserMenu, setShowUserMenu] = useState(false);

  const closeMenus = () => {
-    setShowNavMenu(false);
    setShowUserMenu(false);
  };

@ -30,51 +28,52 @@ export default function Navbar() {

  return (
    <nav className="navbar">
-      {/* Left: Navigation Menu */}
-      <div className="navbar-section navbar-left">
-        <button
-          className="navbar-menu-btn"
-          onClick={() => {
-            setShowNavMenu(!showNavMenu);
-            setShowUserMenu(false);
-          }}
-          aria-label="Navigation menu"
-        >
-          <span className="hamburger-icon">
-            <span></span>
-            <span></span>
-            <span></span>
-          </span>
-        </button>
+      <div className="navbar-section navbar-spacer" aria-hidden="true"></div>

-        {showNavMenu && (
-          <>
-            <div className="menu-overlay" onClick={closeMenus}></div>
-            <div className="navbar-dropdown nav-dropdown">
-              <Link to="/" onClick={closeMenus}>Home</Link>
-              <Link to="/manage" onClick={closeMenus}>Manage</Link>
-              <Link to="/settings" onClick={closeMenus}>Settings</Link>
-              {role === "system_admin" && <Link to="/admin" onClick={closeMenus}>Admin</Link>}
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Center: Household Switcher */}
+      {/* Center: Home + Household + Manage */}
      <div className="navbar-section navbar-center">
+        <div className="navbar-center-nav">
+          <Link
+            to="/"
+            className="navbar-icon-link navbar-icon-left"
+            title="Home"
+            aria-label="Home"
+            onClick={closeMenus}
+          >
+            <span aria-hidden="true">&#8962;</span>
+          </Link>
+
+          <div className="navbar-household-wrap">
            <HouseholdSwitcher />
          </div>

+          <Link
+            to="/manage"
+            className="navbar-icon-link navbar-icon-right"
+            title="Manage"
+            aria-label="Manage"
+            onClick={closeMenus}
+          >
+            <span aria-hidden="true">&#9881;</span>
+          </Link>
+        </div>
+      </div>
+
      {/* Right: User Menu */}
      <div className="navbar-section navbar-right">
        <button
          className="navbar-user-btn"
          onClick={() => {
            setShowUserMenu(!showUserMenu);
-            setShowNavMenu(false);
          }}
+          aria-label="User menu"
        >
-          {username}
+          <span className="navbar-user-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+              <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.14 0-7.5 2.69-7.5 6v1h15v-1c0-3.31-3.36-6-7.5-6Z" />
+            </svg>
+          </span>
+          <span className="navbar-user-name">{username}</span>
        </button>

        {showUserMenu && (
@ -85,6 +84,14 @@ export default function Navbar() {
                <span className="user-dropdown-username">{username}</span>
                <span className="user-dropdown-role">{role}</span>
              </div>
+              <Link to="/settings" className="user-dropdown-link" onClick={closeMenus}>
+                User Settings
+              </Link>
+              {role === "system_admin" && (
+                <Link to="/admin" className="user-dropdown-link" onClick={closeMenus}>
+                  Admin Settings
+                </Link>
+              )}
              <button className="user-dropdown-logout" onClick={handleLogout}>
                Logout
              </button>
--- a/frontend/src/components/manage/ManageStores.jsx
+++ b/frontend/src/components/manage/ManageStores.jsx
@ -86,7 +86,6 @@ export default function ManageStores() {
                <div className="store-info">
                  <h3>{store.name}</h3>
                  {store.location && <p className="store-location">{store.location}</p>}
-                  {store.is_default && <span className="default-badge">Default</span>}
                </div>
                {isAdmin && (
                  <div className="store-actions">
--- a/frontend/src/components/store/StoreTabs.jsx
+++ b/frontend/src/components/store/StoreTabs.jsx
@ -26,7 +26,6 @@ export default function StoreTabs() {
            disabled={loading}
          >
            <span className="store-name">{store.name}</span>
-            {store.is_default && <span className="default-badge">Default</span>}
          </button>
        ))}
      </div>
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { changePassword, getCurrentUser, updateCurrentUser } from "../api/users";
 import { SettingsContext } from "../context/SettingsContext";
 import "../styles/pages/Settings.css";
@ -7,6 +7,9 @@ import "../styles/pages/Settings.css";
 export default function Settings() {
  const { settings, updateSettings, resetSettings } = useContext(SettingsContext);
  const [activeTab, setActiveTab] = useState("appearance");
+  const tabsRef = useRef(null);
+  const [showLeftArrow, setShowLeftArrow] = useState(false);
+  const [showRightArrow, setShowRightArrow] = useState(false);

  // Account management state
  const [displayName, setDisplayName] = useState("");
@ -30,6 +33,35 @@ export default function Settings() {
    loadProfile();
  }, []);

+  useEffect(() => {
+    const tabsElement = tabsRef.current;
+    if (!tabsElement) return;
+
+    const updateArrowVisibility = () => {
+      const hasOverflow = tabsElement.scrollWidth > tabsElement.clientWidth + 1;
+
+      if (!hasOverflow) {
+        setShowLeftArrow(false);
+        setShowRightArrow(false);
+        return;
+      }
+
+      setShowLeftArrow(tabsElement.scrollLeft > 4);
+      setShowRightArrow(
+        tabsElement.scrollLeft + tabsElement.clientWidth < tabsElement.scrollWidth - 4
+      );
+    };
+
+    updateArrowVisibility();
+
+    tabsElement.addEventListener("scroll", updateArrowVisibility, { passive: true });
+    window.addEventListener("resize", updateArrowVisibility);
+
+    return () => {
+      tabsElement.removeEventListener("scroll", updateArrowVisibility);
+      window.removeEventListener("resize", updateArrowVisibility);
+    };
+  }, []);

  const handleThemeChange = (theme) => {
    updateSettings({ theme });
@ -114,7 +146,15 @@ export default function Settings() {
      <div className="card" style={{ maxWidth: '800px', margin: '0 auto' }}>
        <h1 className="text-2xl font-semibold mb-4">Settings</h1>

-        <div className="settings-tabs">
+        <div className="settings-tabs-wrapper">
+          <div
+            className={`settings-tabs-arrow settings-tabs-arrow-left ${showLeftArrow ? "visible" : ""}`}
+            aria-hidden="true"
+          >
+            &#8249;
+          </div>
+
+          <div className="settings-tabs" ref={tabsRef}>
            <button
              className={`settings-tab ${activeTab === "appearance" ? "active" : ""}`}
              onClick={() => setActiveTab("appearance")}
@ -141,6 +181,14 @@ export default function Settings() {
            </button>
          </div>

+          <div
+            className={`settings-tabs-arrow settings-tabs-arrow-right ${showRightArrow ? "visible" : ""}`}
+            aria-hidden="true"
+          >
+            &#8250;
+          </div>
+        </div>
+
        <div className="settings-content">
          {/* Appearance Tab */}
          {activeTab === "appearance" && (
--- a/frontend/src/styles/components/Navbar.css
+++ b/frontend/src/styles/components/Navbar.css
@ -6,8 +6,8 @@
  background: #343a40;
  color: white;
  padding: 0.75rem 1rem;
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@ -19,52 +19,86 @@
  align-items: center;
 }

-.navbar-left {
-  flex: 0 0 auto;
-}
-
 .navbar-center {
-  flex: 1 1 auto;
+  grid-column: 2;
  display: flex;
  justify-content: center;
-  max-width: 80%;
-  margin: 0 auto;
+  min-width: 0;
+  justify-self: center;
 }

 .navbar-right {
+  grid-column: 3;
+  justify-self: end;
  flex: 0 0 auto;
  position: relative;
 }

-/* Hamburger Menu Button */
-.navbar-menu-btn {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0.5rem;
+.navbar-spacer {
+  grid-column: 1;
+}
+
+.navbar-center-nav {
  display: flex;
  align-items: center;
+  gap: 0;
+  width: 100%;
  justify-content: center;
 }

-.hamburger-icon {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 24px;
+.navbar-household-wrap {
+  position: relative;
+  width: 17rem;
+  flex: 0 0 17rem;
+  margin: 0;
 }

-.hamburger-icon span {
+.navbar .household-switcher {
  display: block;
  width: 100%;
-  height: 3px;
-  background: white;
-  border-radius: 2px;
-  transition: all 0.3s;
 }

-.navbar-menu-btn:hover .hamburger-icon span {
-  background: #ddd;
+.navbar-icon-link {
+  width: 48px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: #ffffff;
+  background: #495057;
+  border: 1px solid #5a6268;
+  border-radius: 0;
+  font-size: 1.2rem;
+  line-height: 1;
+  transition: background 0.2s;
+}
+
+.navbar-icon-link:hover {
+  background: #5a6268;
+}
+
+.navbar-icon-link:focus-visible {
+  outline: 2px solid #9ec5fe;
+  outline-offset: 2px;
+}
+
+.navbar-icon-left {
+  margin-right: 0;
+  border-radius: 8px 0 0 8px;
+  border-right: none;
+}
+
+.navbar-icon-right {
+  margin-left: 0;
+  border-radius: 0 8px 8px 0;
+  border-left: none;
+}
+
+.navbar .household-switcher-toggle {
+  border-radius: 0;
+  height: 40px;
+  padding: 0 0.75rem;
 }

 /* User Button */
@ -79,12 +113,33 @@
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }

 .navbar-user-btn:hover {
  background: #5a6268;
 }

+.navbar-user-icon {
+  width: 18px;
+  height: 18px;
+  display: none;
+  color: #ffffff;
+}
+
+.navbar-user-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  display: block;
+}
+
+.navbar-user-name {
+  display: inline-block;
+}
+
 /* Dropdown Overlay */
 .menu-overlay {
  position: fixed;
@ -110,31 +165,6 @@
 }

 /* Navigation Dropdown */
-.nav-dropdown {
-  left: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.nav-dropdown a {
-  color: #343a40;
-  text-decoration: none;
-  padding: 0.75rem 1.25rem;
-  font-size: 1rem;
-  transition: background 0.2s;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.nav-dropdown a:last-child {
-  border-bottom: none;
-}
-
-.nav-dropdown a:hover {
-  background: #f8f9fa;
-  color: var(--color-primary);
-}
-
-/* User Dropdown */
 .user-dropdown {
  right: 0;
  min-width: 200px;
@ -161,6 +191,20 @@
  text-transform: capitalize;
 }

+.user-dropdown-link {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1.25rem;
+  color: #343a40;
+  text-decoration: none;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.2s;
+}
+
+.user-dropdown-link:hover {
+  background: #f8f9fa;
+}
+
 .user-dropdown-logout {
  width: 100%;
  background: #dc3545;
@ -177,12 +221,6 @@
  background: #c82333;
 }

-/* Household Switcher - Centered with max width */
-.navbar-center > * {
-  width: 100%;
-  max-width: 24ch; /* 24 characters max width */
-}
-
 /* Mobile Responsive */
@media (max-width: 768px) {
  .navbar {
@ -190,8 +228,23 @@
    gap: 0.5rem;
  }

-  .navbar-center {
-    max-width: 60%;
+  .navbar-household-wrap {
+    width: 14rem;
+    flex: 0 0 14rem;
+  }
+
+  .navbar-icon-link {
+    width: 42px;
+    height: 40px;
+    font-size: 1rem;
+  }
+
+  .navbar-icon-left {
+    margin-right: 0;
+  }
+
+  .navbar-icon-right {
+    margin-left: 0;
  }

  .navbar-user-btn {
@ -199,10 +252,6 @@
    font-size: 0.9rem;
  }

-  .nav-dropdown {
-    min-width: 160px;
-  }
-
  .user-dropdown {
    min-width: 180px;
  }
@ -211,22 +260,43 @@
@media (max-width: 480px) {
  .navbar {
    padding: 0.5rem;
+    grid-template-columns: auto 1fr auto;
  }

-  .navbar-center {
-    max-width: 50%;
+  .navbar-household-wrap {
+    width: 11rem;
+    flex: 0 0 11rem;
  }

-  .navbar-user-btn {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.85rem;
+  .navbar-icon-left {
+    margin-right: 0;
  }

-  .hamburger-icon {
-    width: 20px;
-  }
-
-  .hamburger-icon span {
-    height: 2.5px;
+  .navbar-icon-right {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 360px) {
+  .navbar-household-wrap {
+    width: 10rem;
+    flex: 0 0 10rem;
+  }
+}
+
+@media (max-width: 900px) {
+  .navbar-user-btn {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .navbar-user-icon {
+    display: inline-flex;
+  }
+
+  .navbar-user-name {
+    display: none;
  }
 }
--- a/frontend/src/styles/pages/Settings.css
+++ b/frontend/src/styles/pages/Settings.css
@ -7,10 +7,19 @@
 }

 /* Tabs */
+.settings-tabs-wrapper {
+  position: relative;
+  margin-bottom: var(--spacing-xl);
+  padding: 0 0.8rem;
+}
+
 .settings-tabs {
  display: flex;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-xl);
+  gap: 0rem;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--color-border-light);
  touch-action: pan-x; /* Lock Y-axis, allow only horizontal scrolling */
  scrollbar-width: none; /* Firefox */
@ -22,7 +31,10 @@
 }

 .settings-tab {
-  padding: var(--spacing-md) var(--spacing-lg);
+  flex: 0 0 max-content;
+  white-space: nowrap;
+  width: max-content;
+  padding: 0rem 1.4rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
@ -34,6 +46,41 @@
  margin-bottom: -2px;
 }

+.settings-tabs-arrow {
+  position: absolute;
+  top: calc(50% - 0.2rem);
+  transform: translateY(-50%);
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 999px;
+  border: none;
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition: opacity 0.2s ease;
+}
+
+.settings-tabs-arrow.visible {
+  opacity: 1;
+}
+
+.settings-tabs-arrow-left {
+  left: -1.6rem;
+}
+
+.settings-tabs-arrow-right {
+  right: -1.6rem;
+}
+
 .settings-tab:hover {
  color: var(--color-primary);
  background: var(--color-bg-hover);
@ -180,14 +227,30 @@
  }

  .settings-tabs {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+    padding: 0 0.1rem;
  }

  .settings-tab {
-    padding: var(--spacing-sm) var(--spacing-md);
-    white-space: nowrap;
+    padding: 0.4rem 0.35rem;
+  }
+
+  .settings-tabs-wrapper {
+    padding: 0 0.55rem;
+  }
+
+  .settings-tabs-arrow {
+    top: calc(50% - 0.15rem);
+    width: 2.2rem;
+    height: 2.2rem;
+    font-size: 1.65rem;
+  }
+
+  .settings-tabs-arrow-left {
+    left: -1.2rem;
+  }
+
+  .settings-tabs-arrow-right {
+    right: -1.2rem;
  }

  .settings-theme-options {