Skip to content

Commit a481f3e

Browse files
grahamcgrahamc
committed
Add a Navigation component that auto-hides and stuff
1 parent 324f3cc commit a481f3e

File tree

4 files changed

+270
-0
lines changed

4 files changed

+270
-0
lines changed

‎src/Navigation/Navigation.stories.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import type { Meta, StoryObj } from "@storybook/react-vite";
2+
3+
import Navigation from ".";
4+
import { Placeholder } from "../Placeholder";
5+
import Header from "../Header";
6+
import ColorSchemeToggle from "../ColorSchemeToggle";
7+
8+
const meta = {
9+
title: "Molecules/Navigation",
10+
component: Navigation,
11+
argTypes: {
12+
initialState: {
13+
options: ["open", "closed"],
14+
},
15+
},
16+
} satisfies Meta<typeof Navigation>;
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Default: Story = {
22+
args: {
23+
initialState: undefined,
24+
},
25+
render: ({ initialState }) => (
26+
<>
27+
<div
28+
style={{
29+
height: "300px",
30+
width: "500px",
31+
border: "1px solid black",
32+
display: "flex",
33+
justifyContent: "end",
34+
}}
35+
>
36+
<div>
37+
<div>
38+
<Navigation initialState={initialState}>
39+
<Navigation.Element>
40+
<Placeholder height="100%" label="Primary Element" />
41+
</Navigation.Element>
42+
43+
<Navigation.Element>
44+
<Placeholder height="100%" label="Navigation Link" />
45+
</Navigation.Element>
46+
</Navigation>
47+
</div>
48+
</div>
49+
</div>
50+
</>
51+
),
52+
};
53+
54+
export const InHeader: Story = {
55+
args: {
56+
initialState: undefined,
57+
},
58+
render: ({ initialState }) => (
59+
<Header
60+
logo={<Placeholder height="100%" label="DetSys Logo" />}
61+
elements={[
62+
<ColorSchemeToggle key="color-scheme-toggle" />,
63+
<Navigation key="nav" initialState={initialState}>
64+
<Navigation.Element>
65+
<Placeholder height="100%" label="Lorem" />
66+
</Navigation.Element>
67+
68+
<Navigation.Element>
69+
<Placeholder height="100%" label="Ipsum" />
70+
</Navigation.Element>
71+
</Navigation>,
72+
]}
73+
/>
74+
),
75+
};
76+
77+
export const DefaultOpen: Story = {
78+
args: {
79+
initialState: "open",
80+
},
81+
render: ({ initialState }) => (
82+
<>
83+
<div
84+
style={{
85+
height: "300px",
86+
width: "500px",
87+
border: "1px solid black",
88+
display: "flex",
89+
justifyContent: "end",
90+
}}
91+
>
92+
<div>
93+
<div>
94+
<Navigation initialState={initialState}>
95+
<Navigation.Element>
96+
<Placeholder height="100%" label="Primary Element" />
97+
</Navigation.Element>
98+
99+
<Navigation.Element>
100+
<Placeholder height="100%" label="Navigation Link" />
101+
</Navigation.Element>
102+
</Navigation>
103+
</div>
104+
</div>
105+
</div>
106+
</>
107+
),
108+
};
109+
110+
export const InHeaderOpen: Story = {
111+
args: {
112+
initialState: "open",
113+
},
114+
render: ({ initialState }) => (
115+
<Header
116+
logo={<Placeholder height="100%" label="DetSys Logo" />}
117+
elements={[
118+
<ColorSchemeToggle key="color-scheme-toggle" />,
119+
<Navigation key="nav" initialState={initialState}>
120+
<Navigation.Element>
121+
<Placeholder height="100%" label="Lorem" />
122+
</Navigation.Element>
123+
124+
<Navigation.Element>
125+
<Placeholder height="100%" label="Ipsum" />
126+
</Navigation.Element>
127+
</Navigation>,
128+
]}
129+
/>
130+
),
131+
};

