3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 02:08:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: infima 33 + navbar-sidebar close button (#5460)

Browse source 
* infima 33 + navbar-sidebar close button

* duplicate close icons + theme switch margin
This commit is contained in:
Sébastien Lorber 2021-09-01 19:48:13 +02:00 • committed by GitHub
parent 78d84006bb
commit 402a5e1f88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 98 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/docusaurus-theme-classic/package.json
View file

@ -39,7 +39,7 @@
"copy-text-to-clipboard": "^3.0.1",
"fs-extra": "^10.0.0",
"globby": "^11.0.2",
"infima": "0.2.0-alpha.32",
"infima": "0.2.0-alpha.33",
"lodash": "^4.17.20",
"parse-numeric-range": "^1.2.0",
"postcss": "^8.2.15",

5
packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx
View file

@ -9,6 +9,7 @@ import React from 'react';
import clsx from 'clsx';
import {useThemeConfig, useAnnouncementBar} from '@docusaurus/theme-common';
import {translate} from '@docusaurus/Translate';
import IconCloseThick from '@theme/IconCloseThick';
import styles from './styles.module.css';
@ -48,9 +49,7 @@ function AnnouncementBar(): JSX.Element | null {
message: 'Close',
description: 'The ARIA label for close button of announcement bar',
})}>
<svg width="14" height="14" viewBox="0 0 24 24">
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
</svg>
<IconCloseThick width={14} height={14} />
</button>
) : null}
</div>

28
packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx Normal file
View file

@ -0,0 +1,28 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import type {Props} from '@theme/IconCloseThick';
export default function IconCloseThick({
width = 20,
height = 20,
className,
...restProps
}: Props): JSX.Element {
return (
<svg
className={className}
viewBox="0 0 24 24"
width={width}
height={height}
fill="currentColor"
{...restProps}>
<path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
</svg>
);
}

28
packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx Normal file
View file

@ -0,0 +1,28 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import type {Props} from '@theme/IconCloseThin';
export default function IconCloseThin({
width = 20,
height = 20,
className,
...restProps
}: Props): JSX.Element {
return (
<svg
className={className}
viewBox="0 0 413.348 413.348"
width={width}
height={height}
fill="currentColor"
{...restProps}>
<path d="m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z" />
</svg>
);
}

14
packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
View file

@ -23,6 +23,7 @@ import {useActivePlugin} from '@theme/hooks/useDocs';
import NavbarItem, {Props as NavbarItemConfig} from '@theme/NavbarItem';
import Logo from '@theme/Logo';
import IconMenu from '@theme/IconMenu';
import IconCloseThin from '@theme/IconCloseThin';
import styles from './styles.module.css';
@ -155,12 +156,23 @@ function NavbarMobileSidebar({
imageClassName="navbar__logo"
titleClassName="navbar__title"
/>
{!colorModeToggle.disabled && sidebarShown && (
{!colorModeToggle.disabled && (
<Toggle
className={styles.navbarSidebarToggle}
checked={colorModeToggle.isDarkTheme}
onChange={colorModeToggle.toggle}
/>
)}
<button
type="button"
className="clean-btn navbar-sidebar__close"
onClick={toggleSidebar}>
<IconCloseThin
width={20}
height={20}
className={styles.navbarSidebarCloseSvg}
/>
</button>
</div>
<div

8
packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
View file

@ -21,3 +21,11 @@ Hide toggle in small viewports
.navbarHidden {
transform: translate3d(0, calc(-100% - 2px), 0);
}
.navbarSidebarToggle {
margin-right: 1rem;
}
.navbarSidebarCloseSvg {
fill: var(--ifm-color-emphasis-600);
}

14
packages/docusaurus-theme-classic/src/types.d.ts vendored
View file

@ -710,6 +710,20 @@ declare module '@theme/IconMenu' {
export default IconMenu;
}
declare module '@theme/IconCloseThick' {
import type {ComponentProps} from 'react';
export type Props = ComponentProps<'svg'>;
export default function IconCloseThick(props: Props): JSX.Element;
}
declare module '@theme/IconCloseThin' {
import type {ComponentProps} from 'react';
export type Props = ComponentProps<'svg'>;
export default function IconCloseThin(props: Props): JSX.Element;
}
declare module '@theme/IconLanguage' {
import type {ComponentProps} from 'react';

8
yarn.lock
View file

@ -11140,10 +11140,10 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
integrity sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==
infima@0.2.0-alpha.32:
version "0.2.0-alpha.32"
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.32.tgz#55ec893ec94bd4a5cd6f4cfa4ed5d0a9b692f772"
integrity sha512-zvPiqT/2TAPtMvMy7+b8IiH7ykL8IBQbR0vAQe6SPnrC610YVMWBqKYv49GuwzTREEB+QEPxfGQfcOJ89+zwoQ==
infima@0.2.0-alpha.33:
version "0.2.0-alpha.33"
resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.33.tgz#8d1a77ea916bedcebffa60dcd2dffbe382e09abf"
integrity sha512-iLZI8/vGTbbhbeFhlWv1zwvrqfNDLAayuEdqZqNqCyGuh0IW469dRIRm0FLZ98YyLikt2njzuKfy6xUrBWRXcg==
inflight@^1.0.4:
version "1.0.6"