Add menu label text to sidebar toggle button

Author: mmistakes

README.md

@@ -96,6 +96,7 @@ t:
   skip_primary_nav: "Skip to primary navigation"
   skip_content: "Skip to content"
   skip_footer: "Skip to footer"
+  menu: "Menu"
   home: "Home"
   newer: "Newer"
   older: "Older"

_data/theme.yml

@@ -7,6 +7,7 @@ t:
   skip_primary_nav: "Skip to primary navigation"
   skip_content: "Skip to content"
   skip_footer: "Skip to footer"
+  menu: "Menu"
   home: "Home"
   newer: "Newer"
   older: "Older"

_layouts/default.html

@@ -14,7 +14,7 @@
 
     <div class="sidebar-toggle-wrapper">
       <a class="toggle navicon-button larr" href="#sidebar">
-        <span class="screen-reader-text">Menu</span>
+        <span class="sidebar-toggle-label">{{ site.data.theme.t.menu | default: 'Menu' }}</span>
         <div class="navicon"></div>
       </a>
     </div>

_sass/basically-basic/_global.scss

@@ -22,14 +22,15 @@
   a {
     display: flex;
     align-items: center;
+    min-height: $site-image-height;
     color: $text-color;
     text-decoration: none;
   }
 }
 
 .site-image {
-  width: 50px;
-  height: 50px;
+  width: $site-image-width;
+  height: $site-image-height;
   margin-right: 0.5rem;
   border-radius: 50%;
 }

_sass/basically-basic/_navicons.scss

@@ -62,7 +62,7 @@
     border-radius: $navicon-width;
     background: $navicon-content-bg;
     content: '';
-    z-index: -1;
+    // z-index: -1;
   }
 
   &::before { top: (2 * $navicon-height); }

_sass/basically-basic/_sidebar.scss

@@ -168,4 +168,17 @@
   right: 0;
   cursor: pointer;
   z-index: 10000;
+
+  .toggle {
+    display: flex;
+    align-items: center;
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.sidebar-toggle-label {
+  order: 2;
+  margin-left: 0.5rem;
+  font-weight: bold;
 }

_sass/basically-basic/_variables.scss

@@ -76,5 +76,9 @@ $navicon-nav-bg-close: transparent !default;
 $navicon-nav-bg-open: transparent !default;
 $navicon-content-bg: $text-color !default;
 
+/* Site image */
+$site-image-width: 50px !default;
+$site-image-height: 50px !default;
+
 /* Susy grid settings */
 $susy: (columns: 16, gutters: 0, math: fluid, output: float) !default;

example/_data/theme.yml

@@ -7,6 +7,7 @@ t:
   skip_primary_nav: "Skip to primary navigation"
   skip_content: "Skip to content"
   skip_footer: "Skip to footer"
+  menu: "Menu"
   home: "Home"
   newer: "Newer"
   older: "Older"