Skip to content

Commit 0741ff0

Browse files
Studio384Studio384
committed
Update sidebar navigation
1 parent 55d3672 commit 0741ff0

File tree

3 files changed

+46
-60
lines changed

3 files changed

+46
-60
lines changed

‎docs/src/app/Docs/Navigation.tsx‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { Fragment } from 'react';
22
import { NavLink, useLocation } from 'react-router';
33

4-
import { List, ListItem, ListItemButton, ListItemContent, ListSubheader, Typography } from '@mui/joy';
5-
64
import Amicon, {
75
aiAmicons,
86
aiArrowRotateRight,
@@ -14,6 +12,7 @@ import Amicon, {
1412
aiSpinner,
1513
aiStar
1614
} from '@studio384/amicons';
15+
import clsx from 'clsx';
1716

1817
export default function DocsNavigation() {
1918
const location = useLocation();
@@ -80,35 +79,31 @@ export default function DocsNavigation() {
8079
];
8180

8281
return (
83-
<List
84-
sx={{
85-
p: 0,
86-
gap: 0.25,
87-
'--ListItem-paddingY': 0,
88-
'--ListItem-radius': 'var(--joy-radius-md)',
89-
'--ListItem-paddingLeft': '.5rem',
90-
'--ListItem-paddingRight': '.5rem',
91-
'--ListItemDecorator-size': '1.5rem'
92-
}}
93-
>
82+
<>
9483
{pages.map((category, key) => (
9584
<Fragment key={key}>
96-
<ListSubheader sx={{ '&:not(:first-child)': { mt: 2 } }}>
97-
<Typography level="title-sm" textTransform="none" letterSpacing="initial" fontSize="md" startDecorator={<Amicon icon={category.icon} />}>
98-
{category.title}
99-
</Typography>
100-
</ListSubheader>
101-
{category.pages.map((page) => (
102-
<ListItem key={page.link}>
103-
<ListItemButton component={NavLink} to={page.link} color="primary" selected={location.pathname.includes(page.link)}>
104-
<ListItemContent>
105-
<Typography noWrap>{page.title}</Typography>
106-
</ListItemContent>
107-
</ListItemButton>
108-
</ListItem>
109-
))}
85+
<h3 className="font-display text-md mb-2 flex items-center gap-2 px-2.5 font-medium not-first:mt-4">
86+
<Amicon icon={category.icon} /> <span>{category.title}</span>
87+
</h3>
88+
<div className="flex flex-col gap-0.5">
89+
{category.pages.map((page) => (
90+
<NavLink
91+
key={page.link}
92+
to={page.link}
93+
data-selected={location.pathname.includes(page.link) || undefined}
94+
className={clsx(
95+
'group flex h-8 items-center gap-2 rounded-sm px-2.5 text-start text-sm hover:cursor-pointer hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500 data-selected:focus-visible:outline-indigo-700',
96+
{
97+
'bg-indigo-500 text-white hover:bg-indigo-600': location.pathname.includes(page.link)
98+
}
99+
)}
100+
>
101+
<span className="truncate group-data-noicons:opacity-50">{page.title}</span>
102+
</NavLink>
103+
))}
104+
</div>
110105
</Fragment>
111106
))}
112-
</List>
107+
</>
113108
);
114109
}

‎docs/src/app/Icons.tsx‎

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback, useMemo } from 'react';
22
import { useSearchParams } from 'react-router';
33

4-
import { Box, Chip, ChipDelete, IconButton, Input, List, ListItem, ListItemButton, ListItemContent, ListItemDecorator, Stack, Typography } from '@mui/joy';
4+
import { Box, Chip, ChipDelete, IconButton, Input, Stack, Typography } from '@mui/joy';
55

66
import categories from '@/data/categories';
77
import icons from '@/data/icons';
@@ -10,6 +10,7 @@ import useSearch from '@/hooks/useSearch';
1010
import { ILibraryIcon } from '@/types';
1111

1212
import Amicon, { aiFilterXmark, aiMagnifyingGlass } from '@studio384/amicons';
13+
import clsx from 'clsx';
1314

