109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
import {
|
|
Box,
|
|
List,
|
|
ListItem,
|
|
ListItemButton,
|
|
ListItemIcon,
|
|
ListItemText,
|
|
Divider,
|
|
Drawer,
|
|
Toolbar,
|
|
Typography,
|
|
Link,
|
|
} from '@mui/material'
|
|
import { JSX } from 'react'
|
|
import Image from 'next/image'
|
|
|
|
import ExploreIcon from '@mui/icons-material/Explore'
|
|
import PhotoLibraryIcon from '@mui/icons-material/PhotoLibrary'
|
|
import AppsIcon from '@mui/icons-material/Apps'
|
|
import NextLink from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
|
|
export interface NavLink {
|
|
title: string
|
|
icon?: JSX.Element
|
|
href: string
|
|
}
|
|
|
|
export function CapDrawer({ width, open, onClose }: { width: number; open: boolean; onClose: () => void }) {
|
|
const router = useRouter()
|
|
|
|
const functionLinks: NavLink[] = [
|
|
{
|
|
title: 'Explore',
|
|
icon: <ExploreIcon />,
|
|
href: '/posts',
|
|
},
|
|
{
|
|
title: 'Gallery',
|
|
icon: <PhotoLibraryIcon />,
|
|
href: '/attachments',
|
|
},
|
|
{
|
|
title: 'Matrix',
|
|
icon: <AppsIcon />,
|
|
href: '/matrix',
|
|
},
|
|
]
|
|
|
|
const additionalLinks: NavLink[] = [
|
|
{
|
|
title: 'Terms & Conditions',
|
|
href: '/terms',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<Drawer open={open} onClose={onClose}>
|
|
<Box sx={{ width: width }} role="presentation" onClick={onClose}>
|
|
<Toolbar style={{ padding: 0 }}>
|
|
<Box display="flex" gap={2} sx={{ mx: 2 }}>
|
|
<Image
|
|
src="/logo.png"
|
|
width={28}
|
|
height={28}
|
|
alt="company logo"
|
|
style={{ objectFit: 'contain' }}
|
|
className="dark:invert"
|
|
/>
|
|
|
|
<Box display="flex" flexDirection="column" justifyContent="center">
|
|
<Typography variant="body2" component="h2" fontWeight="bold" lineHeight={1.4}>
|
|
Solsynth LLC
|
|
</Typography>
|
|
<Typography variant="caption" component="h3" lineHeight={1} fontFamily="monospace">
|
|
Capital
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Toolbar>
|
|
<Divider />
|
|
|
|
<List>
|
|
{functionLinks.map((l) => (
|
|
<NextLink passHref href={l.href} key={l.href}>
|
|
<ListItem disablePadding>
|
|
<ListItemButton selected={router.pathname == l.href}>
|
|
<ListItemIcon>{l.icon}</ListItemIcon>
|
|
<ListItemText primary={l.title} />
|
|
</ListItemButton>
|
|
</ListItem>
|
|
</NextLink>
|
|
))}
|
|
</List>
|
|
<Divider />
|
|
<Box sx={{ display: 'flex', flexWrap: 'wrap', px: 2, py: 1.5 }}>
|
|
{additionalLinks.map((l) => (
|
|
<NextLink passHref href={l.href} key={l.href}>
|
|
<Link variant="body2" color={'textSecondary'} fontSize={13}>
|
|
{l.title}
|
|
</Link>
|
|
</NextLink>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Drawer>
|
|
)
|
|
}
|