Skip to content

Commit 5ce5cb1

Browse files
duanwilliamduanwilliam
authored
Merge pull request #14 from acmucsd/website-fixes
fix(website): fix issues with desktop layout when no sidebar or toc present
2 parents 3bd5c59 + 900c50e commit 5ce5cb1

File tree

14 files changed

+121
-46
lines changed

14 files changed

+121
-46
lines changed

‎website/src/layout/components/ContentContainer/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import c from "clsx";
2+
3+
import { usePageContext } from "@/layout/context/Page";
4+
15
import s from "./styles.module.scss";
26

37
import type { ReactNode } from "react";
@@ -7,8 +11,10 @@ interface ContentContainerProps {
711
}
812

913
export default function ContentContainer ({ children }: ContentContainerProps) {
14+
const { toc } = usePageContext()
15+
1016
return (
11-
<div className={s.contentContainer}>
17+
<div className={c(s.contentContainer, !!toc && s.tocExists)}>
1218
{children}
1319
</div>
1420
)

‎website/src/layout/components/ContentContainer/styles.module.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ $toc-width: toc.$desktop-toc-width;
1414
max-width: 1200px; // TODO: pick less arbitrary value
1515

1616
@include mixins.desktop {
17-
width: calc(100% - #{$toc-width});
17+
&.tocExists {
18+
width: calc(100% - #{$toc-width});
19+
}
1820
}
1921
}

‎website/src/layout/components/ContentContainer/styles.module.scss.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
declare namespace StylesModuleScssNamespace {
33
export interface IStylesModuleScss {
44
contentContainer: string;
5+
tocExists: string;
56
}
67
}
78

‎website/src/layout/components/ContentWrapper/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import c from "clsx";
2+
3+
import { usePageContext } from "@/layout/context/Page";
4+
15
import s from "./styles.module.scss";
26

37
import type { ReactNode } from "react";
@@ -7,8 +11,10 @@ interface ContentWrapperProps {
711
}
812

913
export default function ContentWrapper ({ children }: ContentWrapperProps) {
14+
const { sidebar } = usePageContext();
15+
1016
return (
11-
<div className={s.contentWrapper}>
17+
<div className={c(s.contentWrapper, !!sidebar && s.hasSidebar)}>
1218
{children}
1319
</div>
1420
)

‎website/src/layout/components/ContentWrapper/styles.module.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ $toc-width: toc.$desktop-toc-width;
1010
display: flex;
1111

1212
@include mixins.desktop() {
13-
flex-grow: 1;
14-
max-width: calc(100% - #{$sidebar-width});
13+
flex-grow: 1;
14+
max-width: 100%;
15+
16+
&.hasSidebar {
17+
max-width: calc(100% - #{$sidebar-width});
18+
}
1519
}
1620
}

‎website/src/layout/components/ContentWrapper/styles.module.scss.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
declare namespace StylesModuleScssNamespace {
33
export interface IStylesModuleScss {
44
contentWrapper: string;
5+
hasSidebar: string;
56
}
67
}
78

‎website/src/layout/components/TocContainer/styles.module.scss‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,26 @@ $navbar-height: navbar.$navbar-height;
66
$toc-width: toc.$desktop-toc-width;
77

88
.column {
9-
width: 100%;
10-
flex: 0 0 #{$toc-width};
11-
max-width: $toc-width;
12-
}
9+
@include mixins.desktop-only(flex) { width: 100%;
10+
flex: 0 0 #{$toc-width};
11+
max-width: $toc-width;
1312

14-
.tocContainer {
15-
@include mixins.desktop-only(flex) {
16-
$top: 1rem;
17-
$margin-bottom: 1rem;
18-
19-
position: sticky;
20-
top: calc(#{$navbar-height} + #{$top});
21-
max-height: calc(100vh - #{$navbar-height} - #{$top} - #{$margin-bottom});
22-
23-
margin: $top auto $margin-bottom 0;
24-
padding-left: 1rem;
25-
border-left: 1px solid #dddddd;
26-
27-
flex-direction: column;
28-
29-
overflow-y: auto;
30-
@include mixins.scrollbar(4px);
13+
.tocContainer {
14+
$top: 1rem;
15+
$margin-bottom: 1rem;
16+
17+
position: sticky;
18+
top: calc(#{$navbar-height} + #{$top});
19+
max-height: calc(100vh - #{$navbar-height} - #{$top} - #{$margin-bottom});
20+
21+
margin: $top auto $margin-bottom 0;
22+
padding-left: 1rem;
23+
border-left: 1px solid #dddddd;
24+
25+
flex-direction: column;
26+
27+
overflow-y: auto;
28+
@include mixins.scrollbar(4px);
29+
}
3130
}
3231
}

‎website/src/layout/context/Page/index.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { createContext, useContext } from "react";
2+
3+
import type { ReactNode } from "react";
4+
import type { TocItem } from "@/lib/unified/toc/types";
5+
import { SidebarItem as SidebarItemType } from "@/lib/helpers/sidebar";
6+
7+
type PageData = {
8+
sidebar?: SidebarItemType[]
9+
toc?: TocItem[]
10+
}
11+
12+
const PageContext = createContext<PageData | undefined>(undefined);
13+
14+
export const usePageContext = () => {
15+
const context = useContext(PageContext)
16+
if (context === undefined) {
17+
throw new Error('usePageContext must be used in a PageProvider')
18+
}
19+
return context
20+
}
21+
22+
interface PageProviderProps {
23+
toc?: TocItem[]
24+
sidebar?: SidebarItemType[]
25+
children: ReactNode
26+
}
27+
28+
export default function PageProvider ({ sidebar, toc, children }: PageProviderProps) {
29+
return (
30+
<PageContext.Provider value={{ sidebar, toc }}>
31+
{children}
32+
</PageContext.Provider>
33+
)
34+
}

‎website/src/layout/pages/CategoryPage/index.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { useRouter } from "next/router";
22

33
import Navbar from "@/components/Navbar";
4-
import MainWrapper from "@/layout/components/MainWrapper";
54
import Sidebar from "@/components/Sidebar";
6-
7-
import type { CategoryPageProps } from "@/layout/pages/types";
5+
import MainWrapper from "@/layout/components/MainWrapper";
86
import SidebarContainer from "@/layout/components/SidebarContainer";
97
import ContentWrapper from "@/layout/components/ContentWrapper";
108
import ContentContainer from "@/layout/components/ContentContainer";
119
import CategoryItemsGrid from "@/layout/components/CategoryItemsGrid";
10+
import PageProvider from "@/layout/context/Page";
11+
12+
import type { CategoryPageProps } from "@/layout/pages/types";
1213

1314
export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProps) {
1415
const { asPath } = useRouter()
1516

1617
return (
17-
<>
18+
<PageProvider sidebar={sidebar}>
1819
<Navbar sidebar={sidebar} path={asPath} />
1920
<MainWrapper>
2021
<SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
@@ -24,6 +25,6 @@ export default function CategoryPage ({ slug, sidebar, items }: CategoryPageProp
2425
</ContentContainer>
2526
</ContentWrapper>
2627
</MainWrapper>
27-
</>
28+
</PageProvider>
2829
)
2930
}

‎website/src/layout/pages/DocPage/index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import { useMemo, useCallback } from "react";
22
import { useRouter } from "next/router";
33
import { getMDXExport } from "mdx-bundler/client"
44

5+
import Navbar from "@/components/Navbar";
6+
import Sidebar from "@/components/Sidebar";
7+
import TocDesktop from "@/components/Toc/Desktop";
58
import MainWrapper from "@/layout/components/MainWrapper";
69
import SidebarContainer from "@/layout/components/SidebarContainer";
710
import ContentWrapper from "@/layout/components/ContentWrapper";
@@ -10,9 +13,7 @@ import TocContainer from "@/layout/components/TocContainer";
1013
import BeforeMarkdown from "@/layout/components/BeforeMarkdown";
1114
import OpenInColab from "@/layout/components/OpenInColab";
1215
import MarkdownWrapper from "@/layout/components/MarkdownWrapper";
13-
import Navbar from "@/components/Navbar";
14-
import Sidebar from "@/components/Sidebar";
15-
import TocDesktop from "@/components/Toc/Desktop";
16+
import PageProvider from "@/layout/context/Page";
1617
import components from "@/mdx/components";
1718

1819
import type { DocPageProps } from "@/layout/pages/types";
@@ -26,10 +27,12 @@ export default function DocPage ({ slug, fsPath, sidebar, code }: DocPageProps)
2627
), [Component])
2728

2829
return (
29-
<>
30+
<PageProvider sidebar={sidebar} toc={toc}>
3031
<Navbar sidebar={sidebar} path={asPath} />
3132
<MainWrapper>
32-
<SidebarContainer><Sidebar items={sidebar} activePath={asPath} /></SidebarContainer>
33+
<SidebarContainer>
34+
<Sidebar items={sidebar} activePath={asPath} />
35+
</SidebarContainer>
3336
<ContentWrapper>
3437
<ContentContainer>
3538
<BeforeMarkdown>
@@ -44,6 +47,6 @@ export default function DocPage ({ slug, fsPath, sidebar, code }: DocPageProps)
4447
</TocContainer>
4548
</ContentWrapper>
4649
</MainWrapper>
47-
</>
50+
</PageProvider>
4851
)
4952
}

0 commit comments

Comments
 (0)