Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize drawer

Browse Source
This commit is contained in:
LittleSheep 2025-01-09 20:50:42 +08:00
parent 92f6f0d2a8
commit 94ae812822
1 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/CapDrawer.tsx
View File

@ -9,26 +9,29 @@ import {
Drawer, Drawer,
Toolbar, Toolbar,
Typography, Typography,
Link,
} from '@mui/material' } from '@mui/material'
import { JSX } from 'react' import { JSX } from 'react'
import Image from 'next/image' import Image from 'next/image'
import FeedIcon from '@mui/icons-material/Feed' import ExploreIcon from '@mui/icons-material/Explore'
import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary' import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
import PolicyIcon from '@mui/icons-material/Policy' import NextLink from 'next/link'
import Link from 'next/link' import { useRouter } from 'next/router'
interface NavLink { interface NavLink {
title: string title: string
icon: JSX.Element icon?: JSX.Element
href: string href: string
} }
export function CapDrawer({ width, open, onClose }: { width: number; open: boolean; onClose: () => void }) { export function CapDrawer({ width, open, onClose }: { width: number; open: boolean; onClose: () => void }) {
const router = useRouter()
const functionLinks: NavLink[] = [ const functionLinks: NavLink[] = [
{ {
title: 'Posts', title: 'Explore',
icon: <FeedIcon />, icon: <ExploreIcon />,
href: '/posts', href: '/posts',
}, },
{ {
@ -41,7 +44,6 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
const additionalLinks: NavLink[] = [ const additionalLinks: NavLink[] = [
{ {
title: 'Terms & Conditions', title: 'Terms & Conditions',
icon: <PolicyIcon />,
href: '/terms', href: '/terms',
}, },
] ]
@ -74,29 +76,26 @@ export function CapDrawer({ width, open, onClose }: { width: number; open: boole
<List> <List>
{functionLinks.map((l) => ( {functionLinks.map((l) => (
<Link passHref href={l.href} key={l.href}> <NextLink passHref href={l.href} key={l.href}>
<ListItem disablePadding> <ListItem disablePadding>
<ListItemButton> <ListItemButton selected={router.pathname == l.href}>
<ListItemIcon>{l.icon}</ListItemIcon> <ListItemIcon>{l.icon}</ListItemIcon>
<ListItemText primary={l.title} /> <ListItemText primary={l.title} />
</ListItemButton> </ListItemButton>
</ListItem> </ListItem>
</Link> </NextLink>
))} ))}
</List> </List>
<Divider /> <Divider />
<List dense> <Box sx={{ display: 'flex', flexWrap: 'wrap', px: 2, py: 1.5 }}>
{additionalLinks.map((l) => ( {additionalLinks.map((l) => (
<Link passHref href={l.href} key={l.href}> <NextLink passHref href={l.href} key={l.href}>
<ListItem disablePadding> <Link variant="body2" color={'textSecondary'} fontSize={13}>
<ListItemButton> {l.title}
<ListItemIcon>{l.icon}</ListItemIcon> </Link>
<ListItemText primary={l.title} /> </NextLink>
</ListItemButton>
</ListItem>
</Link>
))} ))}
</List> </Box>
</Box> </Box>
</Drawer> </Drawer>
) )