From d09b40615fa8808bbc56d08a1d7d16fbf0523559 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Mon, 16 Feb 2026 15:45:27 +0100
Subject: [PATCH] added categories drop down menu

---
 frontend/src/App.tsx | 52 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 42 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 08ab370..ab8d1f2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -137,29 +137,32 @@ const GlobalSearch = () => {
 const App: React.FC = () => {
   const [themeName, setThemeName] = useState<CatppuccinTheme>((localStorage.getItem('theme') as CatppuccinTheme) || 'mocha');
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [catAnchorEl, setCatAnchorEl] = useState<null | HTMLElement>(null);
+  const [categories, setCategories] = useState<{name: string, slug: string}[]>([]);
   const [user, setUser] = useState<{username: string, avatar: string | null} | null>(null);
   const [loadingUser, setLoadingUser] = useState(true);
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
-    const fetchUser = async () => {
+    const fetchData = async () => {
       try {
-        const response = await api.get('users/me/');
-        setUser(response.data);
-        if (response.data.theme) {
-            setThemeName(response.data.theme);
+        const [userRes, catRes] = await Promise.all([
+            localStorage.getItem('token') ? api.get('users/me/') : Promise.resolve({ data: null }),
+            api.get('categories/')
+        ]);
+        
+        if (userRes.data) {
+            setUser(userRes.data);
+            if (userRes.data.theme) setThemeName(userRes.data.theme);
         }
+        setCategories(catRes.data);
       } catch (err) {
         setUser(null);
       } finally {
         setLoadingUser(false);
       }
     };
-    if (localStorage.getItem('token')) {
-        fetchUser();
-    } else {
-        setLoadingUser(false);
-    }
+    fetchData();
   }, []);
 
   const theme = useMemo(() => getTheme(themeName), [themeName]);
@@ -248,6 +251,35 @@ const App: React.FC = () => {
                 <Typography variant="h6" component="div" sx={{ fontWeight: 'bold', display: { xs: 'none', sm: 'block' } }}>
                   <Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
                 </Typography>
+
+                <Box sx={{ display: { xs: 'none', md: 'flex' }, ml: 4 }}>
+                    <Button 
+                        color="inherit" 
+                        endIcon={<ArrowDropDownIcon />}
+                        onClick={(e) => setCatAnchorEl(e.currentTarget)}
+                        sx={{ fontWeight: 'bold', textTransform: 'none', fontSize: '1rem' }}
+                    >
+                        Categories
+                    </Button>
+                    <Menu
+                        anchorEl={catAnchorEl}
+                        open={Boolean(catAnchorEl)}
+                        onClose={() => setCatAnchorEl(null)}
+                        elevation={3}
+                        sx={{ mt: 1 }}
+                    >
+                        {categories.map(cat => (
+                            <MenuItem 
+                                key={cat.slug} 
+                                component={Link} 
+                                to={`/category/${cat.slug}`}
+                                onClick={() => setCatAnchorEl(null)}
+                            >
+                                {cat.name}
+                            </MenuItem>
+                        ))}
+                    </Menu>
+                </Box>
                 
                 <GlobalSearch />