Update navbar per website

Author: carlagn

src/css/custom.css

@@ -512,24 +512,32 @@ hr {
 
 .navbar__link--active,
 .menu__link--active {
-  color: var(--selected);
+  color: var(--surface-brand-default);
+  background: var(--surface-brand-grey-strong);
 }
 
-
-.navbar__link--active:hover {
-  color: var(--selected-hover);
+.navbar__link {
+  position: relative;
 }
 
-.navbar__link {
+.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):hover {
   position: relative;
 }
 
-.navbar__item.navbar__link:not(.logo-link):hover {
-  color: var(--normal-hover);
+.navbar__item.navbar__link:not(.logo-link):not(.navbar-login-btn):hover::after {
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  content: "";
+  background: var(--surface-brand-default);
+  bottom: -24px;
+  left: 0;
+  z-index: 2;
 }
 
+
 .navbar__item {
-  padding: 12px 16px;
+  padding: 8px;
   border-radius: 8px;
   font-family: Inter;
   font-size: 16px;
@@ -664,24 +672,26 @@ hr {
 }
 
 .navbar__items--middle {
-  background: var(--navbar-items-bg);
   padding: 0 16px;
   border-radius: 99px;
+  display: flex;
+  gap: 16px;
   margin: 0 auto;
 }
 .navbar__inner {
-  margin: auto;
+  background: var(--navbar-items-bg);
   padding: 16px 24px;
   display: grid;
-  grid-template-columns: 324px 1fr auto;
+  gap: 40px;
+  grid-template-columns: auto auto 1fr;
 }
 @media (max-width: 1191px) {
-  .navbar__inner {
-    grid-template-columns: repeat(3, auto);
-  }
   .header-github-link {
     display: none;
   }
+  .navbar__inner {
+    gap: 16px;
+  }
 }
 
 .navbar__items--right > :last-child {
@@ -694,12 +704,13 @@ hr {
     flex-direction: row-reverse;
     justify-content: space-between;
     max-width: unset;
+    height: 48px;
   }
 
   .navbar__inner {
     position: relative;
-    display: flex;
     padding: 16px 32px;
+    display: flex;
   }
 
   .navbar__items--right > :last-child {
@@ -784,6 +795,9 @@ hr {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
+    &::before {
+      content: "/"
+    }
   }
   .logo-link:hover {
     transform: translateY(-60%);

src/pages/index.module.scss

@@ -6,7 +6,7 @@
 .mainHome {
   overflow: hidden;
   padding: 0;
-  @media (max-width: 974px) {
+  @media (max-width: 996px) {
     margin-top: 68px;
   }
 }
@@ -113,14 +113,14 @@
       gap: 40px;
       margin-top: 36px;
       grid-template-columns: 1fr;
-      @media (min-width: 974px) {
+      @media (min-width: 996px) {
         grid-template-columns: repeat(2, calc(50% - 20px));
       }
       .tabBox {
         width: 100%;
         height: 100%;
         max-width: 100%;
-        @media (min-width: 974px) {
+        @media (min-width: 996px) {
           height: 100%;
         }
         .heading {
@@ -210,7 +210,7 @@
   line-height: 52.8px;
   letter-spacing: -0.02em;
   text-align: left;
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     font-size: 48px;
   }
 }
@@ -223,7 +223,7 @@
   letter-spacing: -2%;
   margin: 40px 0 24px;
 
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     margin: 80px 0 24px;
     font-size: 36px;
   }
@@ -243,7 +243,7 @@
   gap: 24px;
   flex-wrap: wrap;
   display: grid;
-  @media (min-width: 974px) {
+  @media (min-width: 996px) {
     grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -264,7 +264,7 @@
     display: grid;
     gap: 40px;
     grid-template-columns: 1fr;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(3, 1fr);
     }
     .howItem {
@@ -301,7 +301,7 @@
           line-height: 140%;
           letter-spacing: 0%;
           margin: 16px 0 0;
-          @media (min-width: 974px) {
+          @media (min-width: 996px) {
             height: 98px;
           }
         }
@@ -371,7 +371,7 @@
     display: grid;
     gap: 40px;
     grid-template-columns: 1fr;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(3, 1fr);
     }
     .helpItem {
@@ -441,7 +441,7 @@
     max-width: 1272px;
     text-align: left;
     padding: 40px 16px;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       grid-template-columns: repeat(2, 1fr);
       padding: 80px 16px;
     }
@@ -469,7 +469,7 @@
     justify-content: left;
     align-items: center;
     gap: 24px;
-    @media (min-width: 974px) {
+    @media (min-width: 996px) {
       justify-content: center;
     }
     .link {

src/theme/Navbar/Content/index.tsx

@@ -72,7 +72,8 @@ export default function NavbarContent(): ReactNode {
         <>
           {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
           <NavbarLogo />
-          <Link to={baseUrl} className="logo-link">/docs</Link>
+          <span className={styles.separator}>/</span>
+          <Link to={baseUrl} className="logo-link">docs</Link>
         </>
       }
       middle={

src/theme/Navbar/Content/styles.module.css

@@ -5,4 +5,13 @@ Hide color mode toggle in small viewports
   .colorModeToggle {
     display: none;
   }
+  .separator {
+    display: none;
+  }
 }
+
+.separator {
+  color: var(--border-color);
+  font-size: 28px;
+  margin-right: 4px;
+}