fix: header responsiveness (#276)

ogcio · Oct 9, 2024 · 69df71a · 69df71a
1 parent 14c070b
commit 69df71a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 21 deletions.
diff --git a/packages/html/ds/src/header/components/headerDesktop.html b/packages/html/ds/src/header/components/headerDesktop.html
@@ -30,16 +30,16 @@
     <div
       class="gi-h-20 gi-justify-between gi-items-center gi-flex gi-bg-emerald-800 gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4"
     >
-      <div class="gi-flex gi-items-center gi-gap-4 md:gi-gap-6">
+      <div class="gi-flex gi-items-center gi-gap-4 md:gi-gap-6 lg:gi-gap-12">
         {% if props.logo.href %}
           <a
             aria-label="Go to the home page"
             href="{{ props.logo.href }}"
-            class="xs:gi-block gi-hidden"
+            class="md:gi-block gi-hidden"
             >{{ govieLogo() }}</a
           >
         {% else %}
-          <span class="xs:gi-block gi-hidden">{{ govieLogo() }}</span>
+          <span class="md:gi-block gi-hidden">{{ govieLogo() }}</span>
         {% endif %}
         {% if props.title %}
           <div class="gi-heading-sm gi-tracking-wider gi-text-white !gi-m-0">

diff --git a/packages/html/ds/src/header/components/headerSmall.html b/packages/html/ds/src/header/components/headerSmall.html
@@ -18,18 +18,18 @@
             <a
               aria-label="Go to the home page"
               href="{{ props.logo.href }}"
-              class="xs:gi-block gi-hidden"
+              class="md:gi-block gi-hidden"
               >{{ govieLogo() }}</a
             >
             <a
               aria-label="Go to the home page"
               href="{{ props.logo.href }}"
-              class="xs:gi-hidden gi-block"
+              class="md:gi-hidden gi-block"
               >{{ govieLogoSmall() }}</a
             >
           {% else %}
-            <span class="xs:gi-block gi-hidden">{{ govieLogo() }}</span>
-            <span class="xs:gi-hidden gi-block">{{ govieLogoSmall() }}</span>
+            <span class="md:gi-block gi-hidden">{{ govieLogo() }}</span>
+            <span class="md:gi-hidden gi-block">{{ govieLogoSmall() }}</span>
           {% endif %}
           {% if props.title %}
             <div class="gi-heading-sm gi-tracking-wider gi-text-white !gi-m-0">

diff --git a/packages/html/ds/src/header/header.stories.ts b/packages/html/ds/src/header/header.stories.ts
@@ -289,10 +289,6 @@ export const withTitle: Story = {
       },
     },
     navLinks: [
-      {
-        href: '#link-1',
-        label: 'News',
-      },
       {
         href: '#link-2',
         label: 'Departments',

diff --git a/packages/react/ds/src/header/header.stories.tsx b/packages/react/ds/src/header/header.stories.tsx
@@ -233,15 +233,10 @@ export const withTitle: Story = {
     },
     tools: {
       search: {
-        label: 'Search',
         action: '/search-page',
       },
     },
     navLinks: [
-      {
-        href: '#',
-        label: 'News',
-      },
       {
         href: '#',
         label: 'Departments',

diff --git a/packages/react/ds/src/header/header.tsx b/packages/react/ds/src/header/header.tsx
@@ -76,17 +76,17 @@ export function Header({
         id="MenuContainer"
         className="gi-h-20 gi-justify-between gi-items-center gi-flex gi-bg-emerald-800 gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4"
       >
-        <div className="gi-flex gi-items-center gi-gap-4 md:gi-gap-6">
+        <div className="gi-flex gi-items-center gi-gap-4 md:gi-gap-6 lg:gi-gap-12">
           {logo?.href ? (
             <>
-              <a href={logo.href} className="xs:gi-block gi-hidden">
+              <a href={logo.href} className="md:gi-block gi-hidden">
                 {logo.image ? (
                   <img className="gi-object-contain gi-h-12" src={logo.image} />
                 ) : (
                   <GovieLogo />
                 )}
               </a>
-              <a href={logo.href} className="xs:gi-hidden gi-block">
+              <a href={logo.href} className="md:gi-hidden gi-block">
                 {logo.image ? (
                   <img className="gi-object-contain gi-h-10" src={logo.image} />
                 ) : (
@@ -96,14 +96,14 @@ export function Header({
             </>
           ) : (
             <>
-              <span className="xs:gi-block gi-hidden">
+              <span className="md:gi-block gi-hidden">
                 {logo?.image ? (
                   <img className="gi-object-contain gi-h-12" src={logo.image} />
                 ) : (
                   <GovieLogo />
                 )}
               </span>
-              <span className="xs:gi-hidden gi-block">
+              <span className="md:gi-hidden gi-block">
                 {logo?.image ? (
                   <img className="gi-object-contain gi-h-10" src={logo.image} />
                 ) : (