feat(new-styling): 💄 update sidebar styling and remove toc

bcamarneiro · bcamarneiro · commit 17fffb8f3e18 · 2024-10-13T17:38:06.000+02:00
diff --git a/docs/Open-source/code-of-conduct.md b/docs/Open-source/code-of-conduct.md
@@ -10,6 +10,7 @@ tags:
 - pledge
 - contribute
 - code of conduct
+hide_table_of_contents: true
 ---
 
 
diff --git a/docs/Open-source/contributing.md b/docs/Open-source/contributing.md
@@ -10,6 +10,7 @@ tags:
 - repository
 - contribute
 - open source
+hide_table_of_contents: true
 ---
 
 # Contributing to Lightning
diff --git a/docs/Open-source/repositories.md b/docs/Open-source/repositories.md
@@ -8,6 +8,7 @@ category: Documentation
 keywords: [repositories]
 tags:
 - repository
+hide_table_of_contents: true
 ---
 
 The Fleek Network's repositories contain a collection of source code, libraries, and other software artifacts that are used to build and maintain our products collaboratively.
diff --git a/docs/index.md b/docs/index.md
@@ -8,6 +8,7 @@ date: 2023-08-15T09:00:00.000+00:00
 description: Welcome to the documentation site for Fleek Network, the decentralized content and application layer built on established decentralized storage protocols combined with high-speed caching and an effective delivery layer.
 category: Documentation
 keywords: [introduction, documentation, getting started]
+hide_table_of_contents: true
 tags:
 - Edge Platform
 - Guide
diff --git a/docs/learn/delivery-acknowledgements.md b/docs/learn/delivery-acknowledgements.md
@@ -6,6 +6,7 @@ description: Dive into Fleek Network's Delivery Acknowledgements, immutable proo
 tags:
   - snarks
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/learn/developers.md b/docs/learn/developers.md
@@ -12,6 +12,7 @@ tags:
 - Guide
 - Learn
 - Fleek Network
+hide_table_of_contents: true
 ---
 
 :::info
diff --git a/docs/learn/index.md b/docs/learn/index.md
@@ -8,6 +8,7 @@ tags:
   - learn
   - fleek network
   - whitepaper
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/learn/services.md b/docs/learn/services.md
@@ -16,6 +16,7 @@ tags:
 - develop
 - sdk
 - toolkit
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/learn/the-network.md b/docs/learn/the-network.md
@@ -15,6 +15,7 @@ tags:
   - reputation
   - ports
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/learn/token-and-economics.md b/docs/learn/token-and-economics.md
@@ -12,6 +12,7 @@ tags:
   - incentives
 sidebarCollapsible: false
 sidebar_position: 1
+hide_table_of_contents: true
 ---
 
 ## Overview
diff --git a/docs/node/analyzing-logs.md b/docs/node/analyzing-logs.md
@@ -5,6 +5,7 @@ hide_title: true
 tags:
   - logs
   - diagnostic
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/configuration.md b/docs/node/configuration.md
@@ -3,6 +3,7 @@ title: Configuration
 tags:
   - Configuration
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 TODO: Configuration
diff --git a/docs/node/diagnostics.md b/docs/node/diagnostics.md
@@ -3,6 +3,7 @@ title: Diagnostics
 tags:
   - Diagnostics
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 TODO: Diagnostics
diff --git a/docs/node/health-check.md b/docs/node/health-check.md
@@ -6,6 +6,7 @@ tags:
   - healthcheck
   - verification
   - node status
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/index.md b/docs/node/index.md
@@ -5,6 +5,7 @@ hide_title: true
 description: Learn about server requirements, installation, configuration, and more. Become a Node Operator and contribute to the network's growth.  
 tags:
   - build
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/install.md b/docs/node/install.md
@@ -16,6 +16,7 @@ tags:
 - build
 - wizard
 - manual
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/lightning-cli.md b/docs/node/lightning-cli.md
@@ -7,6 +7,7 @@ tags:
   - cli
   - lightning
   - lgtn
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/requirements.md b/docs/node/requirements.md
@@ -6,6 +6,7 @@ tags:
   - requirements
   - server
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/systemd-service.md b/docs/node/systemd-service.md
@@ -7,6 +7,7 @@ tags:
   - systemctl
   - control
   - manage
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/node/testnet-onboarding.md b/docs/node/testnet-onboarding.md
@@ -9,6 +9,7 @@ tags:
   - phases
   - getting started
 sidebarCollapsible: false
+hide_table_of_contents: true
 ---
 
 import Author from '@site/src/components/Author';
diff --git a/docs/roadmap.md b/docs/roadmap.md
@@ -8,6 +8,7 @@ keywords: [roadmap]
 tags:
 - Roadmap
 - Fleek Network
+hide_table_of_contents: true
 ---
 
 ## Introduction
diff --git a/docs/whitepaper.md b/docs/whitepaper.md
@@ -11,6 +11,7 @@ tags:
 - CDN
 - Fleek Network
 - Whitepaper
+hide_table_of_contents: true
 ---
 
 This section provides in-depth documentation and materials about the Fleek Network technology stack.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -36,7 +36,7 @@ const commonNavbarItems = [{
   target: '_blank',
 },
 {
-  to: 'docs',
+  href: commonHome,
   label: 'Resources',
   position: 'left',
 }];
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -21,7 +21,6 @@
   --ifm-font-family-base: 'IBM Plex Mono', sans-serif;  /* Set the default font to IBM Plex Sans */
   --ifm-color-primary: #000;
   --ifm-color-primary-dark: #000033;
