From cad59478aeeaea2d0610899d51a5154522cd4e87 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Fri, 2 Jun 2023 01:36:38 +0900
Subject: [PATCH] add footer to mobile sidebar firstMenu

---
 .../docusaurus.config.js                      |  2 +-
 .../src/client/css/custom.scss                | 56 +++++++++++++++++++
 .../Navbar/MobileSidebar/Layout/index.tsx     | 27 +++++++++
 .../MobileSidebar/SecondaryMenu/index.tsx     |  1 +
 4 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx

diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index 824e7a5..5fa7a4c 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -111,7 +111,7 @@ const config = {
               },
               {
                 href: '/',
-                label: 'Temrs & conditions',
+                label: 'Terms & conditions',
               },
             ],
           },
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index dd27450..16ec75c 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/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;
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx
new file mode 100644
index 0000000..38978b9
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
index 69ba0e3..4e4d344 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
+++ b/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() {