[Site] Fix mobile menu

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

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['menuButton'];
+
+    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);
+        document.body.classList.toggle('locked', this.open);
+    }
+}

ux.symfony.com/assets/styles/components/_PackageBox.scss

@@ -24,6 +24,12 @@
   }
 }
 
+@media screen and (max-width: 800px) {
+  .PackageBox {
+    --space-large: 1rem;
+  }
+}
+
 .PackageBox::before {
   content: "";
   position: absolute;
@@ -65,7 +71,7 @@
   background-color: var(--color);
   width: var(--logo-size);
   height: var(--logo-size);
-  border-radius: var(--border-radius-large);
+  border-radius: 14%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -115,9 +121,8 @@
 
   font-family: var(--font-family-title);
   font-weight: 700;
-  font-size: 28px !important;
-  line-height: 32px !important;
-  letter-spacing: -1px;
+  font-size: 1.5rem;
+  line-height: 1.5;
   color: var(--bs-body-color);
   text-decoration: none;
 }

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

@@ -1,24 +1,57 @@
+:root {
+  --header-breakpoint: 860px;
+}
+
 .AppHeader {
+  --color-background-rgb: 255 255 255;
+  --text-color: var(--bs-body-color);
   position: absolute;
-  top: 1rem; // TODO responsive
-  left: 0;
-  right: 0;
+  inset: 0 0 auto;
   z-index: 2;
+  padding: 1.5rem 0;
+  color: var(--text-color);
+  @media (min-width: 860px) {
+    padding-top: 2rem;
+  }
+}
+[data-bs-theme="dark"] {
+  .AppHeader {
+    --color-background-rgb: 0 0 0;
+  }
+}
+.AppHeader--white {
+  --text-color: #fff;
+}
 
