Fix #1423 Flash of unstyled mobile menu content (#1424)

* fix flash of unstyled mobile menu content #1423 * Fix accessibility menu button --------- Co-authored-by: Sarah Abderemane <sarahabderemane@gmail.com>
django · Nov 25, 2023 · 44dd5a8 · 44dd5a8
1 parent 147bfca
commit 44dd5a8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 31 deletions.
diff --git a/djangoproject/scss/_dark-mode.scss b/djangoproject/scss/_dark-mode.scss
@@ -347,7 +347,7 @@ html[data-theme="light"] .theme-toggle .theme-label-when-light {
     }
 }
 
-[role="banner"] .nav-menu-on li:last-child {
+[role="banner"] [role="navigation"] li:last-child {
     @include respond-max(768px) {
         display: none;
     }

diff --git a/djangoproject/scss/_style.scss b/djangoproject/scss/_style.scss
@@ -497,7 +497,6 @@ blockquote {
 
     }
 
-
     .logo {
         @include font-size(40);
         @include sans-serif;
@@ -546,43 +545,26 @@ blockquote {
             color: var(--primary);
         }
 
-        span {
-            @include visuallyhidden;
-        }
-
         &.active {
             opacity: 0.5;
         }
     }
 
-    .nav-menu-on {
-        max-height: 0;
+    [role="navigation"] {
+        width: 100%;
+        background: $green-dark;
+        transition: max-height 0.3s ease-out;
+        max-height: 0; // hide mobile menu by default
         overflow: hidden;
 
-        -webkit-transition: all 0.3s ease-out;
-        transition: all 0.3s ease-out;
-
-        @include respond-min(768px) {
-            // turn off animations if on a desktop width
-            max-height: none;
-
-            -webkit-transition: none;
-            transition: none;
-        }
-
         &.active {
             max-height: 580px;
         }
-    }
-
-    [role="navigation"] {
-        background: $green-dark;
-
-        width: 100%;
 
         @include respond-min(768px) {
             width: auto;
             float: right;
+            max-height: none; // always show menu on a desktop width
         }
 
         ul {

diff --git a/djangoproject/static/js/mod/mobile-menu.js b/djangoproject/static/js/mod/mobile-menu.js
@@ -4,19 +4,16 @@ define([
 
     var MobileMenuExport = function(menu) {
         this.menu = $(menu); //menu container
-        this.menuBtn = $('.mobile-toggle'); // toggle dark mode icon
+        this.toggleMenuBtn = $('.menu-button')
         this.init();
     };
 
     MobileMenuExport.prototype = {
         init: function(){
             var self = this;
-            self.menu.addClass('nav-menu-on');
-            self.button = $('<button class="menu-button"><i class="icon icon-reorder"></i><span>Menu</span></button>');
-            self.button.insertBefore(self.menuBtn);
-            self.button.on( 'click', function(){
+            self.toggleMenuBtn.on( 'click', function(){
                 self.menu.toggleClass('active');
-                self.button.toggleClass('active');
+                self.toggleMenuBtn.toggleClass('active');
             });
         }
     };

diff --git a/djangoproject/templates/includes/header.html b/djangoproject/templates/includes/header.html
@@ -2,6 +2,10 @@
   <div class="container">
     <a class="logo" href="{% url 'homepage' %}">Django</a>
     <p class="meta">The web framework for perfectionists with deadlines.</p>
+    <button class="menu-button">
+      <i class="icon icon-reorder"></i>
+      <span class="visuallyhidden">Menu</span>
+    </button>
     <div class="mobile-toggle">
       {% include "includes/toggle_theme.html" %}
     </div>