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

* infima 33 + navbar-sidebar close button

* duplicate close icons + theme switch margin

packages/docusaurus-theme-classic/package.json

@@ -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",

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.tsx

@@ -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">
+          <IconCloseThick width={14} height={14} />
-            <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>
         </button>
       ) : null}
     </div>

packages/docusaurus-theme-classic/src/theme/IconCloseThick/index.tsx

@@ -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>
+  );
+}

packages/docusaurus-theme-classic/src/theme/IconCloseThin/index.tsx

@@ -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>
+  );
+}

packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx

@@ -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

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

@@ -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);
+}

packages/docusaurus-theme-classic/src/types.d.ts

@@ -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';
 

yarn.lock

@@ -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:
+infima@0.2.0-alpha.33:
-  version "0.2.0-alpha.32"
+  version "0.2.0-alpha.33"
-  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.32.tgz#55ec893ec94bd4a5cd6f4cfa4ed5d0a9b692f772"
+  resolved "https://registry.yarnpkg.com/infima/-/infima-0.2.0-alpha.33.tgz#8d1a77ea916bedcebffa60dcd2dffbe382e09abf"
-  integrity sha512-zvPiqT/2TAPtMvMy7+b8IiH7ykL8IBQbR0vAQe6SPnrC610YVMWBqKYv49GuwzTREEB+QEPxfGQfcOJ89+zwoQ==
+  integrity sha512-iLZI8/vGTbbhbeFhlWv1zwvrqfNDLAayuEdqZqNqCyGuh0IW469dRIRm0FLZ98YyLikt2njzuKfy6xUrBWRXcg==
 
 inflight@^1.0.4:
   version "1.0.6"