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 = () => { )} - {!isMobile && } + { +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', }} > -