Add the mobile menu directly in baseof template instead of via js. Translate menu terms.

i18n/en.toml

@@ -1,6 +1,12 @@
+[menu_title]
+other = "Main menu"
+
 [menu_home]
 other = "Home"
 
+[menu_mobile]
+other = "Menu"
+
 [pager_next]
 other = "Next"
 

i18n/sv.toml

@@ -1,6 +1,12 @@
+[menu_title]
+other = "Huvudmeny"
+
 [menu_home]
 other = "Hem"
 
+[menu_mobile]
+other = "Meny"
+
 [pager_next]
 other = "Nästa"
 
@@ -15,4 +21,3 @@ other = "Sök"
 
 [search_title]
 other = "Ange de villkor du vill söka efter."
-

layouts/_default/baseof.html

@@ -33,7 +33,11 @@
 </footer>
 
 </div>
-
+<div class="mobile-nav-wrapper hidden">
+  <div class="mobile-nav-cover"></div>
+  <a href="#navigation" class="mobile-nav-toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
+  <div class="mobile-nav-sheet"></div>
+</div>
 {{ partial "scripts.html" . -}}
 {{ partialCached "scripts_cache.html" . -}}
 </body>

layouts/partials/menu.html

@@ -1,7 +1,7 @@
 {{ $currentSection := .Section }}
 {{ $currentID := .UniqueID }}
 <nav class="main-menu layout__navigation layout__full" role="navigation">
-<h2 class="visually-hidden">Main menu</h2>
+<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
 <ul class="navbar">
 <li><a class="{{ if .IsHome }}active{{ end }}" href="/">{{ i18n "menu_home" }}</a></li>
 {{ range after 1 (where .Site.Pages "Section" "") -}}

sass/_zen.scss

@@ -11,6 +11,35 @@ pre {
   @include margin(.75 0);
 }
 
+/* Page */
+
+body {
+  background-color: color(backdrop);
+}
+
+.page {
+  background-color: color(body-bg);
+}
+
+.header {
+  padding-top: $zen-gutters / 2;
+
+  @include respond-to(s) {
+    padding-top: $zen-gutters;
+  }
+}
+
+.footer {
+  @include margin-top(1.5);
+  @include padding(.5 0);
+  text-align: center;
+  border-top: 2px solid color(brand);
+
+  p {
+    margin: 0;
+  }
+}
+
 /* Apply smaller text to blocks, footer etc. */
 
 th,
@@ -172,20 +201,6 @@ figcaption {
   }
 }
 
-/* Page */
-
-body {
-  background-color: color(backdrop);
-}
-
-.page {
-  background-color: color(body-bg);
-}
-
-.header {
-  padding-top: $zen-gutters;
-}
-
 /* Navigation */
 
 .main-menu {
@@ -223,17 +238,6 @@ body {
   text-decoration: none;
 }
 
-.footer {
-  @include margin-top(1.5);
-  @include padding(.5 0);
-  text-align: center;
-  border-top: 2px solid color(brand);
-
-  p {
-    margin: 0;
-  }
-}
-
 /* Messages */
 
 .message {
@@ -312,9 +316,9 @@ body {
   }
 }
 
-/* Mobil menu */
+/* Mobile menu */
 
-.js-nav-wrapper {
+.mobile-nav-wrapper {
   position: fixed;
   right: 0;
   top: 0;
@@ -325,7 +329,7 @@ body {
   pointer-events: none;
 }
 
-.js-nav-cover {
+.mobile-nav-cover {
   position: absolute;
   width: 100vw;
   height: 100vh;
@@ -338,16 +342,19 @@ body {
   }
 }
 
-.js-nav-toggle {
+.mobile-nav-toggle {
   @include typeface(headings);
   display: block;
   position: absolute;
   top: $zen-gutters / 2;
   right: $zen-gutters + $zen-gutters / 2 + $zen-gutters / 4;
+  padding: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
   z-index: 12;
   text-decoration: none;
   font-weight: bold;
   line-height: 1;
+  border: 1px solid color(border);
+  border-radius: 3px;
   pointer-events: auto;
 
   .js-nav-open & {
@@ -369,7 +376,7 @@ body {
   }
 }
 
-.js-nav-sheet {
+.mobile-nav-sheet {
   position: relative;
   background-color: color(header-bg);
   width: 90vw;
@@ -380,7 +387,7 @@ body {
 
   .js-nav-open & {
     pointer-events: auto;
-    box-shadow: -10px 0 10px -10px color('nearblack');
+    box-shadow: -10px 0 10px -10px color(nearblack);
     transform: translateX(10vw);
   }
 
@@ -402,10 +409,10 @@ body {
   }
 }
 
-.js-nav-cover,
+.mobile-nav-cover,
-.js-nav-toggle,
+.mobile-nav-toggle,
-.js-nav-toggle::after,
+.mobile-nav-toggle::after,
-.js-nav-sheet {
+.mobile-nav-sheet {
   transition: all 130ms ease-in;
 
   .js-nav-open & {

sass/init/_variables.scss

@@ -102,7 +102,8 @@ $typefaces: (
 );
 
 // Output a horizontal grid to help with debugging typography.
-$typey-debug: false;
+$typey-debug: true;
+$with-wireframes: true;
 
 // The length unit in which to output font size and margin values.
 // Supported values: px, em, rem.

static/js/script.js

@@ -10,21 +10,21 @@
   // Add a js class to the html-tag when JavsScript is active.
   $('html').addClass('js');
 
-  // Activate the SlickNav menu for small screens.
+  // Activate the mobil menu for small screens.
   if (window.matchMedia) {
     var mq = window.matchMedia('(max-width: 666px)');
     if (mq.matches) {
-      // Create the nav toggle button and the nav sheet.
+      // Show mobile menu.
-      $('.page').after('<div class="js-nav-wrapper"><div class="js-nav-cover"></div><a href="#navigation" class="js-nav-toggle" aria-haspopup="true" role="button">Menu</a><div class="js-nav-sheet"></div></div>');
+      $('.mobile-nav-wrapper').removeClass('hidden');
 
-      // Populate the nav sheet.
+      // Populate the mobile nav sheet.
-      $('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.js-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
+      $('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
-      $('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.js-nav-sheet');
+      $('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet');
 
-      // Toggle the nav sheet.
+      // Toggle the mobile nav sheet.
-      $('.js-nav-cover, .js-nav-toggle').on('click toushstart', function (e) {
+      $('.mobile-nav-cover, .mobile-nav-toggle').on('click toushstart', function (e) {
         e.preventDefault();
-        $('.js-nav-wrapper').toggleClass('js-nav-open');
+        $('.mobile-nav-wrapper').toggleClass('js-nav-open');
       });
 
     }