Skip to content

Fix mobile menu for KeystarUI docs #1472

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emmatown merged 1 commit into from
Dec 15, 2025
Merged

Fix mobile menu for KeystarUI docs #1472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion design-system/docs/app/(site)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,14 @@ export default async function RootLayout({
}) {
return (
<NextRootProvider fontClassName={inter.variable}>
<head>{nextRootScript}</head>
<head>
{nextRootScript}
<style
dangerouslySetInnerHTML={{
__html: /* css */ `html, body { height: 100%; }`,
Copy link
Contributor Author

@lukebennett88 lukebennett88 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is so the main content takes up available space so we can push the footer to the bottom of the page without having to rely on viewport units

Before After
before after

}}
/>
</head>
<body>
<Layout navigation={await getNavigation()}>{children}</Layout>
</body>
Expand Down
6 changes: 4 additions & 2 deletions design-system/docs/components/content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ type ElementProps = HTMLAttributes<HTMLDivElement>;

const Content = (props: ElementProps) => {
return (
<Box
<Flex
direction="column"
flex
marginX="auto"
marginTop={{ mobile: HEADER_HEIGHT, tablet: 'large' }}
Expand All @@ -63,6 +64,7 @@ const Content = (props: ElementProps) => {
>
{/* PROSE */}
<Flex
flex
direction="column"
gap="xlarge"
// elementType="article"
Expand All @@ -75,7 +77,7 @@ const Content = (props: ElementProps) => {
&copy; {new Date().getFullYear()} @jossmac
</Text>
</Box>
</Box>
</Flex>
);
};

Expand Down
2 changes: 1 addition & 1 deletion design-system/docs/components/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function Layout({
return (
<SidebarProvider>
<Flex
height="100vh"
height="100%"
// create a stacking context for app contents, ensuring portalled
// dialogs etc. are always on top w/o z-index hacks
UNSAFE_style={{ isolation: 'isolate' }}
Expand Down
93 changes: 40 additions & 53 deletions design-system/docs/components/sidebar/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Fragment, useEffect } from 'react';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

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

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

useEffect(() => {
addEventListener('popstate', closeSidebar);
Copy link
Contributor Author

@lukebennett88 lukebennett88 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This wasn't working to close the menu

Current experience:
https://github.com/user-attachments/assets/befa47e4-bfa5-42ef-a220-c5466045c36b

New experience:
https://github.com/user-attachments/assets/7b6bc1f6-da71-4499-892f-2b6615787b04

return () => {
removeEventListener('popstate', closeSidebar);
};
}, [closeSidebar]);
// Close the sidebar when the pathname changes
closeSidebar();
}, [closeSidebar, pathname]);

return (
<Fragment>
<div
data-open={sidebarIsOpen}
className={css({
backgroundColor: tokenSchema.color.background.canvas,
display: 'flex',
flexDirection: 'column',
position: 'fixed',
zIndex: 1,
<div
data-open={sidebarIsOpen}
className={css({
display: 'flex',
flexDirection: 'column',
position: 'fixed',
width: '100%',
zIndex: 1,
'&[data-open=true]': {
height: '100%',
},
[breakpointQueries.above.mobile]: {
height: '100%',
width: SIDEBAR_WIDTH,
},
})}
>
<SidebarHeader menuIsOpen={sidebarIsOpen} onMenuPress={toggleSidebar} />

<Box
flex
minHeight={0}
backgroundColor="surface"
borderTopEndRadius={{ tablet: 'medium' }}
overflow="hidden auto"
paddingBottom="xlarge"
paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
data-open={sidebarIsOpen}
UNSAFE_className={css({
[breakpointQueries.below.tablet]: {
width: '100vw',
'[data-open=true]': {
height: '100%',
'&[data-open=false]': {
display: 'none',
},
},
[breakpointQueries.above.mobile]: {
height: '100%',
width: SIDEBAR_WIDTH,
},
})}
>
<SidebarHeader
menuIsOpen={sidebarIsOpen}
onMenuPress={toggleSidebar}
// onLayout={rect => setHeaderHeight(rect.height)}
/>

<Box
flex
backgroundColor="surface"
borderTopEndRadius={{ tablet: 'medium' }}
overflow="hidden auto"
paddingBottom="xlarge"
paddingTop={{ mobile: 'large', tablet: 'xlarge' }}
paddingEnd={{ mobile: 'large', tablet: 'xlarge' }}
data-open={sidebarIsOpen}
UNSAFE_className={css({
[breakpointQueries.below.tablet]: {
'&[data-open=false]': {
display: 'none',
},
},
})}
>
<NavItems items={items} />
</Box>
</div>
{/* <Box height={headerHeight} isHidden={{ above: 'mobile' }} /> */}
</Fragment>
<NavItems items={items} />
</Box>
</div>
);
};

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

function SidebarHeader({
menuIsOpen,
// onLayout,
onMenuPress,
}: {
menuIsOpen: boolean;
// onLayout: (rect: DOMRect) => void;
onMenuPress: () => void;
}) {
const menuLabel = 'Open navigation panel';
Expand Down
9 changes: 1 addition & 8 deletions design-system/docs/next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,10 @@ import withPreconstruct from '@preconstruct/next';
const nextConfig = {
eslint: { ignoreDuringBuilds: true },
typescript: { ignoreBuildErrors: true },
serverExternalPackages: ['esbuild'],
experimental: {
Copy link
Contributor Author

@lukebennett88 lukebennett88 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated, but Next.js was complaining about this experimental flag being deprecated and to use serverExternalPackages instead.

serverComponentsExternalPackages: ['esbuild'],
externalDir: true,
},
// reactStrictMode: true,
// webpack: config => ({
// ...config,
// infrastructureLogging: {
// level: 'error',
// },
// }),
};

export default withPreconstruct(nextConfig);