-  @media (min-width: 576px) {
-    top: 2rem;
+.AppHeader::before {
+  position: fixed;
+  inset: 0;
+  content: " ";
+  backdrop-filter: blur(5px);
+  background: rgb(var(--color-background-rgb) / 0.85);
+  opacity: 0;
+  transform: scaleX(0);
+}
+@keyframes header-fade {
+  from {
+    opacity: 0;
   }
-  @media (min-width: 768px) {
-    top: 3rem;
+  to {
+    opacity: 1;
   }
 }
 
-.AppHeader {
-  --text-color: var(--bs-body-color);
-  color: var(--text-color);
+body.locked {
+  overflow-y: hidden;
 }
-.AppHeader--white {
-  --text-color: #fff;
+.AppHeader.open {
+  background: var(--bs-body-bg-rgb);
+}
+.AppHeader.open::before {
+  transform: scaleX(1);
+  inset: 0;
+  animation: header-fade 200ms;
+  opacity: 1;
 }
 
 .AppHeader_logo {
@@ -27,23 +60,33 @@
   width: calc(161 / 30 * var(--height));
   background: url(../images/sf-ux.svg);
   background-size: 100%;
-
+  display: block;
   transition: filter 250ms ease-in;
-
+  flex-shrink: 0;
   span {
     display: none;
   }
-
   .AppHeader--white &,
   [data-bs-theme="dark"] & {
     filter: invert(1);
   }
 }
 
-.AppHeader_toggler:focus {
-  box-shadow: none;
-}
-
 .AppHeader_toggler {
   color: currentColor;
+  border: none;
+  background: none;
+  box-shadow: none !important;
+}
+.AppHeader_toggler span {
+  display: none;
+}
+.AppHeader_toggler .Icon {
+  font-size: 1.5rem !important;
+}
+
+@media (min-width: 860px) {
+  .AppHeader_toggler {
+    display: none !important;
+  }
 }

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

@@ -1,37 +1,95 @@
 .AppNav {
   color: inherit;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  justify-content: space-between;
+
+  @media (max-width: 859px) {
+    flex-wrap: wrap;
+  }
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  justify-content: space-between;
+  @media (max-width: 859px) {
+    flex-wrap: wrap;
+  }
+}
+
+.AppNav_actions {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 1.5rem;
+  align-items: center;
+
+  @media (min-width: 860px) {
+    order: 2;
+  }
 }
 
 .AppNav_menu {
-  gap: 2rem;
   justify-content: flex-end;
-  line-height: 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+
+  @media (min-width: 860px) {
+    margin-inline-start: auto;
+    align-items: center;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 859px) {
+  .AppNav_menu {
+    transform: translateY(-20%);
+    opacity: 0;
+    z-index: -1;
+    transition: transform 250ms ease-out;
+    width: 100%;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+  }
+  .AppHeader.open .AppNav_menu {
+    transform: translateY(0);
+    opacity: 1;
+    z-index: 1;
+  }
+  .AppNav_menu a {
+    font-size: 1.5rem;
+    padding: .5rem;
+    opacity: 1;
+  }
+}
 
-  @media (max-width: 575px) {
-    display: flex;
-    flex-direction: row;
-    height: 3rem;
-    place-content: center;
-    .Icon--chevron-down {
-      display: none;
-    }
+@media (max-width: 800px) {
+  .AppNav_menu a {
+    font-size: 1.5rem;
+    padding: .5rem;
+    opacity: 1;
   }
 }
 
 .AppNav_item {
   color: inherit;
-  font-family: "Ubuntu";
+  font-family: var(--font-family-title);
   font-size: 1rem;
-  font-weight: 700;
+  font-weight: 500;
   letter-spacing: 0;
   opacity: .85;
   transition: opacity 250ms;
   padding: 0;
   border: none;
   background: none;
+  text-align: center;
   line-height: 2rem;
   position: relative;
-
   &:hover {
     opacity: 1;
   }
@@ -44,16 +102,11 @@
   display: grid;
   place-content: center;
 
-  > .Icon {
+  .Icon {
     font-size: 1.25rem;
   }
 }
 
-.nav-component-img {
-  height: 22px;
-  width: 22px;
-  border-radius: 4px;
-}
 
 .AppNav_badge {
   position: absolute;
@@ -69,3 +122,4 @@
   height: 1rem;
   line-height: normal;
 }
+

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

@@ -1,20 +1,39 @@
-<header class="AppHeader {{ theme is defined ? ('AppHeader--' ~ theme) }}">
-    <nav class="navbar navbar-expand-sm AppNav--white">
-        <div class="container-xxl px-4 px-md-5">
-            <a href="{{ path('app_homepage') }}" class="AppHeader_logo" aria-label="Homepage">
+<header class="AppHeader {{ theme is defined ? ('AppHeader--' ~ theme) }}" data-controller="ux-header">
+    <div class="container-xxl px-4 px-md-5">
+
+        <nav class="AppNav AppNav--white">
+
+            <a class="AppHeader_logo" href="{{ path('app_homepage') }}"  aria-label="Homepage">
                 <span aria-hidden="false">Symfony UX</span>
             </a>
-            <button class="AppHeader_toggler navbar-toggler collapsed" type="button"
-                data-bs-toggle="collapse" data-bs-target="#AppNav"
-                aria-controls="AppNav" aria-expanded="false" aria-label="Toggle navigation"
-            >
-                <twig:Icon name="menu"/>
-            </button>
-            <div class="AppHeader_nav AppNav_menu navbar-collapse collapse" id="AppNav">
-                {% block nav %}
-                    {{ include('_nav.html.twig') }}
-                {% endblock %}
+
+            <div class="AppNav_actions">
+                <button
+                    class="AppHeader_toggler AppNav_item AppNav_item--icon"
+                    aria-label="Toggle Menu"
+                    data-action="ux-header#toggleMenu"
+                >
+                    <twig:Icon name="menu"/>
+                </button>
+
+                <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>
-        </div>
-    </nav>
+
+            <div class="AppNav_menu">
+                <a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
+                <a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
+                <a href="{{ path('app_packages') }}" class="AppNav_item">Packages</a>
+                <a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
+            </div>
+
+        </nav>
+
+    </div>
 </header>