✨ App drawer

💄 Support breaks for story posts

src/components/CapAppBar.tsx

@@ -3,11 +3,10 @@ import {
   AppBar,
   AppBarProps,
   Avatar,
-  createTheme,
   IconButton,
-  ThemeProvider,
   Toolbar,
   Typography,
+  useMediaQuery,
   useScrollTrigger,
   useTheme,
 } from '@mui/material'
@@ -15,11 +14,13 @@ import { getAttachmentUrl } from '@/services/network'
 import MenuIcon from '@mui/icons-material/Menu'
 import AccountCircle from '@mui/icons-material/AccountCircle'
 import Link from 'next/link'
-import React from 'react'
+import React, { useState } from 'react'
+import { CapDrawer } from './CapDrawer'
 
 interface ElevationAppBarProps {
   elevation?: number
   color?: any
+  isMobile: boolean
   children?: React.ReactElement<{ elevation?: number } & AppBarProps>
 }
 
@@ -51,38 +52,63 @@ export function CapAppBar() {
   const userStore = useUserStore()
   const theme = useTheme()
 
-  return (
-    <ElevationScroll elevation={2} color="white">
-      <AppBar position="sticky" elevation={0} color="transparent">
-        <Toolbar>
-          <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
-            <MenuIcon />
-          </IconButton>
-          <Link href="/" passHref style={{ flexGrow: 1 }}>
-            <Typography variant="h6" component="div">
-              Capital
-            </Typography>
-          </Link>
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
-          <Link href={userStore.account ? '/users/me' : '/auth/login'} passHref>
+  const [open, setOpen] = useState(false)
+
+  const drawerWidth = 280
+
+  return (
+    <>
+      <CapDrawer width={drawerWidth} open={open} onClose={() => setOpen(false)} />
+
+      <ElevationScroll isMobile={isMobile} elevation={2} color="white">
+        <AppBar
+          position="sticky"
+          elevation={0}
+          color="transparent"
+          sx={{
+            width: isMobile ? null : `calc(100% - ${drawerWidth}`,
+            marginLeft: isMobile ? null : `${drawerWidth}px`,
+          }}
+        >
+          <Toolbar>
             <IconButton
               size="large"
-              aria-label="account of current user"
-              aria-controls="primary-search-account-menu"
-              aria-haspopup="true"
+              edge="start"
               color="inherit"
+              aria-label="menu"
+              sx={{ mr: 2 }}
+              onClick={() => setOpen(true)}
             >
-              {userStore.account ? (
-                <Avatar sx={{ backgroundColor: 'transparent' }} src={getAttachmentUrl(userStore.account.avatar)} />
-              ) : (
-                <Avatar sx={{ backgroundColor: 'transparent' }}>
-                  <AccountCircle sx={{ color: theme.palette.text.primary }} />
-                </Avatar>
-              )}
+              <MenuIcon />
             </IconButton>
-          </Link>
-        </Toolbar>
-      </AppBar>
-    </ElevationScroll>
+            <Link href="/" passHref style={{ flexGrow: 1 }}>
+              <Typography variant="h6" component="div">
+                Capital
+              </Typography>
+            </Link>
+
+            <Link href={userStore.account ? '/users/me' : '/auth/login'} passHref>
+              <IconButton
+                size="large"
+                aria-label="account of current user"
+                aria-controls="primary-search-account-menu"
+                aria-haspopup="true"
+                color="inherit"
+              >
+                {userStore.account ? (
+                  <Avatar sx={{ backgroundColor: 'transparent' }} src={getAttachmentUrl(userStore.account.avatar)} />
+                ) : (
+                  <Avatar sx={{ backgroundColor: 'transparent' }}>
+                    <AccountCircle sx={{ color: theme.palette.text.primary }} />
+                  </Avatar>
+                )}
+              </IconButton>
+            </Link>
+          </Toolbar>
+        </AppBar>
+      </ElevationScroll>
+    </>
   )
 }

src/components/CapDrawer.tsx

@@ -0,0 +1,87 @@
+import {
+  Box,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Divider,
+  Drawer,
+  Toolbar,
+} from '@mui/material'
+import { JSX } from 'react'
+
+import FeedIcon from '@mui/icons-material/Feed'
+import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
+import InfoIcon from '@mui/icons-material/Info'
+import PolicyIcon from '@mui/icons-material/Policy'
+import Link from 'next/link'
+
+interface NavLink {
+  title: string
+  icon: JSX.Element
+  href: string
+}
+
+export function CapDrawer({ width, open, onClose }: { width: number; open: boolean; onClose: () => void }) {
+  const functionLinks: NavLink[] = [
+    {
+      title: 'Posts',
+      icon: <FeedIcon />,
+      href: '/posts',
+    },
+    {
+      title: 'Gallery',
+      icon: <PhotoLibraryIcon />,
+      href: '/attachments',
+    },
+  ]
+
+  const additionalLinks: NavLink[] = [
+    {
+      title: 'About',
+      icon: <InfoIcon />,
+      href: '/about',
+    },
+    {
+      title: 'Term & Conditions',
+      icon: <PolicyIcon />,
+      href: '/terms',
+    },
+  ]
+
+  return (
+    <Drawer open={open} onClose={onClose}>
+      <Box sx={{ width: width }} role="presentation" onClick={onClose}>
+        <Toolbar>Solsynth LLC</Toolbar>
+        <Divider />
+
+        <List>
+          {functionLinks.map((l) => (
+            <Link passHref href={l.href} key={l.href}>
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>{l.icon}</ListItemIcon>
+                  <ListItemText primary={l.title} />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          ))}
+        </List>
+        <Divider />
+        <List dense>
+          {additionalLinks.map((l) => (
+            <Link passHref href={l.href} key={l.href}>
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>{l.icon}</ListItemIcon>
+                  <ListItemText primary={l.title} />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          ))}
+        </List>
+      </Box>
+    </Drawer>
+  )
+}