1415
import IconCard from './Components/IconCard';
1516
import Pagination from './Components/Pagination';
@@ -99,40 +100,30 @@ export default function Icons() {
99100
}}
100101
>
101102
<Box sx={{ position: 'sticky', top: 58 + 16, overflow: 'auto', maxHeight: 'calc(100dvh - 58px - 16px)', alignSelf: 'flex-start' }}>
102-
<List
103-
sx={{
104-
p: 0,
105-
my: 2,
106-
gap: 0.25,
107-
'--ListItem-paddingY': 0,
108-
'--ListItem-radius': 'var(--joy-radius-md)',
109-
'--ListItem-paddingLeft': '.5rem',
110-
'--ListItem-paddingRight': '.5rem',
111-
'--ListItemDecorator-size': '1.5rem'
112-
}}
113-
>
103+
<div className="flex flex-col gap-0.5">
114104
{categories.map((_category) => {
115105
const categoryIcons = searchableList.filter((icon) => icon.categories.includes(_category.slug as never));
116106

117107
return (
118-
<ListItem key={_category.slug}>
119-
<ListItemButton onClick={() => setSearchQuery('c', _category.slug)} selected={searchCategories.includes(_category.slug)} color="primary">
120-
<ListItemDecorator sx={{ opacity: categoryIcons.length === 0 ? 0.5 : 1 }}>
121-
<Amicon icon={_category.icon} />
122-
</ListItemDecorator>
123-
<ListItemContent>
124-
<Typography noWrap sx={{ opacity: categoryIcons.length === 0 ? 0.5 : 1 }}>
125-
{_category.title}
126-
</Typography>
127-
</ListItemContent>
128-
<ListItemContent sx={{ fontFamily: 'display', textAlign: 'right', opacity: categoryIcons.length === 0 ? 0.5 : 1 }}>
129-
{categoryIcons.length}
130-
</ListItemContent>
131-
</ListItemButton>
132-
</ListItem>
108+
<button
109+
key={_category.slug}
110+
onClick={() => setSearchQuery('c', _category.slug)}
111+
data-selected={searchCategories.includes(_category.slug) || undefined}
112+
data-noicons={categoryIcons.length === 0 ? true : undefined}
113+
className={clsx(
114+
'group grid h-8 grid-cols-[min-content_auto_min-content] items-center gap-2 rounded-sm px-2.5 text-start text-sm hover:cursor-pointer hover:bg-indigo-200 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500 data-selected:focus-visible:outline-indigo-700',
115+
{
116+
'bg-indigo-500 text-white hover:bg-indigo-600': searchCategories.includes(_category.slug)
117+
}
118+
)}
119+
>
120+
<Amicon icon={_category.icon} className="text-indigo-600 group-data-noicons:opacity-50 group-data-selected:text-white" />
121+
<span className="truncate group-data-noicons:opacity-50">{_category.title}</span>
122+
<span className="font-display text-indigo-600 group-data-noicons:opacity-50 group-data-selected:text-white">{categoryIcons.length}</span>
123+
</button>
133124
);
134125
})}
135-
</List>
126+
</div>
136127
</Box>
137128
<Stack gap={2} sx={{ my: 2 }}>
138129
<Stack direction="row" gap={1} justifyContent="space-between" alignItems="center">

‎docs/src/design/layout/LayoutElements/Navbar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function Navbar() {
3333
className={clsx(
3434
'font-display flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500',
3535
{
36-
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-600': location?.pathname === '/' || location?.pathname?.startsWith('/icons')
36+
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-700': location?.pathname === '/' || location?.pathname?.startsWith('/icons')
3737
}
3838
)}
3939
>
@@ -47,7 +47,7 @@ export default function Navbar() {
4747
className={clsx(
4848
'font-display flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500',
4949
{
50-
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-600': location?.pathname?.startsWith('/docs')
50+
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-700': location?.pathname?.startsWith('/docs')
5151
}
5252
)}
5353
>
@@ -61,7 +61,7 @@ export default function Navbar() {
6161
className={clsx(
6262
'font-display flex h-8 items-center justify-center rounded-sm px-2.5 text-sm font-medium text-white hover:bg-indigo-500 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-500',
6363
{
64-
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-600': location?.pathname?.startsWith('/changelog')
64+
'bg-indigo-500 hover:bg-indigo-600 focus-visible:outline-indigo-700': location?.pathname?.startsWith('/changelog')
6565
}
6666
)}
6767
>

0 commit comments

Comments
 (0)