♻️ update sidebar style (#1790)

* ♻️ update sidebar style * remove breadcrumb from sidebar --------- Co-authored-by: Nick DeJesus <[email protected]>
TBD54566975 · Oct 5, 2024 · 04f9aff · 04f9aff
1 parent 426bacf
commit 04f9aff
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 123 deletions.
diff --git a/site-new/sidebars.ts b/site-new/sidebars.ts
@@ -62,12 +62,12 @@ const sidebars: SidebarsConfig = {
       type: "doc",
       id: "web5-sdk/index",
       label: "Getting Started",
+      className: "sidenav-list-header",
       customProps: { sidebarHeader: "Web5 SDK" },
     },
     {
       type: "html",
       value: "components",
-      className: "category-label",
     },
     {
       type: "autogenerated",
@@ -80,12 +80,12 @@ const sidebars: SidebarsConfig = {
       id: "tbdex-sdk/index",
       type: "doc",
       label: "Getting Started",
+      className: "sidenav-list-header",
       customProps: { sidebarHeader: "tbdex SDK" },
     },
     {
       type: "html",
       value: "components",
-      className: "category-label",
     },
     { type: "autogenerated", dirName: "tbdex-sdk" },
   ],

diff --git a/site-new/src/css/custom.css b/site-new/src/css/custom.css
@@ -73,6 +73,7 @@
 	--ifm-font-color-base: #fff;
 	--ifm-menu-link-sublist-icon: url("/img/chevron.svg");
 	--ifm-footer-background-color: var(--ifm-color-primary);
+	--ifm-menu-link-padding-horizontal: var(--twist-core-spacing-12)
 }
 
 h2 {
@@ -130,50 +131,22 @@ h2 {
 	padding-left: 0;
 }
 
-.theme-doc-sidebar-item-link-level-1 a {
-	padding-left: 1.5rem;
-}
 
-.theme-doc-sidebar-item-link-level-2 a {
-	padding-left: 4.5rem;
-}
 
-.theme-doc-sidebar-item-link-level-3 a {
-	padding-left: 4.5rem;
-}
-
-.theme-doc-sidebar-item-link-level-4 {
-	padding-left: 0;
-}
-
-.theme-doc-sidebar-item-link-level-4 a {
-	padding-left: 4.5rem;
-}
 
 /* Category Indentations */
 
-.category-label {
-	font-family: "Basis";
-	opacity: 60%;
-	padding-left: 36px;
-	padding-top: 24px;
-	padding-bottom: 24px;
-	font-size: 12px;
-	font-weight: 400;
-	margin-top: 12px;
-	border-top: 1px solid rgba(0, 0, 0, 0.2);
-	line-height: 14.4px;
-	text-transform: uppercase;
-}
-
 .menu__list-item-collapsible {
 	border-radius: 0;
 }
 
 .theme-doc-sidebar-item-category-level-2 .menu__list-item-collapsible a {
-	padding-left: 2rem;
+	padding-left: calc(var(--ifm-menu-link-padding-horizontal) * 2);
 }
 
+
+
+
 .theme-doc-sidebar-item-category-level-3 .menu__list-item-collapsible button {
 	padding-left: 3.5rem;
 }
@@ -674,12 +647,29 @@ a:has(.footer__logo) {
 	p {
 		@apply p;
 	}
+
+
 }
 
+.sidenav-list-header {
+	@apply block border-b-[1px] border-solid border-black/20 py-twist-core-spacing-8 border-0
+}
+
+
+
+
 .tbd-underline {
 	height: calc(7.333333333333333px + (14.666666666666666 - 7.333333333333333) * ((100vw - 960px) / (1920 - 960)));
 
 	width: calc(199px + (398 - 199) * ((100vw - 960px) / (1920 - 960)));
 	margin-top: calc(12px + (24 - 12) * ((100vw - 960px) / (1920 - 960)));
 	display: block;
+}
+
+.theme-doc-sidebar-item-link-level-2.menu__list-item .menu__link {
+	padding-left: calc(calc(var(--ifm-menu-link-padding-horizontal) * 2) + 4px);
+}
+
+.theme-doc-sidebar-item-link-level-3.menu__list-item .menu__link {
+	padding-left: calc(calc(var(--ifm-menu-link-padding-horizontal) * 3) + 4px);
 }
diff --git a/site-new/src/theme/DocBreadcrumbs/index.tsx b/site-new/src/theme/DocBreadcrumbs/index.tsx
@@ -1,13 +1,14 @@
-import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useSidebarBreadcrumbs} from '@docusaurus/plugin-content-docs/client';
-import {useHomePageRoute} from '@docusaurus/theme-common/internal';
-import Link from '@docusaurus/Link';
-import {translate} from '@docusaurus/Translate';
-import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home';
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+import { ThemeClassNames } from "@docusaurus/theme-common";
+import { useSidebarBreadcrumbs } from "@docusaurus/plugin-content-docs/client";
+import { useHomePageRoute } from "@docusaurus/theme-common/internal";
+import Link from "@docusaurus/Link";
+import { translate } from "@docusaurus/Translate";
+import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home";
 
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
+import { cn } from "@site/lib/utils";
 
 // TODO move to design system folder
 function BreadcrumbsItemLink({
@@ -19,7 +20,7 @@ function BreadcrumbsItemLink({
   href: string | undefined;
   isLast: boolean;
 }): JSX.Element {
-  const className = 'breadcrumbs__link';
+  const className = "breadcrumbs__link";
   if (isLast) {
     return (
       <span className={className} itemProp="name">
@@ -57,12 +58,13 @@ function BreadcrumbsItem({
     <li
       {...(addMicrodata && {
         itemScope: true,
-        itemProp: 'itemListElement',
-        itemType: 'https://schema.org/ListItem',
+        itemProp: "itemListElement",
+        itemType: "https://schema.org/ListItem",
       })}
-      className={clsx('breadcrumbs__item', {
-        'breadcrumbs__item--active': active,
-      })}>
+      className={clsx("breadcrumbs__item", {
+        "breadcrumbs__item--active": active,
+      })}
+    >
       {children}
       <meta itemProp="position" content={String(index + 1)} />
     </li>
@@ -79,32 +81,36 @@ export default function DocBreadcrumbs(): JSX.Element | null {
 
   return (
     <nav
-      className={clsx(
+      className={cn(
         ThemeClassNames.docs.docBreadcrumbs,
         styles.breadcrumbsContainer,
+        "!mb-0",
       )}
       aria-label={translate({
-        id: 'theme.docs.breadcrumbs.navAriaLabel',
-        message: 'Breadcrumbs',
-        description: 'The ARIA label for the breadcrumbs',
-      })}>
+        id: "theme.docs.breadcrumbs.navAriaLabel",
+        message: "Breadcrumbs",
+        description: "The ARIA label for the breadcrumbs",
+      })}
+    >
       <ul
         className="breadcrumbs"
         itemScope
-        itemType="https://schema.org/BreadcrumbList">
+        itemType="https://schema.org/BreadcrumbList"
+      >
         {homePageRoute && <HomeBreadcrumbItem />}
         {breadcrumbs.map((item, idx) => {
           const isLast = idx === breadcrumbs.length - 1;
           const href =
-            item.type === 'category' && item.linkUnlisted
+            item.type === "category" && item.linkUnlisted
               ? undefined
               : item.href;
           return (
             <BreadcrumbsItem
               key={idx}
               active={isLast}
               index={idx}
-              addMicrodata={!!href}>
+              addMicrodata={!!href}
+            >
               <BreadcrumbsItemLink href={href} isLast={isLast}>
                 {item.label}
               </BreadcrumbsItemLink>

diff --git a/site-new/src/theme/DocSidebar/Desktop/Content/index.tsx b/site-new/src/theme/DocSidebar/Desktop/Content/index.tsx
@@ -11,6 +11,7 @@ import type { Props } from "@theme/DocSidebar/Desktop/Content";
 import Background from "@site/src/components/Background";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import DocBreadcrumbsWrapper from "@site/src/theme/DocBreadcrumbs";
+import Heading from "@theme/Heading";
 
 import styles from "./styles.module.css";
 
@@ -36,7 +37,7 @@ export default function DocSidebarDesktopContent({
 }: Props): JSX.Element {
   const showAnnouncementBar = useShowAnnouncementBar();
 
-  const sidebarHeader = sidebar[0].customProps.sidebarHeader;
+  const sidebarHeader = sidebar[0].customProps.sidebarHeader as string;
 
   return (
     <nav
@@ -56,10 +57,12 @@ export default function DocSidebarDesktopContent({
       <Background
         bgColor="yellow"
         squareCount={5}
-        className={"mb-8 h-52 w-64 py-2 pl-4"}
+        className={"center grid h-[105px] items-center px-twist-core-spacing-8"}
       >
-        <DocBreadcrumbsWrapper />
-        <h4 className="text-dark-grey">{sidebarHeader}</h4>
+        {/* <DocBreadcrumbsWrapper /> */}
+        <Heading as="h4" className="my-0 text-dark-grey">
+          {sidebarHeader}
+        </Heading>
       </Background>
       <ul
         className={clsx(