Skip to content

Commit 644e928

Browse files
lukebennett88lukebennett88
authored
Fix mobile menu for KeystarUI docs (#1472)
1 parent ce85ee3 commit 644e928

File tree

5 files changed

+54
-65
lines changed

5 files changed

+54
-65
lines changed

‎design-system/docs/app/(site)/layout.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export default async function RootLayout({
2828
}) {
2929
return (
3030
<NextRootProvider fontClassName={inter.variable}>
31-
<head>{nextRootScript}</head>
31+
<head>
32+
{nextRootScript}
33+
<style
34+
dangerouslySetInnerHTML={{
35+
__html: /* css */ `html, body { height: 100%; }`,
36+
}}
37+
/>
38+
</head>
3239
<body>
3340
<Layout navigation={await getNavigation()}>{children}</Layout>
3441
</body>

‎design-system/docs/components/content/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@ type ElementProps = HTMLAttributes<HTMLDivElement>;
5454

5555
const Content = (props: ElementProps) => {
5656
return (
57-
<Box
57+
<Flex
58+
direction="column"
5859
flex
5960
marginX="auto"
6061
marginTop={{ mobile: HEADER_HEIGHT, tablet: 'large' }}
@@ -63,6 +64,7 @@ const Content = (props: ElementProps) => {
6364
>
6465
{/* PROSE */}
6566
<Flex
67+
flex
6668
direction="column"
6769
gap="xlarge"
6870
// elementType="article"
@@ -75,7 +77,7 @@ const Content = (props: ElementProps) => {
7577
&copy; {new Date().getFullYear()} @jossmac
7678
</Text>
7779
</Box>
78-
</Box>
80+
</Flex>
7981
);
8082
};
8183

‎design-system/docs/components/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function Layout({
1616
return (
1717
<SidebarProvider>
1818
<Flex
19-
height="100vh"
19+
height="100%"
2020
// create a stacking context for app contents, ensuring portalled
2121
// dialogs etc. are always on top w/o z-index hacks
2222
UNSAFE_style={{ isolation: 'isolate' }}

‎design-system/docs/components/sidebar/sidebar.tsx‎

Lines changed: 40 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Fragment, useEffect } from 'react';
1+
import { useEffect } from 'react';
2+
import { usePathname } from 'next/navigation';
23

34
import { Button } from '@keystar/ui/button';
45
import { menuIcon } from '@keystar/ui/icon/icons/menuIcon';
@@ -15,67 +16,55 @@ import { ColorSchemeMenu } from '../theme-switcher';
1516

1617
/** Responsively render sidebar navigation items. */
1718
export const Sidebar = ({ items }: { items: SidebarItem[] }) => {
18-
// const [headerHeight, setHeaderHeight] = useState(NaN);
1919
const { sidebarIsOpen, closeSidebar, toggleSidebar } = useSidebarContext();
20+
const pathname = usePathname();
2021

2122
useEffect(() => {
22-
addEventListener('popstate', closeSidebar);
23-
return () => {
24-
removeEventListener('popstate', closeSidebar);
25-
};
26-
}, [closeSidebar]);
23+
// Close the sidebar when the pathname changes
24+
closeSidebar();
25+
}, [closeSidebar, pathname]);
2726

2827
return (
29-
<Fragment>
30-
<div
31-
data-open={sidebarIsOpen}
32-
className={css({
33-
backgroundColor: tokenSchema.color.background.canvas,
34-
display: 'flex',
35-
flexDirection: 'column',
36-
position: 'fixed',
37-
zIndex: 1,
28+
<div
29+
data-open={sidebarIsOpen}
30+
className={css({
31+
display: 'flex',
32+
flexDirection: 'column',
33+
position: 'fixed',
34+
width: '100%',
35+
zIndex: 1,
36+
'&[data-open=true]': {
37+
height: '100%',
38+
},
39+
[breakpointQueries.above.mobile]: {
40+
height: '100%',
41+
width: SIDEBAR_WIDTH,
42+
},
43+
})}
44+
>
45+
<SidebarHeader menuIsOpen={sidebarIsOpen} onMenuPress={toggleSidebar} />
3846

47+
<Box
48+
flex
49+
minHeight={0}
50+
backgroundColor="surface"
51+
borderTopEndRadius={{ tablet: 'medium' }}
52+
overflow="hidden auto"
53+
paddingBottom="xlarge"
54+
paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
55+
paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
56+
data-open={sidebarIsOpen}
57+
UNSAFE_className={css({
3958
[breakpointQueries.below.tablet]: {
40-
width: '100vw',
41-
'[data-open=true]': {
42-
height: '100%',
59+
'&[data-open=false]': {
60+
display: 'none',
4361
},
4462
},
45-
[breakpointQueries.above.mobile]: {
46-
height: '100%',
47-
width: SIDEBAR_WIDTH,
48-
},
4963
})}
5064
>
51-
<SidebarHeader
52-
menuIsOpen={sidebarIsOpen}
53-
onMenuPress={toggleSidebar}
54-
// onLayout={rect => setHeaderHeight(rect.height)}
55-
/>
56-
57-
<Box
58-
flex
59-
backgroundColor="surface"
60-
borderTopEndRadius={{ tablet: 'medium' }}
61-
overflow="hidden auto"
62-
paddingBottom="xlarge"
63-
paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
64-
paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
65-
data-open={sidebarIsOpen}
66-
UNSAFE_className={css({
67-
[breakpointQueries.below.tablet]: {
68-
'&[data-open=false]': {
69-
display: 'none',
70-
},
71-
},
72-
})}
73-
>
74-
<NavItems items={items} />
75-
</Box>
76-
</div>
77-
{/* <Box height={headerHeight} isHidden={{ above: 'mobile' }} /> */}
78-
</Fragment>
65+
<NavItems items={items} />
66+
</Box>
67+
</div>
7968
);
8069
};
8170

@@ -84,11 +73,9 @@ export const Sidebar = ({ items }: { items: SidebarItem[] }) => {
8473

8574
function SidebarHeader({
8675
menuIsOpen,
87-
// onLayout,
8876
onMenuPress,
8977
}: {
9078
menuIsOpen: boolean;
91-
// onLayout: (rect: DOMRect) => void;
9279
onMenuPress: () => void;
9380
}) {
9481
const menuLabel = 'Open navigation panel';

‎design-system/docs/next.config.mjs‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,10 @@ import withPreconstruct from '@preconstruct/next';
44
const nextConfig = {
55
eslint: { ignoreDuringBuilds: true },
66
typescript: { ignoreBuildErrors: true },
7+
serverExternalPackages: ['esbuild'],
78
experimental: {
8-
serverComponentsExternalPackages: ['esbuild'],
99
externalDir: true,
1010
},
11-
// reactStrictMode: true,
12-
// webpack: config => ({
13-
// ...config,
14-
// infrastructureLogging: {
15-
// level: 'error',
16-
// },
17-
// }),
1811
};
1912

2013
export default withPreconstruct(nextConfig);

0 commit comments

Comments
 (0)