Fix responsive bigs + clean

Author: smnandre

ux.symfony.com/assets/controllers/ux-header-controller.js

@@ -3,10 +3,22 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     static targets = ['menuButton'];
 
-    connect() {
+    initialize() {
         this.open = false;
     }
 
+    connect() {
+        document.body.classList.remove('locked');
+    }
+
+    disconnect() {
+        document.body.classList.remove('locked');
+    }
+
+    menuButtonDisconnected() {
+        document.body.classList.remove('locked');
+    }
+
     toggleMenu() {
         this.open = !this.open;
         this.element.classList.toggle('open', this.open);

ux.symfony.com/assets/styles/sections/_header.scss

@@ -1,68 +1,58 @@
+:root {
+  --header-breakpoint: 860px;
+}
+
 .AppHeader {
+  --color-background-rgb: 255 255 255;
+  --text-color: var(--bs-body-color);
+
   position: absolute;
   inset: 0 0 auto;
   z-index: 2;
-
   padding: 1.5rem 0;
+  color: var(--text-color);
 
-  @media (min-width: 576px) {
+  @media (min-width: 860px) {
     padding-top: 2rem;
   }
-  //@media (min-width: 768px) {
-  //  padding-top: 3rem;
-  //}
-
-  --color-background-rgb: 255 255 255;
-  --text-color: var(--bs-body-color);
-
-  color: var(--text-color);
 }
-.AppHeader--white {
-  --text-color: #fff;
-}
-
 [data-bs-theme="dark"] {
   .AppHeader {
     --color-background-rgb: 0 0 0;
   }
-  //.AppHeader--white {
-  //    --text-color: #fff;
-  //}
 }
-
-
-body.locked {
-  overflow-y: hidden;
+.AppHeader--white {
+  --text-color: #fff;
 }
 
-
 .AppHeader::before {
   position: fixed;
   inset: 0;
   content: " ";
   backdrop-filter: blur(5px);
   background: rgb(var(--color-background-rgb) / 0.85);
-
-  // #0a0b0dde
-
   opacity: 0;
   transform: scaleX(0);
 }
-@keyframes fade {
+@keyframes header-fade {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
+
+body.locked {
+  overflow-y: hidden;
+}
 .AppHeader.open {
   background: var(--bs-body-bg-rgb);
 }
 .AppHeader.open::before {
   transform: scaleX(1);
   inset: 0;
-  animation: fade 200ms;
+  animation: header-fade 200ms;
   opacity: 1;
 }
 
@@ -74,9 +64,7 @@ body.locked {
   background-size: 100%;
   display: block;
   transition: filter 250ms ease-in;
-
   flex-shrink: 0;
-
   span {
     display: none;
   }
@@ -100,7 +88,7 @@ body.locked {
   font-size: 1.5rem !important;
 }
 
-@media (min-width: 576px) {
+@media (min-width: 860px) {
   .AppHeader_toggler {
     display: none !important;
   }

ux.symfony.com/assets/styles/sections/_nav.scss

@@ -6,68 +6,53 @@
   gap: 1.5rem;
   justify-content: space-between;
 
-  @media (max-width: 575px) {
+  @media (max-width: 859px) {
     flex-wrap: wrap;
-    gap: 1rem;
   }
 }
 
-
 .AppNav_actions {
   flex-shrink: 0;
   flex-wrap: nowrap;
   display: flex;
   flex-direction: row-reverse;
-  gap: 1rem;
+  gap: 1.5rem;
   align-items: center;
 
-  @media (min-width: 575px) {
+  @media (min-width: 860px) {
     order: 2;
   }
 }
 
-
-@media (max-width: 800px) {
-  .AppHeader .AppNav_menu {
-    transform: translateY(-20%);
-    opacity: 0;
-    transition: transform 250ms ease-out;
-    z-index: -1;
-  }
-  .AppHeader.open .AppNav_menu {
-    transform: translateY(0);
-    opacity: 1;
-    z-index: 1;
-  }
-}
-
-
 .AppNav_menu {
-
-  gap: 2rem;
   justify-content: flex-end;
-  //line-height: 2rem;
-  align-items: center;
   display: flex;
   flex-direction: row;
+  gap: 1.5rem;
 
-  @media (min-width: 800px) {
+  @media (min-width: 860px) {
     margin-inline-start: auto;
     align-items: center;
+    gap: 2rem;
   }
+}
 
-  @media (max-width: 800px) {
-
+@media (max-width: 859px) {
+  .AppNav_menu {
+    transform: translateY(-20%);
+    opacity: 0;
+    z-index: -1;
+    transition: transform 250ms ease-out;
     width: 100%;
     flex-direction: column;
-    align-items: normal;
-
     padding: 1rem;
     gap: 1rem;
   }
-}
-
-@media (max-width: 800px) {
+  .AppHeader.open .AppNav_menu {
+    transform: translateY(0);
+    opacity: 1;
+    z-index: 1;
+  }
   .AppNav_menu a {
     font-size: 1.5rem;
     padding: .5rem;
@@ -76,7 +61,6 @@
 }
 
 .AppNav_item {
-
   color: inherit;
   font-family: var(--font-family-title);
   font-size: 1rem;
@@ -101,13 +85,7 @@
   display: grid;
   place-content: center;
 
-  > .Icon {
+  .Icon {
     font-size: 1.25rem;
   }
 }
-
-.nav-component-img {
-  height: 22px;
-  width: 22px;
-  border-radius: 4px;
-}

ux.symfony.com/templates/_header.html.twig

@@ -3,18 +3,26 @@
 
         <nav class="AppNav AppNav--white">
 
-            <a class="AppHeader_logo" href="{{ path('app_homepage') }}"  aria-label="Homepage">
+            <a class="AppHeader_logo" href="{{ path('app_homepage') }}" aria-label="Homepage">
                 <span aria-hidden="false">Symfony UX</span>
             </a>
 
             <div class="AppNav_actions">
-                <button class="AppHeader_toggler AppNav_item AppNav_item--icon" type="button" data-action="ux-header#toggleMenu">
+                <button
+                    class="AppHeader_toggler AppNav_item AppNav_item--icon"
+                    aria-label="Toggle Menu"
+                    data-action="ux-header#toggleMenu"
+                >
                     <twig:Icon name="menu"/>
-                    <span aria-hidden="false">Menu</span>
                 </button>
 
-                <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode" />
-                <a class="AppNav_item AppNav_item--icon" href="https://github.com/symfony/ux"  aria-label="Symfony UX on GitHub">
+                <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
+
+                <a
+                    class="AppNav_item AppNav_item--icon"
+                    aria-label="Symfony UX on GitHub"
+                    href="https://github.com/symfony/ux"
+                >
                     <twig:Icon name="github"/>
                 </a>
             </div>