🐛 Fix sidebar sticky when navbar not hide

nonebot · Sep 12, 2023 · 4fb373e · 4fb373e
1 parent 47b53ea
commit 4fb373e
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 13 deletions.
diff --git a/packages/theme-nonepress/src/theme/Page/index.tsx b/packages/theme-nonepress/src/theme/Page/index.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 
 import "./styles.css";
+import clsx from "clsx";
+
 import type { Props } from "@theme/Page";
 import Sidebar from "@theme/Sidebar";
 import TOC from "@theme/TOC";
@@ -9,14 +11,24 @@ export default function Page({
   children,
   hideSidebar = false,
   hideTableOfContents = false,
+  reduceContentWidth = true,
 }: Props): JSX.Element {
+  const shouldReduceContent = !hideTableOfContents && reduceContentWidth;
+
   return (
     <div className="page">
       {/* sidebar */}
       {!hideSidebar && <Sidebar className="page-sidebar" />}
       {/* main */}
       <main className="page-main">
-        <div className="page-content">{children}</div>
+        <div
+          className={clsx(
+            "page-content",
+            shouldReduceContent && "page-content-narrow",
+          )}
+        >
+          {children}
+        </div>
         {/* TOC */}
         {!hideTableOfContents && <TOC className="page-toc" />}
       </main>

diff --git a/packages/theme-nonepress/src/theme/Page/styles.css b/packages/theme-nonepress/src/theme/Page/styles.css
@@ -16,7 +16,11 @@
   }
 
   &-content {
-    @apply grow w-full lg:max-w-[calc(100%-256px)] mx-auto;
+    @apply grow w-full mx-auto;
+
+    &-narrow {
+      @apply lg:max-w-[calc(100%-256px)];
+    }
   }
 
   &-toc {

diff --git a/packages/theme-nonepress/src/theme/Sidebar/index.tsx b/packages/theme-nonepress/src/theme/Sidebar/index.tsx
@@ -50,13 +50,7 @@ export default function Sidebar({ className }: Props): JSX.Element | null {
   }
 
   return (
-    <div
-      className={clsx(
-        "sidebar",
-        hideOnScroll && "sidebar-with-hideable-navbar",
-        className,
-      )}
-    >
+    <div className={clsx("sidebar", className)}>
       {hideOnScroll && (
         <Logo
           className="sidebar-brand"

diff --git a/packages/theme-nonepress/src/theme/Sidebar/styles.css b/packages/theme-nonepress/src/theme/Sidebar/styles.css
@@ -1,12 +1,12 @@
 .sidebar {
-  @apply flex flex-col h-full max-h-screen;
+  @apply flex flex-col h-full max-h-screen -mt-16;
 
-  &-with-hideable-navbar {
-    @apply -mt-16;
+  &:not(:has(> &-brand)) {
+    @apply pt-16;
   }
 
   &-brand {
-    @apply flex items-center px-4 sm:px-6 md:px-8 py-4;
+    @apply flex items-center h-16 px-4 sm:px-6 md:px-8 py-4;
 
     &-logo {
       @apply h-auto w-auto;

diff --git a/packages/theme-nonepress/src/types.d.ts b/packages/theme-nonepress/src/types.d.ts
@@ -1217,6 +1217,7 @@ declare module "@theme/Page" {
     children?: ReactNode;
     hideSidebar?: boolean;
     hideTableOfContents?: boolean;
+    reduceContentWidth?: boolean;
   }
 
   export default function Page(props: Props): JSX.Element;

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -69,6 +69,7 @@ const config = {
       },
       navbar: {
         title: "NonePress",
+        hideOnScroll: true,
         logo: {
           alt: "NonePress",
           src: "img/logo.svg",