feat: Avancement dans l'architecture du site

assets/styles/header.sass

@@ -6,6 +6,8 @@
 
   &.home
     height: 80vh
+    .hero
+      height: 80vh
 
   .hero
     position: absolute
@@ -16,8 +18,10 @@
     z-index: -1
     object-fit: cover
     width: 100%
-    height: 100%
+    height: 40vh
+    background-color: $orange
 
+  $nav-height: 70px
   .nav
     position: absolute
     top: 50px
@@ -25,7 +29,7 @@
     left: 0
     right: 0
     background-color: $vert
-    height: 70px
+    height: $nav-height
 
     @media screen and (max-width: $size-md)
       top: 30px
@@ -34,10 +38,7 @@
   .container
     display: flex
     align-items: center
-    justify-content: center
-
-    @media screen and (max-width: $size-md)
-      justify-content: space-between
+    justify-content: space-between
 
   .logo
     $size-border-logo: 20px
@@ -61,11 +62,14 @@
 
     img
       position: relative
-      height: 70px
+      height: $nav-height
+      width: 214px
       z-index: 30
+      text-align: center
 
       @media screen and (max-width: $size-md)
         height: 50px
+        width: 154px
 
   #menu
     list-style-type: none
@@ -73,10 +77,83 @@
     align-items: center
     padding: 0
     margin: 0
+    height: $nav-height
 
     @media screen and (max-width: $size-xl)
       font-size: .95rem
 
+    .submenu
+      list-style-type: none
+      display: none
+      position: absolute
+      color: $vert
+      background: white
+      top: $nav-height
+      flex-direction: column
+      margin: 0
+      padding: 1rem
+      width: max-content
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px
+
+      a
+        color: $vert
+        padding: 10px 0 0
+
+        &:hover
+          text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
+
+    .menu:hover .submenu
+      display: flex
+
+    .menu.withSubmenu:hover::after
+      	content: ''
+      	display: block
+      	position: absolute
+      	left: calc(50% - 7.5px)
+      	top: 100%
+      	width: 0
+      	height: 0
+      	border-top: 15px solid $vert
+      	border-right: 15px solid transparent
+      	border-bottom: 0 solid transparent
+      	border-left: 15px solid transparent
+        z-index: 10000
+
+    .menu
+      display: flex
+      align-items: center
+      position: relative
+      height: 100%
+
+      &:first-child::before
+        content: none
+
+      &::before
+        content: ""
+        border-right: 2px white solid
+        right: 0
+        height: 20px
+
+    a
+      color: white
+      display: flex
+      align-items: center
+      padding: 0 10px
+      height: 100%
+      text-decoration: none
+
+      &:hover
+        text-shadow: 1px 1px 0px scale-color($vert, $lightness: +15%)
+
+    img
+      padding: 0 10px
+
+      @media screen and (max-width: $size-lg) and (min-width: $size-md)
+        display: none
+
+    span
+      white-space: nowrap
+
     @media screen and (max-width: $size-md)
       display: none
       position: fixed
@@ -84,6 +161,7 @@
       bottom: 0
       left: 0
       right: 0
+      height: 100vh
       z-index: 100
       background: $vert
       flex-direction: column
@@ -98,40 +176,42 @@
       img
         display: inherit
 
-    li
-      display: flex
-      align-items: center
+      .menu
+        height: auto
+        flex-direction: column
+        margin-bottom: 1rem
 
-      &:last-child::after
+      .menu.withSubmenu
+        padding: 10px
+
+      .submenu
+        display: flex
+        position: relative
+        top: 0
+        padding: 0
+        margin-top: 1rem
+        border-radius: 6px
+
+        &::before
+          	content: ''
+          	display: block
+          	position: absolute
+          	left: calc(50% - 15px)
+          	top: -15px
+          	width: 0
+          	height: 0
+          	border-top: 0 solid transparent
+          	border-right: 15px solid transparent
+          	border-bottom: 15px solid white
+          	border-left: 15px solid transparent
+            z-index: 10000
+
+        a
+          padding: 2px 10px
+
+      .menu:before
         content: none
 
-      &::after
-        content: ""
-        border-right: 2px white solid
-        height: 20px
-
-        @media screen and (max-width: $size-md)
-          content: none
-
-    a
-      color: white
-      display: flex
-      align-items: center
-      padding: 10px
-      text-decoration: none
-
-      &:hover
-        color: $orange
-
-    img
-      padding: 0 10px
-
-      @media screen and (max-width: $size-lg) and (min-width: $size-md)
-        display: none
-
-    span
-      white-space: nowrap
-
   .open-button
     display: none
     white-space: nowrap