feat(web): Add default header for sak organization (#16015)

island-is · Sep 16, 2024 · a88bbcf · a88bbcf
1 parent eb982d4
commit a88bbcf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/apps/web/components/Organization/Wrapper/OrganizationWrapper.css.ts b/apps/web/components/Organization/Wrapper/OrganizationWrapper.css.ts
@@ -1,5 +1,7 @@
 import { style } from '@vanilla-extract/css'
 
+import { themeUtils } from '@island.is/island-ui/theme'
+
 export const menuStyle = style({
   position: 'relative',
   zIndex: 20,
@@ -19,3 +21,15 @@ export const digitalIcelandHeaderTitle = style({
   ['-webkit-text-fill-color' as any]: 'transparent',
   textShadow: '0px 0px #00000000',
 })
+
+export const sakHeaderGridContainer = style({
+  display: 'grid',
+  maxWidth: '1342px',
+  margin: '0 auto',
+  ...themeUtils.responsiveStyle({
+    lg: {
+      gridTemplateRows: '315px',
+      gridTemplateColumns: '52fr 48fr',
+    },
+  }),
+})
diff --git a/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx b/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx
@@ -374,7 +374,17 @@ export const OrganizationHeader: React.FC<
         />
       )
     case 'sak':
-      return (
+      return n('usingDefaultHeader', false) ? (
+        <DefaultHeader
+          {...defaultProps}
+          className={styles.sakHeaderGridContainer}
+          image={n(
+            `sakHeaderBgImage`,
+            'https://images.ctfassets.net/8k0h54kbe6bj/4SjqwRBZRMWVWG0y73sXxq/cf8d0d16704cfea124362eca03afdb41/sak-header-trans_2x.png',
+          )}
+          titleSectionPaddingLeft={isSubpage ? 0 : 10}
+        />
+      ) : (
         <SAkHeader
           organizationPage={organizationPage}
           logoAltText={logoAltText}