From e29738c4abe5eeabd066e784b04b14b7b6bd4523 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 20 Nov 2024 15:24:34 +0100
Subject: [PATCH] Fix main header display when menu is not expanded and toggle
 button active style

---
 src/assets/css/src/2.blocks.button.css | 1 -
 src/components/Menu.vue                | 8 ++++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 9b1deef..231c96f 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -35,7 +35,6 @@
 }
 
 .btn.active,
-.btn:active,
 .btn[aria-pressed="true"],
 input[type="checkbox"]:checked + .btn--primary {
   --btn-background: var(--color-primary-100);
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index e64ff29..42c016b 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -28,7 +28,8 @@
   </button>
   <div v-if="isExpanded" id="menu" class="flex | rounded-xl">
     <header class="w-full | flex">
-      <p>Nom du service</p>
+      <!-- TODO: à dynamiser en récupérant le $site->title() -->
+      <p>Design to Light</p>
     </header>
     <nav class="w-full | flow">
       <ul class="flex">
@@ -138,7 +139,7 @@ function isCurrent(navItem) {
 }
 </script>
 
-<style scoped>
+<style>
 button[aria-controls="menu"] {
   position: fixed;
   z-index: 10;
@@ -161,6 +162,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
   padding: 1.125rem;
   transform: rotate(180deg);
 }
+button[aria-controls="menu"][aria-expanded="false"] + main > header {
+  margin-left: 4rem;
+}
 
 /* Menu */