Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f0b1fee

Browse files
fuma-namafuma-nama
committed
UI: Improve layout component customisation experience
1 parent 6c10c92 commit f0b1fee

File tree

3 files changed

+82
-80
lines changed

3 files changed

+82
-80
lines changed

‎.changeset/loud-readers-matter.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'fumadocs-ui': patch
3+
---
4+
5+
Improve layout component customisation experience by handling RWD automatically

‎packages/ui/src/layouts/docs.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -118,25 +118,26 @@ export function DocsLayout({
118118

119119
const mobile = (
120120
<SidebarContentMobile {...rest}>
121-
<HideIfEmpty as={SidebarHeader}>
122-
<div className="flex text-fd-muted-foreground items-center justify-end empty:hidden">
123-
{iconLinks.map((item, i) => (
124-
<BaseLinkItem
125-
key={i}
126-
item={item}
127-
className={cn(
128-
buttonVariants({
129-
size: 'icon-sm',
130-
color: 'ghost',
131-
className: 'p-2',
132-
}),
133-
i === iconLinks.length - 1 && 'me-auto',
134-
)}
135-
aria-label={item.label}
136-
>
137-
{item.icon}
138-
</BaseLinkItem>
139-
))}
121+
<SidebarHeader>
122+
<div className="flex text-fd-muted-foreground items-center gap-1.5">
123+
<div className="flex flex-1">
124+
{iconLinks.map((item, i) => (
125+
<BaseLinkItem
126+
key={i}
127+
item={item}
128+
className={cn(
129+
buttonVariants({
130+
size: 'icon-sm',
131+
color: 'ghost',
132+
className: 'p-2',
133+
}),
134+
)}
135+
aria-label={item.label}
136+
>
137+
{item.icon}
138+
</BaseLinkItem>
139+
))}
140+
</div>
140141
{i18n ? (
141142
<LanguageToggle>
142143
<Languages className="size-4.5" />
@@ -145,14 +146,14 @@ export function DocsLayout({
145146
) : null}
146147
{themeSwitch.enabled !== false &&
147148
(themeSwitch.component ?? (
148-
<ThemeToggle className="p-0 ms-1.5" mode={themeSwitch.mode} />
149+
<ThemeToggle className="p-0" mode={themeSwitch.mode} />
149150
))}
150151
<SidebarTrigger
151152
className={cn(
152153
buttonVariants({
153154
color: 'ghost',
154155
size: 'icon-sm',
155-
className: 'p-2 ms-1.5',
156+
className: 'p-2',
156157
}),
157158
)}
158159
>
@@ -161,7 +162,7 @@ export function DocsLayout({
161162
</div>
162163
{tabs.length > 0 && <RootToggle options={tabs} />}
163164
{banner}
164-
</HideIfEmpty>
165+
</SidebarHeader>
165166
{viewport}
166167
<SidebarFooter className="empty:hidden">{footer}</SidebarFooter>
167168
</SidebarContentMobile>
@@ -223,7 +224,7 @@ export function DocsLayout({
223224
) : null}
224225
{themeSwitch.enabled !== false &&
225226
(themeSwitch.component ?? (
226-
<ThemeToggle className="p-0 ms-1.5" mode={themeSwitch.mode} />
227+
<ThemeToggle className="p-0" mode={themeSwitch.mode} />
227228
))}
228229
</div>
229230
{footer}

‎packages/ui/src/layouts/notebook.tsx‎

Lines changed: 53 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -282,53 +282,46 @@ function DocsNavbar({
282282
tabs,
283283
searchToggle = {},
284284
themeSwitch = {},
285+
nav = {},
285286
...props
286287
}: DocsLayoutProps & {
287288
links: LinkItemType[];
288289
tabs: Option[];
289290
}) {
290-
const navMode = props.nav?.mode ?? 'auto';
291+
const navMode = nav.mode ?? 'auto';
291292
const sidebarCollapsible = props.sidebar?.collapsible ?? true;
292-
const nav = (
293-
<Link
294-
href={props.nav?.url ?? '/'}
295-
className={cn(
296-
'inline-flex items-center gap-2.5 font-semibold empty:hidden',
297-
navMode === 'auto' && 'md:hidden',
298-
)}
299-
>
300-
{props.nav?.title}
301-
</Link>
302-
);
303293

304294
return (
305295
<Navbar mode={navMode}>
306296
<div
307297
className={cn(
308-
'flex border-b px-4 flex-1',
298+
'flex border-b px-2.5 gap-2 flex-1 md:px-4',
309299
navMode === 'auto' && 'md:px-6',
310300
)}
311301
>
312-
<div
313-
className={cn(
314-
'flex flex-row items-center',
315-
navMode === 'top' && 'flex-1 pe-4',
316-
)}
317-
>
318-
{sidebarCollapsible && navMode === 'auto' ? (
302+
<div className={cn('flex items-center', navMode === 'top' && 'flex-1')}>
303+
{sidebarCollapsible && navMode === 'auto' && (
319304
<SidebarCollapseTrigger
320305
className={cn(
321306
buttonVariants({
322307
color: 'ghost',
323308
size: 'icon-sm',
324309
}),
325-
'text-fd-muted-foreground -ms-1.5 me-2 data-[collapsed=false]:hidden max-md:hidden',
310+
'text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden',
326311
)}
327312
>
328313
<SidebarIcon />
329314
</SidebarCollapseTrigger>
330-
) : null}
331-
{nav}
315+
)}
316+
<Link
317+
href={nav.url ?? '/'}
318+
className={cn(
319+
'inline-flex items-center gap-2.5 font-semibold empty:hidden',
320+
navMode === 'auto' && 'md:hidden',
321+
)}
322+
>
323+
{nav.title}
324+
</Link>
332325
</div>
333326
{searchToggle.enabled !== false &&
334327
(searchToggle.components?.lg ? (
@@ -338,7 +331,7 @@ function DocsNavbar({
338331
navMode === 'top' ? 'rounded-xl max-w-sm' : 'max-w-[240px]',
339332
)}
340333
>
341-
{searchToggle.components?.lg}
334+
{searchToggle.components.lg}
342335
</div>
343336
) : (
344337
<LargeSearchToggle
@@ -351,8 +344,8 @@ function DocsNavbar({
351344
)}
352345
/>
353346
))}
354-
<div className="flex flex-1 flex-row items-center justify-end">
355-
<div className="flex flex-row items-center gap-6 px-4 empty:hidden max-lg:hidden">
347+
<div className="flex flex-1 items-center justify-end md:gap-2">
348+
<div className="flex items-center gap-6 empty:hidden max-lg:hidden">
356349
{links
357350
.filter((item) => item.type !== 'icon')
358351
.map((item, i) => (
@@ -363,12 +356,7 @@ function DocsNavbar({
363356
/>
364357
))}
365358
</div>
366-
{props.nav?.children}
367-
{searchToggle.enabled !== false &&
368-
(searchToggle.components?.sm ?? (
369-
<SearchToggle hideIfDisabled className="p-2 md:hidden" />
370-
))}
371-
<NavbarSidebarTrigger className="p-2 -me-1.5 md:hidden" />
359+
{nav.children}
372360
{links
373361
.filter((item) => item.type === 'icon')
374362
.map((item, i) => (
@@ -384,31 +372,39 @@ function DocsNavbar({
384372
{item.icon}
385373
</BaseLinkItem>
386374
))}
387-
{props.i18n ? (
388-
<LanguageToggle className="max-md:hidden">
389-
<Languages className="size-4.5 text-fd-muted-foreground" />
390-
</LanguageToggle>
391-
) : null}
392-
{themeSwitch.enabled !== false &&
393-
(themeSwitch.component ?? (
394-
<ThemeToggle
395-
className="ms-2 max-md:hidden"
396-
mode={themeSwitch.mode ?? 'light-dark-system'}
397-
/>
398-
))}
399-
{sidebarCollapsible && navMode === 'top' ? (
400-
<SidebarCollapseTrigger
401-
className={cn(
402-
buttonVariants({
403-
color: 'secondary',
404-
size: 'icon-sm',
405-
}),
406-
'ms-2 text-fd-muted-foreground rounded-full max-md:hidden',
407-
)}
408-
>
409-
<SidebarIcon />
410-
</SidebarCollapseTrigger>
411-
) : null}
375+
376+
<div className="flex items-center md:hidden">
377+
{searchToggle.enabled !== false &&
378+
(searchToggle.components?.sm ?? (
379+
<SearchToggle hideIfDisabled className="p-2" />
380+
))}
381+
<NavbarSidebarTrigger className="p-2" />
382+
</div>
383+
384+
<div className="flex items-center gap-2 max-md:hidden">
385+
{props.i18n ? (
386+
<LanguageToggle>
387+
<Languages className="size-4.5 text-fd-muted-foreground" />
388+
</LanguageToggle>
389+
) : null}
390+
{themeSwitch.enabled !== false &&
391+
(themeSwitch.component ?? (
392+
<ThemeToggle mode={themeSwitch.mode ?? 'light-dark-system'} />
393+
))}
394+
{sidebarCollapsible && navMode === 'top' && (
395+
<SidebarCollapseTrigger
396+
className={cn(
397+
buttonVariants({
398+
color: 'secondary',
399+
size: 'icon-sm',
400+
}),
401+
'text-fd-muted-foreground rounded-full',
402+
)}
403+
>
404+
<SidebarIcon />
405+
</SidebarCollapseTrigger>
406+
)}
407+
</div>
412408
</div>
413409
</div>
414410
{tabs.length > 0 && (

0 commit comments

Comments
 (0)