add ribbon to mobile header component and update styles

Author: javiert-okta

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

@@ -12,6 +12,7 @@ import { sitePaths } from "@/features/seo/site-tree";
 import { createUrlPath, getPathnameSegments } from "@/libs/utils/path.utils";
 import { SiteBrandComponent } from "@/features/common/components/site-brand/site-brand.component";
 import { ThemeCookieValues } from "@/features/common/values/theme.values";
+import { RibbonComponent } from "../../bars/ribbon/ribbon.component";
 
 interface MobileHeaderComponentProps {
   themeCode: ThemeCookieValues;
@@ -78,14 +79,21 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
 
   return (
     <>
-        <BoxComponent
-          contentAs="nav"
-          containerClassName={styles.container}
-          wrapperClassName={styles.wrapper}
-          contentClassName={styles.content}
-        >
+      <BoxComponent
+        contentAs="nav"
+        containerClassName={styles.container}
+        wrapperClassName={styles.wrapper}
+        contentClassName={styles.content}
+      >
+        <div className={styles.ribbonContainer}>
+          <RibbonComponent dictionary={dictionary.ribbon} />
+        </div>
+        <div className={styles.outerNavContainer}>
           <div className={styles.logo}>
-            <SiteBrandComponent path={languagePathPrefix} languageCode={languageCode}/>
+            <SiteBrandComponent
+              path={languagePathPrefix}
+              languageCode={languageCode}
+            />
           </div>
           <button
             className={styles.burgerIconWrapper}
@@ -102,7 +110,8 @@ export const MobileHeaderComponent: React.FC<MobileHeaderComponentProps> = ({
               aria-hidden={mobileMenuState === MobileMenuStateValues.CLOSED}
             />
           </button>
-        </BoxComponent>
+        </div>
+      </BoxComponent>
       <section
         className={styles.menu}
         aria-hidden={mobileMenuState === MobileMenuStateValues.CLOSED}

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

@@ -26,15 +26,19 @@
 
 .content {
   @include InnerContentFlex;
+  display: flex;
+  flex-direction: column;
+  color: $neutrals-light-100-snow;
+}
 
+.outerNavContainer {
+  display: flex;
   height: 100%;
   position: relative;
   grid-column: 1 / -1;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
-
-  color: $neutrals-light-100-snow;
 }
 
 .logo {
@@ -51,6 +55,12 @@
     display: flex;
   }
 }
+.ribbonContainer {
+  margin-top: 0.25rem;
+  display: flex;
+  padding-bottom: 0.5rem;
+
+}
 
 .burgerIconWrapper {
   appearance: none;