docs: update nav bar (#6045)

Update the Unleash docs navbar according to the new spec: Changing "estimated time burden" to "estimated time" (or "estimated reading time"), is just a matter of changing the text in the files. There's nothing special making it say burden other than plain text. That can be done in a follow-up PR. The new nav bar includes the Unleash academy and certification dropdowns as well as the docs and quickstart items. On smaller screen sizes (between 997 and 1150 px), we hide the word "Unleash" from "Unleash academy" and "Unleash certification". The narrowest nav bar: ![image](https://github.com/Unleash/unleash/assets/17786332/13d05b0b-8668-4ff0-b06e-5c3073f0dda8) When Unleash pops back in: ![image](https://github.com/Unleash/unleash/assets/17786332/191ae3fe-5fca-4464-b79a-db6995e600c9) --------- Co-authored-by: markunl <[email protected]>
Unleash · Jan 29, 2024 · 6f4f866 · 6f4f866 · vercel · Jan 29, 2024
1 parent 1d5d7ee
commit 6f4f866
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 8 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -65,16 +65,85 @@ module.exports = {
             indexName: 'getunleash',
         },
         navbar: {
-            title: 'Unleash',
             logo: {
                 alt: 'Unleash logo',
-                src: 'img/logo.svg',
+                src: 'img/unleash_logo_white.svg',
             },
             items: [
+                {
+                    type: 'doc',
+                    position: 'right',
+                    docId: 'quickstart',
+                    label: 'Quickstart',
+                },
+                {
+                    type: 'doc',
+                    position: 'right',
+                    docId: 'welcome',
+                    label: 'Docs',
+                },
+                {
+                    type: 'dropdown',
+                    position: 'right',
+                    html: '<span class="hide-at-small-sizes">Unleash </span>Academy',
+                    to: 'unleash-academy/introduction',
+                    items: [
+                        {
+                            type: 'doc',
+                            docId: 'unleash-academy/foundational',
+                            label: 'Foundational',
+                        },
+                        {
+                            type: 'doc',
+                            docId: 'unleash-academy/advanced-for-devs',
+                            label: 'Advanced for Developers',
+                        },
+                        {
+                            type: 'doc',
+                            docId: 'unleash-academy/managing-unleash-for-devops',
+                            label: 'Managing Unleash for DevOps/Admins'
+                        },
+                    ],
+                },
+
+                {
+                    type: 'dropdown',
+                    position: 'right',
+                    html: '<span class="hide-at-small-sizes">Unleash </span>Certification',
+                    items: [
+                        {
+                          label: 'Foundational Unleash',
+                          href: 'https://docs.google.com/forms/d/1iPUk2I0k5xMzicn9aLMcPF3b9ub3ZwdVjRxCxWxV7js/viewform',
+                        },
+                        {
+                          label: 'Advanced Unleash for Developers',
+                          href: 'https://docs.google.com/forms/d/1NUL9hyO8Ys916TB6fPV3-jkvD97OmPXZ8_TO84Wjqgc/viewform',
+                        },
+                        {
+                          label: 'Managing Unleash for DevOps/Admins',
+                          href: 'https://docs.google.com/forms/d/1JlIqmXI3P7dj0n-OiUs2IYsYXgmqw23BChaemlSgHJA/viewform',
+                        },                     
+                  ],
+                },
+                {
+                    type: 'html',
+                    position: 'right',
+                    value: '<span class="navbar-separator"></span>',
+                },
                 {
                     href: 'https://www.getunleash.io/plans',
-                    label: 'Unleash Enterprise',
+                    label: 'Plans',
+                    position: 'right',
+                },
+                {
+                    href: 'https://app.unleash-hosted.com/sign-in',
+                    label: 'Sign in',
+                    position: 'right',
+                },
+                {
+                    type: 'html',
                     position: 'right',
+                    value: '<span class="navbar-separator"></span>',
                 },
                 {
                     href: 'https://github.com/Unleash/unleash',

diff --git a/website/sidebars.js b/website/sidebars.js
@@ -14,9 +14,7 @@
 
 
 module.exports = {
-    documentation: [
-        'welcome',
-        'quickstart',
+    academy: [
         {
             label: 'Unleash Academy',
             collapsed: true,
@@ -31,6 +29,10 @@ module.exports = {
                 'unleash-academy/managing-unleash-for-devops',
             ],
         },
+    ],
+    documentation: [
+        'welcome',
+        'quickstart',
         {
             label: 'Feature Flag Best Practices',
             collapsed: true,

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -9,12 +9,57 @@
 :root {
     --unleash-color-purple: #635dc5;
     --unleash-color-gray: #ecebeb;
+    --unleash-color-green: #1a4049;
 
     --ifm-code-font-size: 90%;
     --ifm-font-size-base: 15px;
     --navbar-link-color: #122d33;
 
     --unleash-font-size-smaller: 90%;
+
+    /* navbar is independent of the theme in general */
+    --ifm-navbar-background-color: var(--unleash-color-green);
+    /* this is the font color set on the content in dark mode */
+    --unleash-navbar-font-color: #e3e3e3;
+    --unleash-navbar-active-background-color: #122D33;
+    --ifm-navbar-link-color: var(--unleash-navbar-font-color);
+    --unleash-navbar-highlight-color: #bab8ff;
+    --ifm-navbar-link-active-color: var(--unleash-navbar-highlight-color);
+    --ifm-navbar-link-hover-color: var(--unleash-navbar-highlight-color);
+
+}
+
+.navbar {
+    color: var(--unleash-navbar-font-color);
+
+    /* this is the dark mode background github icon */
+    .header-github-link::before {
+	    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
+    }
+
+    button[class*='toggleButton_']:hover
+    {
+        background: var(--unleash-navbar-active-background-color);
+    }
+}
+
+.navbar-sidebar {
+    background-color: var(--ifm-navbar-background-color);
+    --ifm-menu-color: var(--ifm-navbar-link-color);
+    --ifm-menu-color-active: var(--ifm-navbar-link-active-color);
+    --ifm-menu-color-background-active: var(--unleash-navbar-active-background-color);
+    --ifm-menu-color-active: var(--ifm-navbar-link-active-color);
+    --ifm-menu-color-background-hover: var(--unleash-navbar-active-background-color);
+}
+
+.navbar__logo {
+    height: 3rem;
+}
+
+@media (width < 1150px) {
+    .navbar .hide-at-small-sizes {
+        display: none;
+    }
 }
 
 footer {
@@ -60,8 +105,6 @@ html[data-theme='dark'] {
         --ifm-color-secondary-contrast-background
     );
 
-    --unleash-img-background-color: #fff;
-
     --docsearch-primary-color: var(--ifm-color-primary-darkest);
 }
 
@@ -121,6 +164,14 @@ main :is(p, figure) > img:not([src^="https://img.shields.io/" i], [src*="badge.s
     display: none;
 }
 
+.navbar__item:has(.navbar-separator) {
+	width: 1px;
+	height: 100%;
+	background: white;
+	padding: 0;
+    margin-inline: var(--ifm-spacing-horizontal);
+}
+
 li.theme-doc-sidebar-item-category-level-1 > div::before {
     width: 0.3em;
     height: 100%;

diff --git a/website/static/img/unleash_logo_white.svg b/website/static/img/unleash_logo_white.svg