✨ nav bar for mobile

moegi-design · May 16, 2020 · 72e27c8 · 72e27c8
1 parent dd2273f
commit 72e27c8
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 8 deletions.
diff --git a/src/components/FeedItem/Note.svelte b/src/components/FeedItem/Note.svelte
@@ -18,7 +18,6 @@
     box-sizing: border-box;
     .title-wrap {
       h2.title {
-        height: 36px;
         line-height: 36px;
         font-size: 22px;
         color: var(--color-text);

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -3,6 +3,8 @@
   import { getContext } from "svelte";
 
   export let customHeaderClass;
+
+  let isMobileMenuOpen = false;
 </script>
 
 <style lang="scss">
@@ -120,6 +122,93 @@
       }
     }
   }
+  .gh-navigation-m {
+    display: none;
+    @include respond-to(sm) {
+      display: block;
+    }
+    .home-icon {
+      color: var(--color-text);
+      position: relative;
+      span {
+        font-size: 20px;
+      }
+      &:before{
+        content: '';
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        bottom: -8px;
+        left: -8px;
+      }
+    }
+  }
+  .gh-navigation-mpanel {
+    display: none;
+    @include respond-to(sm) {
+      display: block;
+    }
+    position: fixed;
+    left: 0;
+    right: 0;
+    height: 0;
+    overflow: hidden;
+    top: 48px;
+    bottom: 0;
+    z-index: 15;
+    user-select: none;
+    &.show {
+      height: auto;
+      .container {
+        transform: none;
+      }
+      .mask {
+        background-color: var(--color-decoration-darker);
+      }
+    }
+    &.hide {
+      height: 0;
+      overflow: hidden;
+      .container {
+        transform: translateY(-100%);
+      }
+      .mask {
+        background-color: transparent;
+      }
+    }
+    .container {
+      position: relative;
+      padding: 10px 32px;
+      border-bottom: 1px solid var(--color-decoration);
+      background-color: var(--color-background-inner);
+      backdrop-filter: saturate(180%) blur(20px);
+      z-index: 20;
+      transition: transform 0.3s ease;
+      a {
+        display: block;
+        font-size: 0.9rem;
+        color: var(--color-text);
+        height: 48px;
+        line-height: 48px;
+        border-bottom: 1px solid var(--color-decoration);
+        &:last-child {
+          border-bottom: none;
+        }
+        &:active {
+          color: var(--color-primary);
+          transition: color 0.3s ease;
+        }
+      }
+    }
+    .mask {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      transition: background-color 0.3s ease;
+    }
+  }
 </style>
 
 {#if $siteInfo.title}
@@ -140,7 +229,23 @@
   <div class="gh-title">{$postTitle}</div>
   {/if}
   <div class="gh-blank"></div>
+  {#if $siteInfo.navigation}
+  <div class="gh-navigation-m" on:click={() => {isMobileMenuOpen = !isMobileMenuOpen}}>
+    <div class="home-icon" href={$siteInfo.url}>
+      <span class="iconfont {isMobileMenuOpen ? 'icon-close' : 'icon-menu'}"></span>
+    </div>
+  </div>
   <div class="gh-navigation">
+    <nav>
+      {#each $siteInfo.navigation as navItem, i}
+        <a href={navItem.url}>{navItem.label}</a>
+      {/each}
+    </nav>
+  </div>
+  {/if}
+</header>
+<div class="gh-navigation-mpanel {isMobileMenuOpen ? 'show' : 'hide'}">
+  <div class="container">
     {#if $siteInfo.navigation}
       <nav>
         {#each $siteInfo.navigation as navItem, i}
@@ -149,5 +254,6 @@
       </nav>
     {/if}
   </div>
-</header>
+  <div class="mask" on:click={() => {isMobileMenuOpen = !isMobileMenuOpen}}></div>
+</div>
 {/if}
diff --git a/src/css/fonts/iconfont.eot b/src/css/fonts/iconfont.eot
diff --git a/src/css/fonts/iconfont.svg b/src/css/fonts/iconfont.svg
diff --git a/src/css/fonts/iconfont.ttf b/src/css/fonts/iconfont.ttf
diff --git a/src/css/fonts/iconfont.woff b/src/css/fonts/iconfont.woff
diff --git a/src/css/iconfont.scss b/src/css/iconfont.scss
@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1589093258183'); /* IE9 */
-  src: url('iconfont.eot?t=1589093258183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARcAAsAAAAACQAAAAQOAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDQAqFCIQcATYCJAMYCw4ABCAFhG0HSxu9BxEVnJXJfhS47cO5lHbiVOCrnc2u5bWUcxDPUxd7f3dvr9mLmkmkOcIgoiwPLPMIAzmBYOHh/zf1wiMZI1XRdPpVnxnJxE0+d2rW1FIbChYKdIOhlZd/7rKyuzw6fQMU/MEx02WC5dlsLtlBATge0MCiPkOjhP9BXtR/GV7rUhd0PwEDP2KQSsxNKlBRIPsC0tWqt0WNWVBKmEHVG3POVZBmYkCVJ8lX4eP+fr5IklQoGATk6KNTaQcKPmz/8FWMrBuphY1A2p8L7EWoYAcN0jfX80T4mR2BJq9WKAIDFRm5r97zH959+FpXR4j6oliRTtP/5SEYkBEoECOk9gy44+wCx3aTT+A4L8nTvgOTAtovYFJB+xVk98fQe9yygS/4Qyg7RwsKEhIiytHeYOvgjFYojkPu36/STjwIdlru3q1YdS/X5S5TPM/VtMB9zQNMmHJPExj7vvudJl++vXvUnjtXply6tWvkzpsX2+sLpGbz3dpNdukw17XjvNaVlR2q2s9bt2HLksWb16/duHBR27z5Lh2qTHVO0Xp3fUGfTvPnwtu1YwdHnEqNGiCNmt9UNZJZuUCSRrl10hcM6RQ1v7tv2bjqmMkk2wvTlBOjOmiSqVrWpFGbNW3yRhhC0zum7hzrU6zrxT7Sr9TcTrZMmWKxlDIjhGfYpeq/FHvrevo4qczYJqeN0TPGUl7eJWawIXSEgcYzvVsq6xce/Ihl5mU8MrvHeG0dNChIeMZ674r1FEHhnUtKmzatKJ7xwsnpRVr6nz9u6MTx4x0tFkf7aMiLAeXFVuu3ryUV/VNTvLykowvmp/J/4enWSWMMTdUK3UMvqlCbGsYkpfKH/LizLpg+VPpCZCdOGD1q0USviUuWBBmSfaLMe83R3iWpU6t7Xu35aJB58VvHTo4rzaK3i81tevXUX4OhgPlbDBR2MI/VEaIAqJr8Hyh33Zp5V5yvsf/I33CY71S3ts/5p5oUwO/Z2ckQmcca7bMnZKgt/SOkNSeaIifWrkjjzS4BnexITIHXP/QnBC4870t3rV1LUHENoVAPX6iohCAbNgYWTKRARyUfBtGUXbzhTG8EklIf3BiHQMKBHSBjxwkQOHANqWCfgWvq6B9mDhGw8hnna66dYl0VK2JDRskflal0bNht5dU/kX81sUblLusT6so4hV6QzD/QQfs4wX3nkRkTq7R0Rw9D0wj1KhVS8wqz/uz7nPdGXirtYOVCQcxAhiT+kFJKdNieb1apn3+C3JdGTEvGyoKfQDnl8iTkCWogH5qu1ti5rHa+5SLGMLWLKdEid3BBo2cE6fM3VSBlPEWLVO/Mx7O4rsYbX9de5QVAQ17RmJKaliU9q8nLQSd949xNe5d5YZOuYJtYpMVgAAAA') format('woff2'),
-  url('iconfont.woff?t=1589093258183') format('woff'),
-  url('iconfont.ttf?t=1589093258183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1589093258183#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1589600279929'); /* IE9 */
+  src: url('iconfont.eot?t=1589600279929#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAToAAsAAAAACjQAAASaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDbAqGdIVKATYCJAMgCxIABCAFhG0HWhuuCFGUL06P7EeBu7Ns23XnnUbqEBg5Rxe8JPHwtd/v3N198j8mTS0xNPFqiZAYEpRCggSxUQqJUDRkeH+8Z71U20nXyMJKT1i54Sq9JF3q5PYA8U8NEBAj+eBY6kdpet5XgrxiRqyDNh0PaGARiUG2xgn7DMwz10mRSr3muwn0zQqCnOPDckCpoAcF4p6lK0GZ8io1xNA66pIzi3gl16bndAnAi/n4+IWIlCRVRo+8vssmIO1zy9s/0q6uC0oUgm68MPbnkbENFOKpNPpI6qrbpPrX7WVugGGtpB5r/zNvX7/99PbX2z//O9K4j9NpPAwz5Oi/eCBrFJVaSEQN1sEN9rbW8LlFCMl8ntGW2V7DrcD2EW4VbJ/gVsP2C24B2x+MkUCrzhgFRvBPXAC17xtrfiLDihDyYCI1H2BhJh9oYm71W5lFq/kca5hrY2GwQ/QlQbloB4E26FF0knVBkd5xjg1JzJmrUk22Ky4k2xhsW+/cyUOP3vUkI27dyll+O9n61q51ro3KYLfy7oYw+bbVPfW8O9SkCzd2dO+8eXHy+evbu7ZdO6ehDUiR3rZqkjUx5tXnlufmEnmauavXbly4YMOaVevmza9M0VsTecKSVLWDHW0QKP0cgK751VqTK3c3It36ruob91wDgnTbUulWKkA/3DXXLT+sUknMpKrJR7sJFFHlS1Cke8P6T18HgEpRmozreWZeoUhTVKh1ivpIOe4aENkpj/OMk48yyr6L3CvbaNRBxQ156j3k7pUgelufcyZNZzoj36NpUwkzeTIjTZKdCk8wjaa/y3Si6dh+RK2oSKpQOAQxY8fWBLVwlVZ5q0N+f0St8/W8D4vxxXAfN0fBC7a52UPqEOy0PdhB6hFunZU9fHhO5vSnlpZPY2J//hTaJgwMWDCMhTrS62nj2EyW/fwpK6chOsrR8XKkQR8Nf+edKLdCRK98uDKHtmctOcrh8t6dXGO/K9xc7Vfur30hSNz4nu75ExwnLFzoIY90DsB34YFOWdFT8rWXtPeb8QWvLCiLZaLl1QK8YpyWxaATfcX8mp4BkA8lZwC6H9ImqSndYWmnNA2A3E9/kN5NX3dLekYa/If8G3NPbig3S/rdqgr4eN1th2x3WAb97e17Hwv+frqWy8rNQH1tucxPeMVYtr2oTUKfreFvlxz3ZEz7VOt+QmsqQNKYgay1jCzYbagM2IVa6wj6tqjPHzCBJxWlh039BMKorZAMe4Ns1GVkwT6GyrTPUBtNCn03YXXFAauxaCZPVookgVU1Y6yGq6d4QETt4BiS1tVW8rHB0PJIXmALWHhIWLahJutJfoxjhAY6QhQpjOK5Ogwn9yNrazlMy3PVpEYMYURRmxAaSpW9UYiGqwPUGR6pkohEwFRphmFpcOpRamMRmnv/MUg0nVqV+JpZr4p5SDwBu3VMuBBhLZBqa32rWdeyvaABLYJIRG32o/A4dTA4wqRaVuVgtOW7VSNpiEIwPcpaCUKT1ai21pD57XWv9Cboo09tI0WOElXU0UQbPeWBrNfJNbWcQMp04sa8TKykBTnP0owoqyUpUcZwdSQAAAA=') format('woff2'),
+  url('iconfont.woff?t=1589600279929') format('woff'),
+  url('iconfont.ttf?t=1589600279929') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1589600279929#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,6 +15,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-menu:before {
+  content: "\e7f4";
+}
+
+.icon-close:before {
+  content: "\e7fc";
+}
+
 .icon-user:before {
   content: "\e7ae";
 }