From 0621437546f585e18c0689f2b2e46111c9e88906 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Tue, 16 Jun 2026 22:12:29 +0200
Subject: [PATCH] desktop bar -> general bar (mobile too)

---
 frontend/src/App.tsx                          |  4 +--
 ...DesktopCategoryBar.tsx => CategoryBar.tsx} | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 12 deletions(-)
 rename frontend/src/components/layout/{DesktopCategoryBar.tsx => CategoryBar.tsx} (81%)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5dfc6fb..9df84a1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -24,7 +24,7 @@ import { useDrawerAnchor } from './hooks/useDrawerAnchor';
 import { NavSidebar } from './components/layout/NavSidebar';
 import { BrandMark } from './components/layout/BrandMark';
 import { DesktopTopBar } from './components/layout/DesktopTopBar';
-import { DesktopCategoryBar } from './components/layout/DesktopCategoryBar';
+import { CategoryBar } from './components/layout/CategoryBar';
 import { useCategories } from './api/queries/useCategories';
 import { NotificationMenu } from './components/layout/NotificationMenu';
 import { RequireSuperuser } from './components/auth/RequireSuperuser';
@@ -170,7 +170,7 @@ const App: React.FC = () => {
         </SwipeableDrawer>
       )}
 
-      {!isMobile && <DesktopCategoryBar categories={categories} />}
+      <CategoryBar categories={categories} />
 
       <Box sx={{ display: 'flex', flexGrow: 1, minHeight: 0 }}>
         <Box
diff --git a/frontend/src/components/layout/DesktopCategoryBar.tsx b/frontend/src/components/layout/CategoryBar.tsx
similarity index 81%
rename from frontend/src/components/layout/DesktopCategoryBar.tsx
rename to frontend/src/components/layout/CategoryBar.tsx
index 0c3d0bd..265a674 100644
--- a/frontend/src/components/layout/DesktopCategoryBar.tsx
+++ b/frontend/src/components/layout/CategoryBar.tsx
@@ -7,16 +7,17 @@ import CollectionsBookmarkOutlinedIcon from '@mui/icons-material/CollectionsBook
 import { useTranslation } from 'react-i18next';
 import { useAuth } from '../../hooks/useAuth';
 
-export interface DesktopCategoryBarProps {
+export interface CategoryBarProps {
   categories: { name: string; slug: string }[];
 }
 
 /**
- * Desktop horizontal nav (md+), pinned just under the top bar. Categories are
- * the dominant browse axis here — laid out as a scrollable row of tabs — with
- * Home / Community as primary links on the left. Replaces the old left rail.
+ * Horizontal nav pinned just under the top bar on every breakpoint. Categories
+ * are the dominant browse axis — laid out as a scrollable row of tabs — with
+ * Home / Community / Dashboard as primary links on the left. Replaces the old
+ * left rail on desktop and mirrors the same sticky chrome on mobile.
  */
-export const DesktopCategoryBar = ({ categories }: DesktopCategoryBarProps) => {
+export const CategoryBar = ({ categories }: CategoryBarProps) => {
   const { t } = useTranslation();
   const location = useLocation();
   const { user } = useAuth();
@@ -43,7 +44,7 @@ export const DesktopCategoryBar = ({ categories }: DesktopCategoryBarProps) => {
       component="nav"
       sx={{
         position: 'sticky',
-        top: 64,
+        top: { xs: 56, sm: 64 },
         zIndex: (theme) => theme.zIndex.appBar - 1,
         borderBottom: '1px solid',
         borderColor: (theme) => theme.tokens.glass.border,
@@ -57,17 +58,22 @@ export const DesktopCategoryBar = ({ categories }: DesktopCategoryBarProps) => {
         sx={{
           maxWidth: 1400,
           mx: 'auto',
-          px: { md: 6 },
+          px: { xs: 1, sm: 4, md: 6 },
           display: 'flex',
           alignItems: 'center',
-          gap: 1,
-          minHeight: 52,
+          gap: { xs: 0.5, md: 1 },
+          minHeight: { xs: 46, md: 52 },
           overflowX: 'auto',
           '&::-webkit-scrollbar': { display: 'none' },
           scrollbarWidth: 'none',
         }}
       >
-        <Button component={Link} to="/" disableRipple sx={{ ...tabSx(isActive('/')), ml: -1.75 }}>
+        <Button
+          component={Link}
+          to="/"
+          disableRipple
+          sx={{ ...tabSx(isActive('/')), ml: { xs: -0.5, md: -1.75 } }}
+        >
           <HomeOutlinedIcon sx={{ fontSize: '1.1rem', mr: 0.75 }} />
           {t('nav.home')}
         </Button>