remove ribbon component and apply mobile navbar style

Author: christiansamaniego-okta

src/features/common/components/errors/error-page/error-page.component.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styles from "./error-page.module.scss";
 import { ShellComponent } from "@/features/common/components/shell/shell.component";
-import { RibbonComponent } from "@/features/common/components/bars/ribbon/ribbon.component";
 import { MobileHeaderComponent } from "@/features/common/components/headers/mobile-header/mobile-header.component";
 import { HeaderComponent } from "@/features/common/components/headers/header/header.component";
 import { FooterComponent } from "@/features/common/components/footer/footer.component";
@@ -33,25 +32,11 @@ export const ErrorPageComponent: React.FC<ErrorPageComponentProps> = ({
             languageCode={languageCode}
             dictionary={dictionary.header}
             siteLogo={<SiteLogoComponent languageCode={languageCode} />}
-            ribbon={
-              <RibbonComponent
-                themeCode={themeCode}
-                languageCode={languageCode}
-                dictionary={dictionary.ribbon}
-              />
-            }
           />
           <HeaderComponent
             languageCode={languageCode}
             dictionary={dictionary.header}
             siteLogo={<SiteLogoComponent languageCode={languageCode} />}
-            ribbon={
-              <RibbonComponent
-                themeCode={themeCode}
-                languageCode={languageCode}
-                dictionary={dictionary.ribbon}
-              />
-            }
           />
         </header>
         <main className={styles.main}>{children}</main>

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

@@ -15,14 +15,12 @@ interface HeaderComponentProps {
   languageCode: string;
   dictionary: LayoutDictionaryModel["header"];
   siteLogo: React.ReactNode;
-  ribbon: React.ReactNode;
 }
 
 export const HeaderComponent: React.FC<HeaderComponentProps> = ({
   languageCode,
   dictionary,
   siteLogo,
-  ribbon,
 }) => {
   const pathname = usePathname();
   const pathnameSegments = getPathnameSegments(pathname);
@@ -39,7 +37,6 @@ export const HeaderComponent: React.FC<HeaderComponentProps> = ({
 
   return (
     <header className={styles.header}>
-      {ribbon}
       <BoxComponent
         contentAs="nav"
         containerClassName={styles.container}

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

@@ -41,7 +41,7 @@
   flex: 1;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
   gap: 3rem;
 }
 
@@ -90,3 +90,7 @@
     border-radius: 0.125rem;
   }
 }
+
+.header_actions {
+
+}

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

@@ -16,14 +16,12 @@ interface MobileHeaderComponentProps {
   languageCode: string;
   dictionary: LayoutDictionaryModel["header"];
   siteLogo: React.ReactNode;
-  ribbon: React.ReactNode;
 }
 
 export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
   languageCode,
   dictionary,
   siteLogo,
-  ribbon,
 }) => {
   const pathname = usePathname();
   const [currentPathname, setCurrentPathname] = useState<string | null>(null);
@@ -81,7 +79,6 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
   return (
     <>
       <header className={styles.header}>
-        {ribbon}
         <BoxComponent
           contentAs="nav"
           containerClassName={styles.container}

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

@@ -1,25 +1,18 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
 
-.header {
+.container {
+  width: calc(100% - 2rem);
   position: fixed;
-  top: 0;
+  top: 1rem;
   right: 0;
   left: 0;
-
-  z-index: 9001;
-  backdrop-filter: blur(2rem);
-}
-
-.container {
-  @include Container;
-
+  border-radius: 1rem;
+  margin: 0 auto;
   background: var(--color_bg_app_bar);
-  border-bottom: 1px solid rgba(#555, 0.32);
-
-  @media #{$breakpoint-dimension-sm} {
-    display: none;
-  }
+  border: 1px solid var(--color_bg_app_bar_border);
+  backdrop-filter: blur(2rem);
+  z-index: 100;
 }
 
 .wrapper {

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

@@ -24,25 +24,11 @@ export const PageHeaderComponent: React.FC<PageHeaderComponentProps> = ({
         languageCode={languageCode}
         dictionary={layoutDictionary.header}
         siteLogo={siteLogo}
-        ribbon={
-          <RibbonComponent
-            themeCode={themeCode}
-            languageCode={languageCode}
-            dictionary={layoutDictionary.ribbon}
-          />
-        }
       />
       <HeaderComponent
         languageCode={languageCode}
         dictionary={layoutDictionary.header}
         siteLogo={siteLogo}
-        ribbon={
-          <RibbonComponent
-            themeCode={themeCode}
-            languageCode={languageCode}
-            dictionary={layoutDictionary.ribbon}
-          />
-        }
       />
     </>
   );

src/features/common/components/theme-toggle/theme-toggle.component.tsx

@@ -0,0 +1,10 @@
+interface ThemeToggleComponentProps {
+
+}
+
+export const ThemeToggleComponent: React.FC<ThemeToggleComponentProps> = ({
+}) => {
+  return (
+    <div>Theme Toggle</div>
+  );
+};

src/libs/theme/styles/globals.scss

@@ -48,7 +48,8 @@
   --color_fg_default: var(--functional-gray-200);
   --color_fg_link_primary: var(--cloud);
 
-  --color_bg_app_bar: rgba(17, 17, 17, 0.66);
+  --color_bg_app_bar: hsla(0,0%,7%,.04);
+  --color_bg_app_bar_border: hsla(0, 0%, 7%, .12);
   --color_bg_app_bar_plain: rgba(17, 17, 17);
 
   --color_fg_link: var(--functional-gray-50);