Merge pull request #21 from acid-info/sidebar

Fix a bug with Navbar and Sidebar

packages/docusaurus-playground/package.json

@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.4",
+    "@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.7",
     "@docusaurus/core": "2.4.1",
     "@docusaurus/preset-classic": "2.4.1",
     "@docusaurus/theme-mermaid": "^2.4.1",

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/ScrollToBottom.tsx

@@ -0,0 +1,33 @@
+import { ArrowDownIcon, IconButton } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React, { HTMLProps } from 'react'
+import styles from './styles.module.scss'
+
+type TProps = {
+  bottom: number
+}
+
+export const ScrollToBottom = (
+  props: TProps & HTMLProps<HTMLButtonElement>,
+): JSX.Element => {
+  const { children, className, bottom, ...rest } = props
+
+  const handleScrollToBottom = () => {
+    window.scrollTo({
+      top: document.body.scrollHeight,
+      behavior: 'smooth',
+    })
+  }
+
+  return (
+    <IconButton
+      onClick={handleScrollToBottom}
+      size="small"
+      className={clsx(styles.scrollToBottom, className)}
+      style={{ bottom: -(bottom - 16) }}
+      {...(rest as any)}
+    >
+      <ArrowDownIcon color="primary" />
+    </IconButton>
+  )
+}

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/index.ts

@@ -0,0 +1 @@
+export * from './ScrollToBottom'

packages/logos-docusaurus-theme/src/client/components/Button/ScrollToBottom/styles.module.scss

@@ -0,0 +1,7 @@
+@use '../../../css/utils';
+
+.scrollToBottom {
+  z-index: 100;
+  position: absolute;
+  background: rgb(var(--lsd-surface-primary)) !important;
+}

packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx

@@ -4,6 +4,7 @@ import { useHero } from '../Hero/Hero.context'
 import './HeroInfo.scss'
 import { useScrollY } from '../../../lib/useScrollY'
 import { calcScrollThreshold, mapFloat } from '../../../lib/ui.utils'
+import { ScrollToBottom } from '@logos-theme/components/Button/ScrollToBottom'
 
 export type HeroInfoProps = PropsWithChildren<
   React.HTMLAttributes<HTMLDivElement>
@@ -47,15 +48,18 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
   }, [])
 
   return (
-    <div
-      className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
-      style={{
-        ...(initialMarginBottom ? { marginBottom: getMarginBottom() } : {}),
-      }}
-      ref={ref}
-      {...(props as any)}
-    >
-      {children}
-    </div>
+    <>
+      <div
+        className={clsx(className, 'mdx-hero-info', `mdx-hero-info--${size}`)}
+        style={{
+          ...(initialMarginBottom ? { marginBottom: getMarginBottom() } : {}),
+        }}
+        ref={ref}
+        {...(props as any)}
+      >
+        {children}
+      </div>
+      <ScrollToBottom bottom={getMarginBottom()} />
+    </>
   )
 }

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

@@ -630,8 +630,6 @@ a[class^='sidebarLogo_'] {
 
 @include utils.responsive('lg', 'up') {
   .main-wrapper {
-    padding: 0;
-
     main > .container {
       padding-bottom: 200px !important;
     }
@@ -645,6 +643,7 @@ a[class^='sidebarLogo_'] {
         width: auto;
         grid-column: 1 / 5;
         border: none;
+        padding-left: var(--content-padding);
       }
 
       main {
@@ -677,8 +676,6 @@ a[class^='sidebarLogo_'] {
 
 @include utils.responsive('xl', 'up') {
   .main-wrapper {
-    padding: 0;
-
     & > div {
       display: grid;
       grid-template-columns: repeat(24, 1fr);
@@ -708,8 +705,6 @@ a[class^='sidebarLogo_'] {
 
 .main-wrapper {
   // website pages
-  padding-inline: var(--content-padding);
-
   > .container {
     margin-top: 0 !important;
     margin-bottom: 80px !important;
@@ -915,10 +910,6 @@ a[class^='sidebarLogo_'] {
     padding-bottom: 0px !important;
   }
 
-  .main-wrapper {
-    padding-inline: 0;
-  }
-
   .navbar-sidebar:has(.navbar-sidebar__items--show-secondary)
     .navbar-sidebar__brand {
     button:first-of-type {
@@ -955,6 +946,8 @@ a[class^='sidebarLogo_'] {
     }
 
     .footer > div {
+      display: flex !important;
+      flex-direction: column !important;
       gap: 32px !important;
     }
 

packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css

@@ -8,7 +8,7 @@
   }
 
   .sidebarWithHideableNavbar {
-    padding-top: 0;
+    padding-top: 0 !important;
   }
 
   .sidebarHidden {