feat: add optional icon menu to site header (#184)

src/sass/_base.scss

@@ -126,6 +126,10 @@ img {
   vertical-align: middle;
 }
 
+#gdoc-dark-mode {
+  cursor: pointer;
+}
+
 .fake-link:hover {
   background-image: linear-gradient(var(--link-color), var(--link-color));
   background-position: 0 100%;
@@ -170,7 +174,7 @@ img {
 
   &__link,
   &__link:visited {
-    color: inherit;
+    color: var(--header-font-color);
   }
 
   &__link:hover {
@@ -193,6 +197,20 @@ img {
   }
 }
 
+.gdoc-menu-header {
+  &__items {
+    display: inline-block;
+  }
+
+  &__control {
+    display: none;
+
+    .icon {
+      cursor: pointer;
+    }
+  }
+}
+
 .gdoc-nav {
   flex: 0 0 $menu-width;
   font-size: $font-size-14;
@@ -215,9 +233,14 @@ img {
     margin: 0;
     padding: 0;
 
+    .icon {
+      cursor: pointer;
+    }
+
     .icon.gdoc_menu {
       display: inline-block;
     }
+
     .icon.gdoc_arrow_back {
       display: none;
     }

src/sass/_mobile.scss

@@ -23,6 +23,16 @@
     }
   }
 
+  .gdoc-menu-header {
+    &__items {
+      display: none;
+    }
+
+    &__control {
+      display: inline-block;
+    }
+  }
+
   .gdoc-error {
     padding: $padding-16 * 6 $padding-16;
 
@@ -75,4 +85,22 @@
       display: inline-block;
     }
   }
+
+  #menu-header-control:checked ~ .gdoc-header {
+    .gdoc-brand__title {
+      display: none;
+    }
+
+    .gdoc-menu-header {
+      &__items {
+        display: inline-block;
+      }
+
+      &__control {
+        .icon.gdoc_keyborad_arrow_left {
+          display: none;
+        }
+      }
+    }
+  }
 }