From 9646cfe4e6ec22b8a761458b2be4cd976c4f80e5 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 6 Feb 2024 11:51:40 +0900
Subject: [PATCH] docs: hide the quickstart and doc nav bar links when you're
 on the docs pages (#6126)

This change hides the quickstart and doc nav bar links when you're on
the docs pages.

This gets around the issue of both of those links being
highlighted when you're on the docs pages.

This should work on 91.66% of browsers (according to [canIUse's data for
the `:has` selector](https://caniuse.com/?search=%3Ahas)). For older
browsers, the links will still be visible.
---
 website/docusaurus.config.js | 6 +++---
 website/src/css/custom.css   | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 607cd18116..b2f00d3c48 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -74,13 +74,13 @@ module.exports = {
                     type: 'doc',
                     position: 'right',
                     docId: 'quickstart',
-                    label: 'Quickstart',
+                    html: '<span class="hide-when-active">Quickstart</span>',
                 },
                 {
                     type: 'doc',
                     position: 'right',
                     docId: 'welcome',
-                    label: 'Docs',
+                    html: '<span class="hide-when-active">Docs</span>',
                 },
                 {
                     type: 'dropdown',
@@ -122,7 +122,7 @@ module.exports = {
                         {
                           label: 'Managing Unleash for DevOps/Admins',
                           href: 'https://docs.google.com/forms/d/1JlIqmXI3P7dj0n-OiUs2IYsYXgmqw23BChaemlSgHJA/viewform',
-                        },                     
+                        },
                   ],
                 },
                 {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index ac60531c52..19dcb764af 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -34,6 +34,10 @@
     color: var(--unleash-navbar-font-color);
 }
 
+.navbar .navbar__link--active:has(.hide-when-active) {
+    display: none;
+}
+
 .navbar button[class*='toggleButton_']:hover
 {
     background: var(--unleash-navbar-active-background-color);