feat: docs sidebar redesign

docusaurus.config.ts

@@ -141,6 +141,11 @@ export default {
         {to: "/docs", label: "Docs", position: "left"},
         {to: "/graphql", label: "Learn", position: "left"},
         {to: "/blog", label: "Blog", position: "left"},
+        {
+          type: "search",
+          position: "right",
+          className: "hidden lg:flex search-icon-navbar",
+        },
         {
           href: "https://discord.gg/kRZBPpkgwq",
           position: "right",

graphql/sidebar.ts

@@ -5,11 +5,13 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Guides",
+      collapsed: false,
       items: ["graphql", "graphql-vs-rest", "graphql-react-client", "cto-guide", "problem-statement"],
     },
     {
       type: "category",
       label: "GraphQL Tutorial",
+      collapsed: false,
       items: [
         "what-is-graphql",
         "schema-and-types",

sidebars.ts

@@ -17,6 +17,7 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Usage",
+      collapsed: false,
       items: [
         "getting-started",
         "cli",
@@ -31,6 +32,7 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Features",
+      collapsed: false,
       items: [
         "N+1",
         "auth",
@@ -51,16 +53,19 @@ const sidebars: SidebarsConfig = {
     {
       type: "category",
       label: "Integrations",
+      collapsed: false,
       items: ["apollo-studio", "data-dog", "new-relic", "honey-comb", "llm"],
     },
     {
       type: "category",
       label: "Production",
+      collapsed: false,
       items: ["gh-action", "tailcall-on-fly", "tailcall-on-aws", "client-tuning"],
     },
     {
       type: "category",
       label: "Contributors",
+      collapsed: false,
       items: [
         "contributors/guidelines",
         "contributors/bounty",

src/css/custom.css

@@ -41,7 +41,7 @@
   --ifm-grid-bg-size-lg: 3.25rem;
   --ifm-grid-bg-size-md: 2.5rem;
   --ifm-grid-bg-size-sm: 1.25rem;
-  --ifm-list-item-link: 1.5rem;
+  --ifm-list-item-link: 1rem;
   --ifm-navbar-font-size: 1.25rem;
   --ifm-content-link-font-size: 0.875rem;
   --ifm-search-input-font-size: 0.9rem;
@@ -117,7 +117,7 @@ input[type="radio"]:checked::before {
 
 .theme-doc-sidebar-item-link .menu__link.menu__link--active:after {
   content: "";
-  display: block;
+  display: none;
   background: url("../../static/icons/basic/chevron-right.svg") no-repeat;
   width: 1rem;
   margin-right: 1rem;
@@ -131,8 +131,9 @@ input[type="radio"]:checked::before {
   font-weight: var(--ifm-font-weight-bold);
 }
 
-.menu__list {
-  padding-right: 1rem;
+.theme-doc-sidebar-menu {
+  padding-right: 0.75rem;
+  padding-left: 1rem;
 }
 .benefits-drop-shadow:hover {
   box-shadow: 0px 14px 24px 0px rgba(250, 234, 90, 0.1);
@@ -141,31 +142,54 @@ input[type="radio"]:checked::before {
   background: transparent;
 }
 
-.menu__list-item-collapsible a {
+.menu__list-item-collapsible a,
+.theme-doc-sidebar-item-link-level-1 a {
+  padding: 0.5rem;
   font-size: var(--ifm-list-item-link);
-  font-weight: var(--ifm-font-weight-bold);
+  font-weight: var(--ifm-font-weight-semibold);
+}
+
+.theme-doc-sidebar-item-link-level-1 {
+  margin-top: 1rem !important;
+}
+
+.menu__list .menu__list {
+  padding-left: 0rem;
+  margin-left: 1rem;
+  border-left: 1px solid var(--ifm-toc-border-color);
 }
 
 .menu__link {
-  height: 2.5rem;
+  height: 2.125rem;
   display: flex;
   align-items: center;
   color: var(--ifm-color-gray-900);
-  border-radius: 8px;
+  border-radius: 0;
+  font-size: 0.875rem;
+  font-weight: var(--ifm-font-weight-normal);
 }
 
 .menu__link.menu__link--active {
-  background-color: var(--ifm-color-brand);
+  background-color: transparent;
   color: var(--ifm-color-gray-900);
-  font-weight: var(--ifm-font-weight-bold);
+  font-weight: var(--ifm-font-weight-semibold);
+  box-shadow: inset 2px 0 0 0 var(--ifm-color-brand);
+}
+
+.menu__list-item-collapsible a {
+  box-shadow: none !important;
+}
+
+.menu__list-item:not(:first-child) {
+  margin-top: 0;
 }
 
 .menu__link:hover {
   color: var(--ifm-color-gray-900);
 }
 
 .theme-doc-sidebar-item-category:not(:first-child) {
-  margin-top: 1.5rem;
+  margin-top: 1rem;
 }
 
 .theme-edit-this-page {
@@ -355,7 +379,7 @@ input[type="radio"]:checked::before {
 }
 
 .theme-doc-toc-desktop > .table-of-contents > li:has(a.table-of-contents__link--active) {
-  border-left: 2px solid #fdea2e;
+  border-left: 2px solid var(--ifm-color-brand);
 }
 
 .theme-doc-toc-desktop > .table-of-contents > li > li:has(a.table-of-contents__link--active) {
@@ -744,3 +768,12 @@ span.token.tag.script.language-javascript {
     border-right: 1px solid #e7e7e7;
   }
 }
+
+.menu__link--sublist-caret:after {
+  background: url("../../static/icons/basic/chevron-down.svg") no-repeat;
+}
+
+.menu__list-item--collapsed .menu__link--sublist:after,
+.menu__list-item--collapsed .menu__caret:before {
+  transform: rotateZ(360deg);
+}

src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -139,7 +139,6 @@ const CustomSearch = () => {
 const SidebarWrapper = (props: SidebarConfig) => {
   return (
     <div className="sidebar-search-container place-items-center flex flex-col lg:mb-[100px]">
-      <Search />
       <Sidebar {...props} />
     </div>
   )

src/theme/Navbar/Content/index.tsx

@@ -178,6 +178,11 @@ const NavbarContent = (): JSX.Element => {
 
   const items = useNavbarItems()
   const [leftItems, rightItems] = splitNavbarItems(items)
+
+  const getRightItemsWithoutSearch = (): NavbarItemConfig[] => {
+    return rightItems.filter((item) => item.type !== "search")
+  }
+
   const pageHasSearch = () => {
     let location = window.location.pathname.split("/")[1]
     let allowedPaths = ["docs", "graphql"]
@@ -201,7 +206,9 @@ const NavbarContent = (): JSX.Element => {
         // TODO stop hardcoding items? (added by docusaurus)
         // Render right navbar items
         <>
-          <NavbarItems items={rightItems} />
+          <NavbarItems
+            items={typeof window !== "undefined" && pageHasSearch() ? rightItems : getRightItemsWithoutSearch()}
+          />
           <GithubStarsButton className="navbar__item navbar__link" />
           <NavbarColorModeToggle className={styles.colorModeToggle} />
         </>

src/theme/SearchBar/styles.css

@@ -7,12 +7,13 @@
 
 .DocSearch-Button {
   margin: 0;
-  width: 85%;
-  margin: 10px;
+  /* width: 85%;
+  margin: 10px; 
   border: 1px solid black;
-  border-radius: 8px;
+  border-radius: 8px; */
+  box-shadow: none !important;
   background: transparent;
-  padding: 10px 8px;
+  padding: 0;
   height: 44px;
   cursor: text;
   transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default);
@@ -110,6 +111,7 @@
     width: fit-content;
     border: none;
     margin: 0;
+    padding: 10px 8px;
   }
 
   .DocSearch-Button-Keys {
@@ -181,20 +183,29 @@
   color: #858586;
 }
 
+.DocSearch-Button-Placeholder {
+  font-weight: 700;
+  font-size: 20px;
+  font-family: "Space Grotesk";
+  color: #121315;
+  padding-right: 0;
+  padding-left: 10px;
+}
+
 .DocSearch-Button-Placeholder {
   display: none;
 }
 
 @media only screen and (min-width: 996px) {
-  .DocSearch-Button {
+  /* .DocSearch-Button {
     padding-top: 1.3rem;
     padding-bottom: 1.3rem;
     padding-left: 0.6rem;
-    padding-right: 0.6rem;
+    padding-right: 0.6rem; 
     margin-top: 1.3rem;
-    margin-bottom: 1.3rem;
-    border: 1px solid var(--ifm-color-gray-800);
-  }
+    margin-bottom: 1.3rem; 
+    border: 1px solid var(--ifm-color-gray-800); 
+  } */
   .DocSearch-Button-Placeholder {
     display: block;
   }
@@ -203,3 +214,22 @@
 .DocSearch-Button-Keys kbd.DocSearch-Button-Key:first-child {
   font-size: 16px;
 }
+
+.DocSearch-Button-Keys {
+  display: none;
+}
+
+.search-icon-navbar {
+  padding: 0 !important;
+}
+
+.DocSearch-Search-Icon {
+  cursor: pointer;
+  stroke-width: 2px;
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1150px) {
+  .DocSearch-Button-Placeholder {
+    display: none;
+  }
+}