Use CSS instead of an image to draw the menu icon in the mobile doc

[stubailo: make the target much bigger than the icon, make icon smaller]
francisbyrne · Dec 7, 2014 · 6212629 · 6212629
1 parent 425ac62
commit 6212629
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/docs/client/docs.less b/docs/client/docs.less
@@ -481,13 +481,6 @@ pre {
             margin-right: 3px;
         }
     }
-
-    .open-sidebar {
-        position: absolute;
-        left: 10px;
-        top: 10px;
-        font-size: 30px;
-    }
 }
 
 .sidebar-open {
@@ -693,6 +686,38 @@ pre {
     }
 }
 
-.menu-icon {
-    height: 0.6em;
+// This menu icon is inspired by
+// http://www.codesynthesis.co.uk/code-snippets/create-a-hamburger-icon-with-css
+@hamburger-icon-size: 18px;
+
+// Make the target larger than the icon
+.hamburger-menu-target {
+    height: @hamburger-icon-size;
+    width: @hamburger-icon-size;
+    padding: 19px 10px;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.hamburger-menu, .hamburger-menu:after, .hamburger-menu:before {
+    height: @hamburger-icon-size / 6;
+    width: @hamburger-icon-size;
+    background-color: #111;
+    border-radius: 10px;
+    position: relative;
+}
+
+.hamburger-menu:after, .hamburger-menu:before {
+    content: '';
+    position: absolute;
+}
+
+.hamburger-menu:after {
+    top: @hamburger-icon-size / 3;
+}
+
+.hamburger-menu:before {
+    top: @hamburger-icon-size / 1.5;
 }
diff --git a/docs/client/layout.html b/docs/client/layout.html
@@ -46,7 +46,9 @@ <h1>
 
 <template name="topBar">
   <div class="top-bar">
-    <div class="open-sidebar"><img src="menu.png" class="menu-icon" /></div>
+    <div class="hamburger-menu-target open-sidebar">
+      <div class="hamburger-menu"></div>
+    </div>
     <h1>
       <img src="/logo.png" class="logo" alt="Meteor" /> 1.0 Docs
     </h1>

diff --git a/docs/public/menu.png b/docs/public/menu.png