Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Commit bc0bd9a

Browse files
bennobuilderbennobuilder
committed
updated navbar
1 parent 6899b53 commit bc0bd9a

File tree

6 files changed

+151
-37
lines changed

6 files changed

+151
-37
lines changed

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@
2626
"@agile-ts/proxytree": "^0.0.9",
2727
"@agile-ts/react": "^0.2.3",
2828
"@agile-ts/utils": "^0.0.11",
29-
"@docusaurus/core": "2.0.0-beta.14",
30-
"@docusaurus/module-type-aliases": "2.0.0-beta.14",
31-
"@docusaurus/preset-classic": "2.0.0-beta.14",
32-
"@docusaurus/remark-plugin-npm2yarn": "2.0.0-beta.14",
33-
"@docusaurus/theme-live-codeblock": "2.0.0-beta.14",
29+
"@docusaurus/core": "^2.0.0-beta.14",
30+
"@docusaurus/module-type-aliases": "^2.0.0-beta.14",
31+
"@docusaurus/preset-classic": "^2.0.0-beta.14",
32+
"@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.14",
33+
"@docusaurus/theme-live-codeblock": "^2.0.0-beta.14",
3434
"@mdx-js/react": "^1.6.22",
3535
"@tsconfig/docusaurus": "^1.0.4",
3636
"clsx": "^1.1.1",

‎src/theme/Navbar/components/NavbarMobileSidebar/index.tsx

Lines changed: 66 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,89 @@
11
import React from 'react';
2-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3-
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
4-
import clsx from 'clsx';
52
import styles from '../../styles.module.css';
6-
import QuickSocialLinksView from '../QuickSocialLinksView';
73
import NavbarItem from '@theme/NavbarItem';
8-
import { useNavbarItems } from '../../controller';
4+
import {
5+
useColorModeToggle,
6+
useNavbarItems,
7+
useSecondaryMenu,
8+
} from '../../controller';
9+
import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
10+
import clsx from 'clsx';
11+
import Translate from '@docusaurus/Translate';
12+
import Toggle from '@theme/Toggle';
13+
import Logo from '@theme/Logo';
14+
import IconClose from '@theme/IconClose';
915

