update mobile sidebar

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -185,7 +185,7 @@
   --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
   --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
   --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
-  --ifm-navbar-sidebar-width: 83vw;
+  --ifm-navbar-sidebar-width: 100vw;
   --ifm-pagination-border-radius: var(--ifm-global-radius);
   --ifm-pagination-font-size: 1rem;
   --ifm-pagination-item-active-background: var(--ifm-hover-overlay);
@@ -548,6 +548,27 @@ a[class^='sidebarLogo_'] {
   }
 }
 
+.navbar-sidebar__item {
+  padding-inline: var(--content-padding);
+  padding-block: 0;
+}
+
+.navbar-sidebar__back {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: 100% !important;
+  margin: 0 !important;
+  gap: 16px;
+  margin-top: 24px !important;
+  margin-bottom: 24px !important;
+}
+
+.theme-doc-sidebar-menu .menu__link {
+  padding-left: var(--content-padding);
+  padding-right: 0;
+}
+
 @include utils.responsive('sm', 'down') {
   :root {
     --ifm-global-spacing: 0.5rem;
@@ -879,4 +900,35 @@ a[class^='sidebarLogo_'] {
   .main-wrapper {
     padding-inline: 0;
   }
+
+  .navbar-sidebar__brand {
+    height: 60px;
+    padding-block: 0;
+  }
+
+  .navbar-sidebar__brand > button {
+    width: 32px;
+    height: 32px;
+  }
+
+  .navbar-sidebar__brand > button:first-of-type {
+    margin-right: 0 !important;
+    margin-left: auto;
+  }
+
+  .navbar-sidebar__brand > button:not(:last-of-type) {
+    border-right: none;
+  }
+
+  .navbar-sidebar__close {
+    border: 1px solid rgb(var(--lsd-border-primary));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: unset;
+  }
+
+  .menu__list-item .menu__link {
+    font-size: var(--lsd-body2-fontSize);
+  }
 }

packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx

@@ -17,7 +17,7 @@ import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
 import useIsBrowser from '@docusaurus/useIsBrowser'
 import DocSidebarItems from '@theme/DocSidebarItems'
-import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react'
+import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
 
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
@@ -165,7 +165,9 @@ export default function DocSidebarItemCategory({
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}
         >
-          {label}
+          <Typography variant="body2" color="primary">
+            {label}
+          </Typography>
           {collapsed ? <ArrowUpIcon /> : <ArrowDownIcon />}
         </Link>
         {href && collapsible && (

packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import { translate } from '@docusaurus/Translate'
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
+import NavbarLogo from '@theme/Navbar/Logo'
+import { CloseIcon } from '@acid-info/lsd-react'
+import SearchBar from '@theme/SearchBar'
+
+function CloseButton() {
+  const mobileSidebar = useNavbarMobileSidebar()
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
+      className="clean-btn navbar-sidebar__close"
+      onClick={() => mobileSidebar.toggle()}
+    >
+      <CloseIcon />
+    </button>
+  )
+}
+export default function NavbarMobileSidebarHeader() {
+  return (
+    <div className="navbar-sidebar__brand">
+      <NavbarLogo />
+      <NavbarColorModeToggle className="margin-right--md" />
+      <SearchBar />
+      <CloseButton />
+    </div>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
+import Translate from '@docusaurus/Translate'
+import { Typography } from '@acid-info/lsd-react'
+import { IconArrowLeft } from '@logos-theme/components/Icon'
+
+function SecondaryMenuBackButton(props) {
+  return (
+    <button {...props} type="button" className="clean-btn navbar-sidebar__back">
+      <IconArrowLeft />
+      <Typography>
+        <Translate
+          id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
+          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)"
+        >
+          Back to main menu
+        </Translate>
+      </Typography>
+    </button>
+  )
+}
+// The secondary menu slides from the right and shows contextual information
+// such as the docs sidebar
+export default function NavbarMobileSidebarSecondaryMenu() {
+  const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0
+  const secondaryMenu = useNavbarSecondaryMenu()
+  return (
+    <>
+      {/* edge-case: prevent returning to the primaryMenu when it's empty */}
+      {!isPrimaryMenuEmpty && (
+        <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} />
+      )}
+      {secondaryMenu.content}
+    </>
+  )
+}