-  --ifm-color-primary-darker: #001ac9;
   --ifm-color-primary-darkest: #0048f8;
   --ifm-color-primary-light: #0073ff;
   --ifm-color-primary-lighter: #98beff;
@@ -36,8 +35,13 @@
   
   --ifm-navbar-background-color: var(--background-color);
   --ifm-navbar-link-color: var(--text-color);
-  --ifm-navbar-link-hover-color: var(--link-active)
-  ;
+  --ifm-navbar-link-hover-color: var(--link-active);
+
+  --ifm-menu-color: var(--text-color);
+  --sidebar-menu-item_border: #d9d9d9;
+  
+  --ifm-color-primary-darker: var(--link-active);
+  
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -48,19 +52,17 @@ h1, h2, h3, h4, h5, h6 {
 [data-theme='dark'] {
   --ifm-color-primary: #fff;
   --ifm-color-primary-dark: #98beff;
-  --ifm-color-primary-darker: #C9FF57;
   --ifm-color-primary-darkest: #0048f8;
   --ifm-color-primary-light: #001ac9;
   --ifm-color-primary-lighter: #000033;
   --ifm-color-primary-lightest: #000;
   --ifm-menu-color-background-active: rgba(255, 255, 255, 0.1);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  
-  --ifm-menu-color: #888;
 }
 
 @import url('../theme/Navbar/styles.css');
 @import url('../components/Author/styles.css');
+@import url('./sidebar.css');
 
 :root {
   --docsearch-modal-background: #000 !important;
@@ -126,9 +128,6 @@ div[class*="docItemContainer"] {
 }
 
 @media (min-width: 996px) {
-  [class^="sidebar_"] .menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
-    padding: 1rem 0;
-  }
   .footer .container {
     padding: 0;
   }
@@ -142,33 +141,6 @@ div[class*="docItemContainer"] {
   width: 100%;
 }
 
-.menu .menu__list {
-  padding-right: 2rem;
-}
-
-nav > .menu__list {
-  padding-bottom: 4rem;
-}
-
-.menu .menu__list a::first-letter {
-  text-transform: capitalize;
-}
-
-.menu__link--active:not(.menu__link--sublist) {
-  background-color: transparent;
-}
-
-.menu__link {
-  padding: var(--ifm-menu-link-padding-vertical) 0;
-}
-
-.menu__link {
-  color: var(--ifm-menu-color);
-}
-
-.menu__link--active {
-  color: var(--ifm-color-primary);
-}
 
 .DocSearch-Button-Container svg,
 .DocSearch-Form .DocSearch-LoadingIndicator svg,
@@ -282,7 +254,10 @@ article h1,
   aspect-ratio: 16 / 9;
 }
 
-
 .container .banner {
   margin-bottom: 1rem;
+}
+
+aside.theme-doc-sidebar-container {
+  border-right: none;
 }
diff --git a/src/css/sidebar.css b/src/css/sidebar.css
@@ -0,0 +1,61 @@
+@media (min-width: 996px) {
+    [class^="sidebar_"] .menu_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-Content-styles-module {
+        padding: 1rem 0;
+    }
+}
+
+
+.menu .menu__list {
+    padding-right: 2rem;
+}
+
+nav>.menu__list {
+    padding-bottom: 4rem;
+}
+
+.menu .menu__list a::first-letter {
+    text-transform: capitalize;
+}
+
+.menu__link--active:not(.menu__link--sublist) {
+    background-color: transparent;
+}
+
+.menu__link {
+    padding: var(--ifm-menu-link-padding-vertical) 0;
+    font-weight: 300;
+    border-bottom: 1px solid var(--sidebar-menu-item_border);
+    border-radius: 0;
+}
+
+.menu__link--active, .menu__link--active:hover {
+    color: var(--link-active);
+    border-color: var(--link-active);
+}
+
+.theme-doc-sidebar-item-category {
+    position: relative;
+
+    .menu__list {
+        padding-right: 0;
+        padding-left: 0;
+
+        .menu__link {
+            padding-right: 2rem;
+            padding-left: 2rem;
+        }
+    }
+}
+
+.theme-doc-sidebar-item-category::after {
+    content: url("../../static/img/chevron-down.svg");
+    position: absolute;
+    top: 5px;
+    right: 0;
+    transform: rotate(180deg);
+}
+
+.menu__list-item--collapsed.theme-doc-sidebar-item-category::after {
+    top: 0;
+    transform: rotate(0deg);
+} 
diff --git a/static/img/chevron-down.svg b/static/img/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.00471 0.567211C1.26099 0.31093 1.67651 0.31093 1.93279 0.567211L5.40625 4.04067L8.87971 0.567211C9.13599 0.31093 9.55151 0.31093 9.80779 0.567211C10.0641 0.823493 10.0641 1.23901 9.80779 1.49529L5.87029 5.43279C5.61401 5.68907 5.19849 5.68907 4.94221 5.43279L1.00471 1.49529C0.74843 1.23901 0.74843 0.823493 1.00471 0.567211Z" fill="#202020"/>
+</svg>
