add footer to mobile sidebar firstMenu

packages/docusaurus-playground/docusaurus.config.js

@@ -111,7 +111,7 @@ const config = {
               },
               {
                 href: '/',
-                label: 'Temrs & conditions',
+                label: 'Terms & conditions',
               },
             ],
           },

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

@@ -913,6 +913,62 @@ a[class^='sidebarLogo_'] {
     padding-inline: 0;
   }
 
+  .navbar-sidebar:has(.navbar-sidebar__items--show-secondary)
+    .navbar-sidebar__brand {
+    button:first-of-type {
+      display: none;
+    }
+
+    button.lsd-icon-button {
+      margin-left: auto;
+    }
+  }
+
+  .navbar-sidebar:not(:has(.navbar-sidebar__items--show-secondary)) {
+    .navbar-sidebar__items {
+      height: 180px;
+    }
+
+    .navbar-sidebar__item {
+      padding-block: var(--content-padding);
+    }
+
+    .menu__list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .menu__link {
+      padding-left: 0;
+      border-left: none;
+
+      > div {
+        font-size: var(--lsd-body1-fontSize) !important;
+      }
+    }
+
+    .footer > div {
+      gap: 32px !important;
+    }
+
+    .footer > button {
+      display: none;
+    }
+
+    .footer .container.container-fluid {
+      margin-bottom: 16px !important;
+
+      > .footer__links {
+        gap: 0 !important;
+      }
+    }
+
+    .footer .footer__links {
+      gap: 16px !important;
+    }
+  }
+
   .navbar-sidebar__brand {
     height: 60px;
     padding-block: 0;

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
+import Footer from '@theme/Footer'
+
+export default function NavbarMobileSidebarLayout({
+  header,
+  primaryMenu,
+  secondaryMenu,
+}) {
+  const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()
+
+  return (
+    <div className="navbar-sidebar">
+      {header}
+      <div
+        className={clsx('navbar-sidebar__items', {
+          'navbar-sidebar__items--show-secondary': secondaryMenuShown,
+        })}
+      >
+        <div className="navbar-sidebar__item menu">{primaryMenu}</div>
+        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
+      </div>
+      {!secondaryMenuShown && <Footer />}
+    </div>
+  )
+}

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

@@ -20,6 +20,7 @@ function SecondaryMenuBackButton(props) {
     </button>
   )
 }
+
 // The secondary menu slides from the right and shows contextual information
 // such as the docs sidebar
 export default function NavbarMobileSidebarSecondaryMenu() {