Merge pull request #16 from netwerk-digitaal-erfgoed/feature/GH-14

Fix: Ensure button has correct color
netwerk-digitaal-erfgoed · Sep 26, 2024 · 5bb322a · 5bb322a
2 parents d671dba + 3c070ec
commit 5bb322a
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/nuxt/components/Molecules/Header.vue b/nuxt/components/Molecules/Header.vue
@@ -2,7 +2,7 @@
   <div
     ref="header"
     :class="{ base: true, 'dark-mode': darkMode }">
-    <MoleculesButtonsHome v-if="showHome" />
+    <MoleculesButtonsHome v-if="showHome" class="home"/>
     <h3
       v-if="title"
       class="title">
@@ -63,6 +63,20 @@ onMounted(() => {
   width: 100%;
   z-index: 10;
 
+  .home {
+    grid-area: home;
+  }
+
+  .close {
+    grid-area: action;
+  }
+
+  .title {
+    grid-area: title;
+    display: flex;
+    justify-content: center;
+  }
+
   &.dark-mode {
     background-color: var(--inverse-background-color);
     color: var(--inverse-text-color);
@@ -74,37 +88,23 @@ onMounted(() => {
   }
 }
 
-.home {
-  grid-area: home;
-}
-
-.close {
-  grid-area: action;
-}
-
-.title {
-  grid-area: title;
-  display: flex;
-  justify-content: center;
-}
-
 @include sm-screen-down {
   .base {
     grid-template-rows: repeat(2, 1fr);
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
       'home action'
       'title title';
-  }
 
-  .home {
-    justify-self: flex-start;
-    margin-inline: var(--space-4);
-  }
+    .home {
+      justify-self: flex-start;
+      margin-inline: var(--space-4);
+    }
 
-  .close {
-    justify-self: flex-end;
-    margin-inline: var(--space-4);
+    .close {
+      justify-self: flex-end;
+      margin-inline: var(--space-4);
+    }
   }
 }
 </style>