From 6f4f8661c7053baa58d5210cd4581947d06d377b Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 29 Jan 2024 22:30:18 +0400 Subject: [PATCH] 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 --- website/docusaurus.config.js | 77 +++++++++++++++++++++-- website/sidebars.js | 8 ++- website/src/css/custom.css | 55 +++++++++++++++- website/static/img/unleash_logo_white.svg | 1 + 4 files changed, 132 insertions(+), 9 deletions(-) create mode 100644 website/static/img/unleash_logo_white.svg diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 29de4cb924..607cd18116 100644 --- 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: [ { - href: 'https://www.getunleash.io/plans', - label: 'Unleash Enterprise', + type: 'doc', position: 'right', + docId: 'quickstart', + label: 'Quickstart', + }, + { + type: 'doc', + position: 'right', + docId: 'welcome', + label: 'Docs', + }, + { + type: 'dropdown', + position: 'right', + html: 'Unleash 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: 'Unleash 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: '', + }, + { + href: 'https://www.getunleash.io/plans', + label: 'Plans', + position: 'right', + }, + { + href: 'https://app.unleash-hosted.com/sign-in', + label: 'Sign in', + position: 'right', + }, + { + type: 'html', + position: 'right', + value: '', }, { href: 'https://github.com/Unleash/unleash', diff --git a/website/sidebars.js b/website/sidebars.js index 3874bd86c3..ad74e3982e 100644 --- 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 index c230c3401f..8c5089f1f8 100644 --- 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 new file mode 100644 index 0000000000..c051faf90a --- /dev/null +++ b/website/static/img/unleash_logo_white.svg @@ -0,0 +1 @@ + \ No newline at end of file