update Navigation styling, align more with react.dev (#4722)

Co-authored-by: Nicola Corti <[email protected]>

Author: Simek

website/src/css/customTheme.scss

@@ -16,10 +16,18 @@
   --subtle: #636363;
   --divider: #ececec;
   --tintColor: #f7f7f7;
+
+  --navbar-background: #111317ee;
+  --navbar-active-item-background: #61dafb11;
+
+  --doc-sidebar-width: 266px !important;
+  --docsearch-container-background: rgba(32, 35, 42, 0.6);
   --rn-note-background: rgba(255, 229, 100, 0.25);
+
   --ifm-font-family-base:
     "Optimistic Display", system-ui, -apple-system, sans-serif;
   --ifm-color-primary: #06bcee;
+  --ifm-code-background: rgba(0, 0, 0, 0.06);
   --ifm-font-size-base: 17px;
   --ifm-spacing-horizontal: 16px;
   --ifm-navbar-item-padding-horizontal: 18px;
@@ -97,29 +105,28 @@ body {
 }
 
 html[data-theme="light"] {
-  --ifm-code-background: rgba(0, 0, 0, 0.06);
-  --docsearch-container-background: rgba(32, 35, 42, 0.6);
   --ifm-link-color: #357da1;
 }
 
 html[data-theme="dark"] {
+  --subtle: #a7a7a7;
+
+  --navbar-background: #20232aee;
+
   --ifm-code-background: rgba(255, 255, 255, 0.06);
   --ifm-toc-border-color: var(--dark);
   --ifm-color-emphasis-300: var(--dark);
   --ifm-table-head-background: var(--deepdark);
-  --subtle: #a7a7a7;
   --ifm-table-head-color: var(--subtle);
 
-  *[class^="DocSearch"] {
-    --docsearch-searchbox-background: var(--ifm-background-color);
-    --docsearch-modal-background: var(--deepdark);
-    --docsearch-footer-background: var(--dark);
-    --docsearch-key-gradient: var(--deepdark);
-    --docsearch-key-shadow:
-      inset 0 -2px 0 0 var(--light), inset 0 0 1px 1px var(--light),
-      0 1px 2px 1px var(--ifm-table-border-color);
-    --docsearch-container-background: rgba(0, 0, 0, 0.6);
-  }
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-modal-background: var(--deepdark);
+  --docsearch-footer-background: var(--dark);
+  --docsearch-key-gradient: var(--deepdark);
+  --docsearch-key-shadow:
+    inset 0 -2px 0 0 var(--light), inset 0 0 1px 1px var(--light),
+    0 1px 2px 1px var(--ifm-table-border-color);
+  --docsearch-container-background: rgba(0, 0, 0, 0.6);
 
   --logo: #58c4dc;
   --home-hero-floor-background: #151517;
@@ -165,10 +172,6 @@ html[data-theme="dark"] {
   }
 }
 
-:root {
-  --doc-sidebar-width: 266px !important;
-}
-
 ::marker {
   color: var(--ifm-font-color-secondary);
 }
@@ -241,6 +244,13 @@ div[class^="generatedIndexPage"] {
     max-width: 100%;
     width: 100%;
   }
+
+  .navbar__inner {
+    max-width: 100% !important;
+    width: 100%;
+    padding: var(--ifm-navbar-padding-vertical)
+      var(--ifm-navbar-padding-horizontal);
+  }
 }
 
 @media (max-width: 1320px) and (min-width: 997px) {
@@ -660,13 +670,20 @@ a[class*="tagRegular"] {
 /* Navbar */
 
 .navbar {
+  padding: 0;
+
   &.navbar--dark {
-    background-color: var(--deepdark);
+    background-color: var(--navbar-background);
   }
 
   .navbar__inner {
     max-width: 1360px;
     margin: 0 auto;
+    backdrop-filter: blur(12px);
+
+    &.navbar-sidebar--show {
+      backdrop-filter: none;
+    }
   }
 
   .navbar__title {
@@ -678,7 +695,51 @@ a[class*="tagRegular"] {
     color: var(--brand);
   }
 
+  .navbar__link {
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+
+    &:hover {
+      color: #fff;
+      background-color: var(--dark);
+    }
+  }
+
+  .navbar__link--active {
+    background-color: var(--navbar-active-item-background);
+
+    &:hover {
+      color: var(--brand);
+      background-color: var(--navbar-active-item-background);
+    }
+  }
+
+  .navbar-github-link,
+  button[class*="toggleButton"] {
+    transition: scale 0.2s;
+
+    &:hover {
+      background-color: var(--dark);
+    }
+
+    &:active {
+      scale: 0.95;
+    }
+  }
+
   .navbar__item {
+    border-radius: 32px;
+    padding-inline: 12px;
+    cursor: pointer;
+    transition-property: scale;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.15s;
+
+    &:active {
+      scale: 0.97;
+    }
+
     &.navbar__link {
       font-weight: 400;
       font-size: 17px;
@@ -690,24 +751,35 @@ a[class*="tagRegular"] {
         font-weight: 400;
         font-size: 14px;
       }
-      ul {
-        /* Control navbar dropdown alignment */
-        top: calc(100% + 0px);
-        left: 0;
-      }
     }
 
     &.dropdown--right {
       .dropdown__menu {
-        min-width: 168px;
+        min-width: 158px;
       }
     }
   }
 
-  .dropdown > .navbar__link:after {
-    margin-left: 8px;
-    top: 1px;
-    opacity: 0.75;
+  .dropdown {
+    &.navbar__item:active {
+      scale: none;
+    }
+
+    .navbar__link {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    & > .navbar__link:after {
+      margin-left: 8px;
+      top: 1px;
+      opacity: 0.75;
+    }
+
+    &:hover > .navbar__link:after {
+      color: var(--brand);
+    }
   }
 
   .navbar__logo {
@@ -721,27 +793,34 @@ a[class*="tagRegular"] {
   }
 
   .DocSearch-Button {
-    border-radius: var(--ifm-global-radius);
-    padding: 0 6px 0 10px;
+    border-radius: 32px;
+    border: 1px solid var(--light);
+    padding: 0 8px 0 12px;
     font-family: var(--ifm-font-family-base);
 
     .DocSearch-Search-Icon {
       width: 16px;
       margin-top: -1px;
+      color: var(--docsearch-muted-color);
+    }
+
+    .DocSearch-Button-Key--pressed {
+      box-shadow: var(--docsearch-key-shadow);
+      transform: none;
     }
   }
 
-  .DocSearch-Button-Placeholder,
-  .DocSearch-Button-Key {
-    font-size: 14px !important;
+  .DocSearch-Button-Placeholder {
+    font-size: 14px;
   }
 
   .DocSearch-Button-Key {
-    padding-bottom: 0 !important;
+    font-size: 12px;
+    font-weight: 600;
   }
 
-  .DocSearch-Button-Key svg {
-    margin-bottom: 1px !important;
+  .DocSearch-Button-Keys {
+    margin-top: 1px;
   }
 
   .dropdown__menu {
@@ -752,45 +831,45 @@ a[class*="tagRegular"] {
     }
   }
 
+  .navbar__items {
+    gap: 8px;
+  }
+
   .navbar__items div[class^="navbarSearchContainer"] {
-    padding-left: 14px;
+    padding-left: 6px;
   }
 
   .navbar-github-link {
+    display: flex;
+    height: 36px;
+    width: 36px;
+    padding: 0;
+    align-items: center;
+    justify-content: center;
+
     &:after {
       transition: opacity 0.2s;
       content: "";
-      width: 24px;
-      height: 24px;
+      width: 20px;
+      height: 20px;
       display: flex;
       background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' 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");
       background-repeat: no-repeat;
       background-position: center;
     }
-
-    &:hover:after {
-      opacity: 0.5;
-    }
-  }
-
-  .navbar__link--active:after {
-    content: "";
-    display: flex;
-    width: calc(100% + 40px);
-    height: 4px;
-    margin-top: -4px;
-    margin-left: -20px;
-    margin-right: -20px;
-    position: relative;
-    top: 18px;
-    background: var(--brand);
   }
 
   .navbar-sidebar__back:hover {
     background: var(--ifm-code-background);
   }
 }
 
+html[data-theme="dark"] {
+  .navbar-sidebar {
+    background: var(--ifm-background-color);
+  }
+}
+
 /*
 Config has themeConfig.navbar.style === "dark"
 But the navbar sidebar should still support light theme
@@ -843,16 +922,6 @@ So we need to "revert" some CSS vars to not enforce dark mode
   }
 }
 
-html[data-theme="dark"] {
-  .navbar-sidebar {
-    background: var(--ifm-background-color);
-  }
-
-  .navbar button[class*="toggleButton"]:hover {
-    background: var(--ifm-color-emphasis-200);
-  }
-}
-
 @media (max-width: 1200px) {
   .navbar {
     .navbar__item.navbar__link {
@@ -864,10 +933,12 @@ html[data-theme="dark"] {
     }
 
     .DocSearch-Button {
-      padding: 0 12px;
-      max-width: 40px;
+      padding: 0;
+      justify-content: center;
+      width: 36px;
     }
 
+    .DocSearch-Button-Keys,
     .DocSearch-Button-Key,
     .DocSearch-Button-KeySeparator,
     .DocSearch-Button-Placeholder {
@@ -876,6 +947,17 @@ html[data-theme="dark"] {
   }
 }
 
+@media (max-width: 996px) {
+  .navbar__items div[class^="navbarSearchContainer"] {
+    position: static;
+    padding-left: 0;
+  }
+
+  .navbar-github-link {
+    display: none !important;
+  }
+}
+
 /* Sidebar */
 
 aside[class^="theme-doc-sidebar-container"] {