style desktop nav items

Author: christiansamaniego-okta

src/features/common/components/headers/header/header.component.tsx

@@ -34,15 +34,17 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
       : createUrlPath([languageCode]);
 
   return (
-    <header className={styles.header}>
-      <BoxComponent
-        contentAs="nav"
-        containerClassName={styles.container}
-        wrapperClassName={styles.wrapper}
-        contentClassName={styles.content}
-        aria-label="Main navigation"
-      >
+    <BoxComponent
+      contentAs="nav"
+      containerClassName={styles.container}
+      wrapperClassName={styles.wrapper}
+      contentClassName={styles.content}
+      aria-label="Main navigation"
+    >
+      <div className={styles.brand}>
         <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode} />
+      </div>
+      <div className={styles.navContainer}>
         <div className={styles.navTabs}>
           <ul className={styles.navList}>
             {dictionary.links.map((link) => {
@@ -70,7 +72,7 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
             })}
           </ul>
         </div>
-      </BoxComponent>
-    </header>
+      </div>
+    </BoxComponent>
   );
 };

src/features/common/components/headers/header/header.module.scss

@@ -1,22 +1,22 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
 
-.header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-
-  z-index: 9001;
-  backdrop-filter: blur(2rem);
-}
-
 .container {
   @include Container;
+  max-width: calc(100% - 2rem);
   display: none;
-
+  position: fixed;
+  top: 1rem;
+  right: 0;
+  left: 0;
+  border-radius: 1.25rem;
+  margin: 0 auto;
+  box-sizing: border-box;
   background: var(--color_bg_app_bar);
-  border-bottom: 1px solid rgba(#555, 0.32);
+  border: 1px solid var(--color_bg_app_bar);
+  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .04);
+  backdrop-filter: blur(3rem);
+  z-index: 100;
 
   @media #{$breakpoint-dimension-sm} {
     display: block;
@@ -29,68 +29,75 @@
 }
 
 .content {
-  @include InnerContentFlex;
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
   height: 100%;
   position: relative;
-  grid-column: 1 / -1;
   align-items: center;
   justify-content: space-between;
 }
 
+.brand {
+  display: flex;
+  align-items: center;
+  height: 1rem;
+  margin-left: 1.5rem;
+  z-index: 100;
+}
+
+.navContainer {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  position: absolute;
+  left: 0;
+}
+
 .navTabs {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 3rem;
+  border-radius: 9999px;
+  padding: .25rem;
 }
 
 .navList {
   display: flex;
   padding: 0;
   list-style-type: none;
   margin: 0;
-
   height: 100%;
-
-  @media #{$breakpoint-dimension-sm} {
-    gap: 2rem;
-  }
-
-  @media #{$breakpoint-dimension-md} {
-    gap: 3rem;
-  }
+  gap: 0.25rem;
 }
 
 .navList__item {
   position: relative;
-  border-bottom: 0.125rem solid transparent;
-  color: var(--color_fg_link);
 
   &[data-active="true"] {
-    color: var(--color_fg_selected);
-    border-bottom: 1px solid var(--color_border_selected);
+    a {
+      background-color: var(--color_bg_app_bar);
+      color: var(--color_fg_bold);
+      cursor: default;
+    }
   }
 }
 
-.navList__item,
 .navList__item > a {
   display: flex;
   align-items: center;
-
-  font-size: 0.875rem;
+  padding: .5rem 1rem;
+  color: var(--color_fg_default);
+  font-size: .875rem;
   font-style: normal;
-  font-weight: 500;
-  line-height: 1.5rem;
-  letter-spacing: 0.2px;
+  font-weight: 600;
+  line-height: 1.5;
+  letter-spacing: -.1px;
+  border-radius: 9999px;
 
   &:focus-visible {
     outline: solid 1px var(--color_border_focus);
     outline-offset: 0.125rem;
     border-radius: 0.125rem;
   }
 }
-
-.header_actions {
-
-}

src/features/common/components/headers/mobile-header/mobile-header.component.tsx

@@ -76,7 +76,6 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
 
   return (
     <>
-      <header className={styles.header}>
         <BoxComponent
           contentAs="nav"
           containerClassName={styles.container}
@@ -102,7 +101,6 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
             />
           </button>
         </BoxComponent>
-      </header>
       <section
         className={styles.menu}
         aria-hidden={mobileMenuState === MobileMenuStateValues.CLOSED}

src/features/common/components/headers/mobile-header/mobile-header.module.scss

@@ -13,6 +13,10 @@
   border: 1px solid var(--color_bg_app_bar_border);
   backdrop-filter: blur(2rem);
   z-index: 100;
+  
+  @media #{$breakpoint-dimension-sm} {
+    display: none;
+  }
 }
 
 .wrapper {

src/features/common/components/layout/page-header/page-header.component.tsx

@@ -17,7 +17,7 @@ export const PageHeaderComponent: React.FC<PageHeaderComponentProps> = ({
   const layoutDictionary = getLayoutDictionary(languageCode);
 
   return (
-    <>
+    <header>
       <MobileHeaderComponent
         languageCode={languageCode}
         dictionary={layoutDictionary.header}
@@ -26,6 +26,6 @@ export const PageHeaderComponent: React.FC<PageHeaderComponentProps> = ({
         languageCode={languageCode}
         dictionary={layoutDictionary.header}
       />
-    </>
+    </header>
   );
 };

src/libs/theme/styles/_variables.scss

@@ -150,7 +150,7 @@ $gradient-app-card---resting: linear-gradient(
 
 $ribbon-height: 2.5rem;
 $ribbon-height-mobile: 2.5rem;
-$navbar-height: 3rem;
+$navbar-height: 5rem;
 $navbar-height-mobile: 3rem;
 $main-nav-height: calc($ribbon-height + $navbar-height);
 $main-nav-height-mobile: calc($ribbon-height-mobile + $navbar-height-mobile);

src/libs/theme/styles/globals.scss

@@ -45,7 +45,7 @@
 :root {
   --color_bg_page: var(--functional-gray-950);
   --color_fg_bold: var(--functional-gray-50);
-  --color_fg_default: var(--functional-gray-200);
+  --color_fg_default: var(--functional-gray-500);
   --color_fg_link_primary: var(--cloud);
 
   --color_bg_app_bar: hsla(0,0%,7%,.04);
@@ -196,10 +196,8 @@ html[data-theme="system-light"] {
 
   --color_bg_page: var(--functional-gray-0);
   --color_fg_bold: var(--charcoal2);
-  --color_fg_default: var(--functional-gray-650);
   --color_fg_link_primary: var(--sky);
 
-  --color_bg_app_bar: rgba(241, 241, 241, 0.66);
   --color_bg_app_bar_plain: rgba(241, 241, 241);
 
   --color_fg_link: var(--charcoal2);