10-
type Props = {
11-
toggleSidebar: () => void;
16+
export type NavbarMobileSidebarProps = {
1217
sidebarShown: boolean;
18+
toggleSidebar: () => void;
1319
};
1420

15-
const NavbarMobileSidebar: React.FC<Props> = (props) => {
21+
const NavbarMobileSidebar: React.FC<NavbarMobileSidebarProps> = (props) => {
1622
const { toggleSidebar, sidebarShown } = props;
17-
const { siteConfig } = useDocusaurusContext();
18-
const items = useNavbarItems();
1923
useLockBodyScroll(sidebarShown);
24+
const items = useNavbarItems();
25+
26+
const colorModeToggle = useColorModeToggle();
27+
28+
const secondaryMenu = useSecondaryMenu({
29+
sidebarShown,
30+
toggleSidebar,
31+
});
2032

2133
return (
2234
<div className="navbar-sidebar">
2335
<div className="navbar-sidebar__brand">
24-
<a
25-
className={clsx('navbar__brand', styles.BrandText)}
36+
<Logo
37+
className="navbar__brand"
38+
imageClassName="navbar__logo"
39+
titleClassName="navbar__title"
40+
/>
41+
{!colorModeToggle.disabled && (
42+
<Toggle
43+
className={styles.navbarSidebarToggle}
44+
checked={colorModeToggle.isDarkTheme}
45+
onChange={colorModeToggle.toggle}
46+
/>
47+
)}
48+
<button
49+
type="button"
50+
className="clean-btn navbar-sidebar__close"
2651
onClick={toggleSidebar}>
27-
{siteConfig.title}
28-
</a>
29-
<QuickSocialLinksView />
52+
<IconClose
53+
color="var(--ifm-color-emphasis-600)"
54+
className={styles.navbarSidebarCloseSvg}
55+
/>
56+
</button>
3057
</div>
31-
<div className="navbar-sidebar__items">
32-
<div className="menu">
58+
59+
<div
60+
className={clsx('navbar-sidebar__items', {
61+
'navbar-sidebar__items--show-secondary': secondaryMenu.shown,
62+
})}>
63+
<div className="navbar-sidebar__item menu">
3364
<ul className="menu__list">
3465
{items.map((item, i) => (
35-
<NavbarItem {...item} mobile onClick={toggleSidebar} key={i} />
66+
// @ts-ignore
67+
<NavbarItem mobile {...item} onClick={toggleSidebar} key={i} />
3668
))}
3769
</ul>
3870
</div>
71+
72+
<div className="navbar-sidebar__item menu">
73+
{items.length > 0 && (
74+
<button
75+
type="button"
76+
className="clean-btn navbar-sidebar__back"
77+
onClick={secondaryMenu.hide}>
78+
<Translate
79+
id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
80+
description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)">
81+
← Back to main menu
82+
</Translate>
83+
</button>
84+
)}
85+
{secondaryMenu.content}
86+
</div>
3987
</div>
4088
</div>
4189
);

‎src/theme/Navbar/controller.ts

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import { useHistoryPopHandler, useThemeConfig } from '@docusaurus/theme-common';
1+
import {
2+
useThemeConfig,
3+
useMobileSecondaryMenuRenderer,
4+
usePrevious,
5+
useHistoryPopHandler,
6+
} from '@docusaurus/theme-common';
27
import useWindowSize from '@theme/hooks/useWindowSize';
38
import { useCallback, useEffect, useState } from 'react';
9+
import { NavbarMobileSidebarProps } from './components/NavbarMobileSidebar';
10+
import useThemeContext from '@theme/hooks/useThemeContext';
411

512
export const DefaultNavItemPosition = 'right'; // If split links by left/right
613

@@ -22,7 +29,7 @@ export const useNavbarItems = () => {
2229
return useThemeConfig().navbar.items;
2330
};
2431

25-
export const useMobileSidebar = () => {
32+
export function useMobileSidebar() {
2633
const windowSize = useWindowSize();
2734

2835
// Mobile sidebar not visible on hydration: can avoid SSR rendering
@@ -53,4 +60,63 @@ export const useMobileSidebar = () => {
5360
}, [windowSize]);
5461

5562
return { shouldRender, toggle, shown };
56-
};
63+
}
64+
65+
export function useColorModeToggle() {
66+
const {
67+
colorMode: { disableSwitch },
68+
} = useThemeConfig();
69+
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
70+
const toggle = useCallback(
71+
(e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
72+
[setLightTheme, setDarkTheme]
73+
);
74+
return { isDarkTheme, toggle, disabled: disableSwitch };
75+
}
76+
77+
export function useSecondaryMenu({
78+
sidebarShown,
79+
toggleSidebar,
80+
}: NavbarMobileSidebarProps) {
81+
const content = useMobileSecondaryMenuRenderer()?.({
82+
toggleSidebar,
83+
});
84+
const previousContent = usePrevious(content);
85+
86+
const [shown, setShown] = useState<boolean>(
87+
() =>
88+
// /!\ content is set with useEffect,
89+
// so it's not available on mount anyway
90+
// "return !!content" => always returns false
91+
false
92+
);
93+
94+
// When content is become available for the first time (set in useEffect)
95+
// we set this content to be shown!
96+
useEffect(() => {
97+
const contentBecameAvailable = content && !previousContent;
98+
if (contentBecameAvailable) {
99+
setShown(true);
100+
}
101+
}, [content, previousContent]);
102+
103+
const hasContent = !!content;
104+
105+
// On sidebar close, secondary menu is set to be shown on next re-opening
106+
// (if any secondary menu content available)
107+
useEffect(() => {
108+
if (!hasContent) {
109+
setShown(false);
110+
return;
111+
}
112+
if (!sidebarShown) {
113+
setShown(true);
114+
}
115+
}, [sidebarShown, hasContent]);
116+
117+
const hide = useCallback(() => {
118+
setShown(false);
119+
}, []);
120+
121+
return { shown, hide, content };
122+
}

‎src/theme/Navbar/index.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* This source code is licensed under the MIT license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
9-
import React, { useCallback, useState } from 'react';
9+
import React, { useCallback } from 'react';
1010
import clsx from 'clsx';
1111
import SearchBar from '@theme/SearchBar';
1212
import Toggle from '@theme/Toggle';
@@ -30,7 +30,6 @@ import NavbarMobileSidebar from './components/NavbarMobileSidebar';
3030
const Navbar: React.FC = () => {
3131
const { siteConfig } = useDocusaurusContext();
3232
const items = useNavbarItems();
33-
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
3433
const { leftItems, rightItems } = splitNavItemsByPosition(items);
3534
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
3635
const history = useHistory();
@@ -79,10 +78,7 @@ const Navbar: React.FC = () => {
7978
checked={isDarkTheme}
8079
onChange={onThemeToggleChange}
8180
/>
82-
<SearchBar
83-
handleSearchBarToggle={setIsSearchBarExpanded}
84-
isSearchBarExpanded={isSearchBarExpanded}
85-
/>
81+
<SearchBar />
8682
</div>
8783
<BrowserOnly>{() => <Progressbar />}</BrowserOnly>
8884
</div>

‎src/theme/Navbar/styles.module.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@
3838
align-self: center;
3939
}
4040

41+
:global(.navbar-sidebar__close){
42+
margin-right: 1rem;
43+
}
44+
4145
@media (max-width: 997px) {
4246
.displayOnlyInLargeViewport {
4347
display: none !important;

‎yarn.lock

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2298,7 +2298,7 @@
22982298
"@docsearch/css" "3.0.0-alpha.40"
22992299
algoliasearch "^4.0.0"
23002300

2301-
"@docusaurus/core@2.0.0-beta.14":
2301+
"@docusaurus/core@2.0.0-beta.14", "@docusaurus/core@^2.0.0-beta.14":
23022302
version "2.0.0-beta.14"
23032303
resolved "https://registry.yarnpkg.com/@docusaurus/core/-/core-2.0.0-beta.14.tgz#9baf8fbfe29f444f985616013b5d80435ea5f29e"
23042304
integrity sha512-dW95WbD+WE+35Ee1RYIS1QDcBhvUxUWuDmrWr1X0uH5ZHIeOmOnsGVjjn4FA8VN2MkF0uuWknmRakQmJk0KMZw==
@@ -2419,7 +2419,7 @@
24192419
url-loader "^4.1.1"
24202420
webpack "^5.61.0"
24212421

2422-
"@docusaurus/module-type-aliases@2.0.0-beta.14":
2422+
"@docusaurus/module-type-aliases@^2.0.0-beta.14":
24232423
version "2.0.0-beta.14"
24242424
resolved "https://registry.yarnpkg.com/@docusaurus/module-type-aliases/-/module-type-aliases-2.0.0-beta.14.tgz#8a11f9c4a408d8e8cc4cb59ba81a28ecc629256a"
24252425
integrity sha512-jlSwYoRVeNxvmjbVil35mRVSXZdOmEM95Sph7NxC6IE/ceT1a8s4tpzI2xUMsGgSfLBldqhkXe+WSOYqUL7x3w==
@@ -2533,7 +2533,7 @@
25332533
sitemap "^7.0.0"
25342534
tslib "^2.3.1"
25352535

2536-
"@docusaurus/preset-classic@2.0.0-beta.14":
2536+
"@docusaurus/preset-classic@^2.0.0-beta.14":
25372537
version "2.0.0-beta.14"
25382538
resolved "https://registry.yarnpkg.com/@docusaurus/preset-classic/-/preset-classic-2.0.0-beta.14.tgz#128026fb201fdc6271614587ca09187bc83d930a"
25392539
integrity sha512-43rHA6wM4FcbHLPiBpqY4VSUjUXOWvW/N4q0wvf1LMoPH25lUzIaldpjD3Unzq5+UCYCFES24ktl58QOh7PB2g==
@@ -2557,7 +2557,7 @@
25572557
"@types/react" "*"
25582558
prop-types "^15.6.2"
25592559

2560-
"@docusaurus/remark-plugin-npm2yarn@2.0.0-beta.14":
2560+
"@docusaurus/remark-plugin-npm2yarn@^2.0.0-beta.14":
25612561
version "2.0.0-beta.14"
25622562
resolved "https://registry.yarnpkg.com/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-2.0.0-beta.14.tgz#89fd690ad31e655428cf517ff0b0a5134b991911"
25632563
integrity sha512-IFNBYPG/Qg52jQRK1QtawINbmkDp6k7tPryzuQL/nEI7fUU7E8zts6wj8SbjFftJM5Pw/zBEGvKsYZ6pBcnz2g==
@@ -2606,7 +2606,7 @@
26062606
tslib "^2.3.1"
26072607
utility-types "^3.10.0"
26082608

2609-
"@docusaurus/theme-live-codeblock@2.0.0-beta.14":
2609+
"@docusaurus/theme-live-codeblock@^2.0.0-beta.14":
26102610
version "2.0.0-beta.14"
26112611
resolved "https://registry.yarnpkg.com/@docusaurus/theme-live-codeblock/-/theme-live-codeblock-2.0.0-beta.14.tgz#f3063685217f4208853e35abf764cd34ac532a5f"
26122612
integrity sha512-CQ+RY+Uc7gM2frGz+uzedo471CkvKJhuIsiOlSGEq+6WuFk/FTuguUToNiGMAe6KrIjbAopIV9iyHqGwmTQ98Q==

0 commit comments

Comments
 (0)