‎src/Navigation/index.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@use "sass:map";
2+
3+
@use "../sass/mixins";
4+
@use "../sass/tokens";
5+
@use "../sass/functions";
6+
7+
@media screen and (width >= 1024px) {
8+
.navigation {
9+
height: 24px; // Matches the svg-icon height used by the expander in closed mode
10+
padding: 4px; // Matches the svg-icon height used by the expander in closed mode
11+
.navigation__expand {
12+
display: none;
13+
}
14+
15+
.navigation__elements {
16+
height: 24px;
17+
display: flex;
18+
flex-direction: row;
19+
gap: 1em;
20+
}
21+
}
22+
}
23+
24+
@media screen and (width < 1024px) {
25+
.navigation--closed .navigation__elements {
26+
visibility: hidden;
27+
}
28+
.navigation--open .navigation__elements {
29+
visibility: visible;
30+
}
31+
32+
.navigation {
33+
position: relative;
34+
35+
.navigation__expand {
36+
@include mixins.svg-button;
37+
}
38+
39+
.navigation__elements {
40+
display: flex;
41+
flex-direction: column;
42+
gap: 1em;
43+
44+
max-width: 100vu;
45+
46+
position: absolute;
47+
transform-origin: 100% 0;
48+
z-index: 10;
49+
right: 0;
50+
51+
margin-top: 0.5em;
52+
53+
@include mixins.pad(base);
54+
@include mixins.border(base);
55+
56+
background-color: map.get(tokens.$brand, gray);
57+
@include mixins.light-mode {
58+
background-color: map.get(tokens.$brand, light);
59+
}
60+
}
61+
62+
.navigation__element {
63+
width: 320px;
64+
65+
@media screen and (width < 650px) {
66+
width: 268px;
67+
}
68+
}
69+
}
70+
}

‎src/Navigation/index.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { useState, type FC } from "react";
2+
3+
import "./index.scss";
4+
import React from "react";
5+
import clsx from "clsx";
6+
import { Bars3Icon } from "@heroicons/react/24/outline";
7+
8+
export interface NavigationProps {
9+
initialState?: "open" | "closed";
10+
}
11+
12+
const Root: FC<React.PropsWithChildren<NavigationProps>> = ({
13+
children,
14+
initialState = "closed",
15+
}) => {
16+
let elements: React.ReactElement[] = [];
17+
18+
const [menuState, setMenuState] = useState<boolean>(initialState == "open");
19+
20+
React.Children.forEach(children, (child) => {
21+
if (!React.isValidElement(child)) return;
22+
if (child.type === Navigation.Element) {
23+
elements.push(child);
24+
} else {
25+
console.log("Dropping unknown children of Header.");
26+
}
27+
});
28+
29+
const toggleNavigation = () => {
30+
setMenuState(!menuState);
31+
};
32+
33+
return (
34+
<div
35+
className={clsx(
36+
"navigation",
37+
menuState ? "navigation--open" : "navigation--closed",
38+
)}
39+
>
40+
<button
41+
className="navigation__expand"
42+
aria-label="Open navigation"
43+
onClick={toggleNavigation}
44+
>
45+
<Bars3Icon />
46+
</button>
47+
<div className="navigation__elements">{elements}</div>
48+
</div>
49+
);
50+
};
51+
52+
export interface NavigationElementProps {}
53+
const Element: FC<React.PropsWithChildren<NavigationElementProps>> = ({
54+
children,
55+
}) => {
56+
return <div className="navigation__element">{children}</div>;
57+
};
58+
59+
const Navigation = Object.assign(Root, {
60+
Element,
61+
});
62+
63+
export default Navigation;

‎src/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,9 @@ export {
7474
} from "./LabeledTextInput";
7575

7676
export { type PageLayoutProps, default as PageLayout } from "./PageLayout";
77+
78+
export {
79+
type NavigationProps,
80+
type NavigationElementProps,
81+
default as Navigation,
82+
} from "./Navigation";

0 commit comments

Comments
 (0)