A design system in a box.
hip-ui.tngl.io/docs/introduction
inconsequential sidebar
+365
-131
+4
-11
apps/docs/src/components/table-of-contents/index.tsx
+4
-11
apps/docs/src/components/table-of-contents/index.tsx
···
31
31
flexShrink: 0,
32
32
paddingBottom: spacing["20"],
33
33
paddingTop: spacing["12"],
34
-
},
35
-
sticky: {
36
-
position: "sticky",
37
-
height: "100vh",
38
-
marginTop: spacing["12"],
39
-
top: 0,
34
+
width: "240px",
40
35
},
41
36
itemList: {
42
37
margin: 0,
···
132
127
*/
133
128
export interface TableOfContentsProps extends StyleXComponentProps<{
134
129
toc: Toc;
135
-
}> {
136
-
sticky?: boolean;
137
-
}
130
+
}> {}
138
131
139
132
/**
140
133
* A table of contents component that displays a navigation tree based on document headings.
141
134
* Automatically highlights the currently visible heading using IntersectionObserver.
142
135
*/
143
-
export function TableOfContents({ toc, style, sticky }: TableOfContentsProps) {
136
+
export function TableOfContents({ toc, style }: TableOfContentsProps) {
144
137
const [activeHeaderId, setActiveHeaderId] = useState<string | null>(null);
145
138
146
139
useEffect(() => {
···
165
158
166
159
return (
167
160
<ActiveHeaderIdContext value={activeHeaderId}>
168
-
<nav {...stylex.props(styles.wrapper, sticky && styles.sticky, style)}>
161
+
<nav {...stylex.props(styles.wrapper, style)}>
169
162
<LevelContext value={1}>
170
163
<ul {...stylex.props(styles.itemList)}>
171
164
{toc.map((item) => (
+7
-10
apps/docs/src/components/typography/index.tsx
+7
-10
apps/docs/src/components/typography/index.tsx
···
105
105
whiteSpace: "nowrap",
106
106
},
107
107
linkedHeadingLink: {
108
-
color: "inherit",
109
108
textDecoration: "none",
109
+
color: "inherit",
110
110
},
111
111
linkedHeadingLinkButton: {
112
112
opacity: {
113
113
default: 0,
114
-
":is([data-heading-link]:hover *)": 1,
115
114
":is([data-focus-visible])": 1,
115
+
":is([data-heading-link]:hover *)": 1,
116
116
},
117
117
transitionDuration: animationDuration.fast,
118
118
transitionProperty: {
···
416
416
* The link allows users to jump to the heading, and the button copies the full URL
417
417
* with the anchor to the clipboard.
418
418
*/
419
-
export const LinkedHeading = ({
420
-
id,
421
-
children,
422
-
style,
423
-
}: LinkedHeadingProps) => {
419
+
export const LinkedHeading = ({ id, children, style }: LinkedHeadingProps) => {
424
420
if (!id) {
425
421
return <>{children}</>;
426
422
}
427
423
428
-
const url = typeof window !== "undefined"
429
-
? `${window.location.origin}${window.location.pathname}#${id}`
430
-
: `#${id}`;
424
+
const url =
425
+
globalThis.window === undefined
426
+
? `#${id}`
427
+
: `${globalThis.location.origin}${globalThis.location.pathname}#${id}`;
431
428
432
429
return (
433
430
<Flex
+17
-33
apps/docs/src/routes/docs.$.tsx
+17
-33
apps/docs/src/routes/docs.$.tsx
···
18
18
19
19
import * as stylex from "@stylexjs/stylex";
20
20
import { allDocs } from "content-collections";
21
-
import { Suspense } from "react";
22
21
import { modules, pages } from "virtual:content";
23
22
24
23
import { Flex } from "@/components/flex";
···
43
42
44
43
import { spacing } from "../components/theme/spacing.stylex";
45
44
import { Content } from "@/components/content";
46
-
import { containerBreakpoints } from "../components/theme/media-queries.stylex";
45
+
import { SidebarLayout } from "@/components/sidebar-layout";
47
46
48
47
const TypographyRouterLink = createLink(TypographyLink);
49
48
50
49
const styles = stylex.create({
51
-
root: {
52
-
width: "100%",
53
-
gap: {
54
-
default: spacing["4"],
55
-
[containerBreakpoints.lg]: spacing["8"],
56
-
},
57
-
display: "grid",
58
-
gridTemplateColumns: {
59
-
default: "minmax(0, 1fr)",
60
-
[containerBreakpoints.lg]: "minmax(0, 1fr) 240px",
61
-
},
62
-
},
63
50
header: {
64
51
marginBottom: spacing["12"],
65
-
},
66
-
tableOfContents: {
67
-
display: {
68
-
default: "none",
69
-
[containerBreakpoints.lg]: "block",
70
-
},
71
52
},
72
53
});
73
54
···
170
151
}
171
152
172
153
return (
173
-
<div {...stylex.props(styles.root)}>
174
-
<Content>
175
-
<Flex direction="column" gap="4" style={styles.header}>
176
-
<Heading1>{doc.title}</Heading1>
177
-
<Text size="xl" variant="secondary">
178
-
{doc.description}
179
-
</Text>
180
-
</Flex>
181
-
<Suspense fallback={<div>Loading...</div>}>
154
+
<>
155
+
<SidebarLayout.Page>
156
+
<Content>
157
+
<Flex direction="column" gap="4" style={styles.header}>
158
+
<Heading1>{doc.title}</Heading1>
159
+
<Text size="xl" variant="secondary">
160
+
{doc.description}
161
+
</Text>
162
+
</Flex>
182
163
<Page components={components} />
183
-
</Suspense>
184
-
</Content>
164
+
</Content>
165
+
</SidebarLayout.Page>
166
+
185
167
{toc && (
186
-
<TableOfContents toc={toc} style={styles.tableOfContents} sticky />
168
+
<SidebarLayout.InconsequentialSidebar visible="md">
169
+
<TableOfContents toc={toc} />
170
+
</SidebarLayout.InconsequentialSidebar>
187
171
)}
188
-
</div>
172
+
</>
189
173
);
190
174
}
+3
-5
apps/docs/src/routes/docs.tsx
+3
-5
apps/docs/src/routes/docs.tsx
···
225
225
function RouteComponent() {
226
226
return (
227
227
<SidebarLayout.Root>
228
-
<SidebarLayout.Sidebar>
228
+
<SidebarLayout.NavigationSidebar>
229
229
<DocSidebar />
230
-
</SidebarLayout.Sidebar>
231
-
<SidebarLayout.Page>
232
-
<Outlet />
233
-
</SidebarLayout.Page>
230
+
</SidebarLayout.NavigationSidebar>
231
+
<Outlet />
234
232
</SidebarLayout.Root>
235
233
);
236
234
}
+4
-11
packages/hip-ui/src/components/table-of-contents/index.tsx
+4
-11
packages/hip-ui/src/components/table-of-contents/index.tsx
···
31
31
flexShrink: 0,
32
32
paddingBottom: spacing["20"],
33
33
paddingTop: spacing["12"],
34
-
},
35
-
sticky: {
36
-
position: "sticky",
37
-
height: "100vh",
38
-
marginTop: spacing["12"],
39
-
top: 0,
34
+
width: "240px",
40
35
},
41
36
itemList: {
42
37
margin: 0,
···
132
127
*/
133
128
export interface TableOfContentsProps extends StyleXComponentProps<{
134
129
toc: Toc;
135
-
}> {
136
-
sticky?: boolean;
137
-
}
130
+
}> {}
138
131
139
132
/**
140
133
* A table of contents component that displays a navigation tree based on document headings.
141
134
* Automatically highlights the currently visible heading using IntersectionObserver.
142
135
*/
143
-
export function TableOfContents({ toc, style, sticky }: TableOfContentsProps) {
136
+
export function TableOfContents({ toc, style }: TableOfContentsProps) {
144
137
const [activeHeaderId, setActiveHeaderId] = useState<string | null>(null);
145
138
146
139
useEffect(() => {
···
165
158
166
159
return (
167
160
<ActiveHeaderIdContext value={activeHeaderId}>
168
-
<nav {...stylex.props(styles.wrapper, sticky && styles.sticky, style)}>
161
+
<nav {...stylex.props(styles.wrapper, style)}>
169
162
<LevelContext value={1}>
170
163
<ul {...stylex.props(styles.itemList)}>
171
164
{toc.map((item) => (