feat: add sidebar slots (#405)

web-infra-dev · Nov 27, 2023 · 3756fab · 3756fab
1 parent 22db145
commit 3756fab
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 9 deletions.
diff --git a/.changeset/twelve-stingrays-bathe.md b/.changeset/twelve-stingrays-bathe.md
@@ -0,0 +1,5 @@
+---
+'@rspress/theme-default': minor
+---
+
+feat: add sidebar slots
diff --git a/packages/document/docs/en/guide/advanced/custom-theme.mdx b/packages/document/docs/en/guide/advanced/custom-theme.mdx
@@ -64,9 +64,12 @@ const Layout = () => (
     beforeNav={<div>beforeNav</div>}
     /* Before the title of the nav bar in the upper left corner */
     beforeNavTitle={<span>😄</span>}
-    /* After the title of the nav bar in the upper left corner
-     */
+    /* After the title of the nav bar in the upper left corner */
     afterNavTitle={<div>afterNavTitle</div>}
+    /* Above the left sidebar */
+    beforeSidebar={<div>beforeSidebar</div>}
+    /* Below the left sidebar */
+    afterSidebar={<div>afterSidebar</div>}
     /* Above the right outline column */
     beforeOutline={<div>beforeOutline</div>}
     /* Below the outline column on the right */

diff --git a/packages/document/docs/zh/guide/advanced/custom-theme.mdx b/packages/document/docs/zh/guide/advanced/custom-theme.mdx
@@ -66,6 +66,10 @@ const Layout = () => (
     beforeNavTitle={<span>😄</span>}
     /* 左上角导航栏标题之后 */
     afterNavTitle={<div>afterNavTitle</div>}
+    /* 左侧侧边栏上面 */
+    beforeSidebar={<div>beforeSidebar</div>}
+    /* 左侧侧边栏下面 */
+    afterSidebar={<div>afterSidebar</div>}
     /* 右侧大纲栏上面 */
     beforeOutline={<div>beforeOutline</div>}
     /* 右侧大纲栏下面 */

diff --git a/packages/theme-default/src/components/LocalSideBar/index.tsx b/packages/theme-default/src/components/LocalSideBar/index.tsx
@@ -4,7 +4,13 @@ import MenuIcon from '../../assets/menu.svg';
 import { SideBar } from '../Sidebar';
 import './index.scss';
 
-export function SideMenu() {
+export function SideMenu({
+  beforeSidebar,
+  afterSidebar,
+}: {
+  beforeSidebar?: React.ReactNode;
+  afterSidebar?: React.ReactNode;
+}) {
   const [isSidebarOpen, setIsOpen] = useState<boolean>(false);
   const { pathname } = useLocation();
 
@@ -30,7 +36,11 @@ export function SideMenu() {
           <span className="text-sm">Menu</span>
         </button>
       </div>
-      <SideBar isSidebarOpen={isSidebarOpen} />
+      <SideBar
+        isSidebarOpen={isSidebarOpen}
+        beforeSidebar={beforeSidebar}
+        afterSidebar={afterSidebar}
+      />
       {isSidebarOpen ? (
         <div onClick={closeSidebar} className="rspress-sidebar-back-drop" />
       ) : null}

diff --git a/packages/theme-default/src/components/Sidebar/index.tsx b/packages/theme-default/src/components/Sidebar/index.tsx
@@ -34,6 +34,8 @@ export interface SidebarItemProps {
 
 interface Props {
   isSidebarOpen?: boolean;
+  beforeSidebar?: React.ReactNode;
+  afterSidebar?: React.ReactNode;
 }
 
 export const highlightTitleStyle = {
@@ -51,7 +53,7 @@ export let matchCache: WeakMap<
 > = new WeakMap();
 
 export function SideBar(props: Props) {
-  const { isSidebarOpen } = props;
+  const { isSidebarOpen, beforeSidebar, afterSidebar } = props;
   const { items: rawSidebarData } = useSidebarData();
   const localesData = useLocaleSiteData();
   const { pathname: rawPathname } = useLocation();
@@ -135,7 +137,6 @@ export function SideBar(props: Props) {
           <NavBarTitle />
         </div>
       )}
-
       <div className={`mt-1 ${styles.sidebarContent}`}>
         <div
           className="rspress-scrollbar"
@@ -145,6 +146,7 @@ export function SideBar(props: Props) {
           }}
         >
           <nav className="pb-2">
+            {beforeSidebar}
             {sidebarData.map(
               (
                 item: NormalizedSidebarGroup | ISidebarItem | ISidebarDivider,
@@ -174,6 +176,7 @@ export function SideBar(props: Props) {
                   />
                 ),
             )}
+            {afterSidebar}
           </nav>
         </div>
       </div>

diff --git a/packages/theme-default/src/layout/DocLayout/index.tsx b/packages/theme-default/src/layout/DocLayout/index.tsx
@@ -12,6 +12,8 @@ import { QueryStatus } from '../Layout';
 import styles from './index.module.scss';
 
 export interface DocLayoutProps {
+  beforeSidebar?: React.ReactNode;
+  afterSidebar?: React.ReactNode;
   beforeDocFooter?: React.ReactNode;
   beforeDoc?: React.ReactNode;
   afterDoc?: React.ReactNode;
@@ -20,8 +22,15 @@ export interface DocLayoutProps {
 }
 
 export function DocLayout(props: DocLayoutProps) {
-  const { beforeDocFooter, beforeDoc, afterDoc, beforeOutline, afterOutline } =
-    props;
+  const {
+    beforeDocFooter,
+    beforeDoc,
+    afterDoc,
+    beforeOutline,
+    afterOutline,
+    beforeSidebar,
+    afterSidebar,
+  } = props;
   const { siteData, page } = usePageData();
   const { toc = [], frontmatter } = page;
   const [tabData, setTabData] = useState({});
@@ -82,7 +91,9 @@ export function DocLayout(props: DocLayoutProps) {
       }}
     >
       {beforeDoc}
-      {hasSidebar ? <SideMenu /> : null}
+      {hasSidebar ? (
+        <SideMenu beforeSidebar={beforeSidebar} afterSidebar={afterSidebar} />
+      ) : null}
       <div
         className={`${styles.content} rspress-doc-container flex flex-shrink-0 mx-auto`}
       >

diff --git a/packages/theme-default/src/layout/Layout/index.tsx b/packages/theme-default/src/layout/Layout/index.tsx
@@ -28,6 +28,8 @@ export const Layout: React.FC<LayoutProps> = props => {
     beforeDocFooter,
     beforeDoc,
     afterDoc,
+    beforeSidebar,
+    afterSidebar,
     beforeOutline,
     afterOutline,
     beforeNavTitle,
@@ -42,6 +44,8 @@ export const Layout: React.FC<LayoutProps> = props => {
     beforeDocFooter,
     beforeDoc,
     afterDoc,
+    beforeSidebar,
+    afterSidebar,
     beforeOutline,
     afterOutline,
   };