side can hidden

Author: imfycc

layout/index.ejs

@@ -19,27 +19,30 @@
 <div class="right-aside">
     <div class="right-nav ms">
         <div class="main">
-            <ul class="left">
-                <% for (var i in theme.menu){ %>
-                <li>
-                    <a href="<%- url_for(theme.menu[i]) %>">
-                        <%= i %>
-                    </a>
-                </li>
-                <% } %>
-            </ul>
-            <div class="search">
-              <div class="search-box">
-                <input type="search"  id="search" class="input-search" placeholder="搜索">
-                <i class="icon-search"></i>
-                <div class="search-result-box">
-                  <ul id="search-result"></ul>
-                </div>
+          <svg id="nav-menu" class="icon icon-menu" aria-hidden="true">
+            <use xlink:href="#icon-menu"></use>
+          </svg>
+          <ul class="left">
+              <% for (var i in theme.menu){ %>
+              <li>
+                  <a href="<%- url_for(theme.menu[i]) %>">
+                      <%= i %>
+                  </a>
+              </li>
+              <% } %>
+          </ul>
+          <div class="search">
+            <div class="search-box">
+              <input type="search"  id="search" class="input-search" placeholder="搜索">
+              <i class="icon-search"></i>
+              <div class="search-result-box">
+                <ul id="search-result"></ul>
               </div>
-              <svg id="nav-search" class="icon icon-search" aria-hidden="true">
-                <use xlink:href="#icon-search"></use>
-              </svg>
             </div>
+            <svg id="nav-search" class="icon icon-search" aria-hidden="true">
+              <use xlink:href="#icon-search"></use>
+            </svg>
+          </div>
         </div>
     </div>
     <div class="right-main">

source-src/main.js

@@ -170,6 +170,22 @@ if (overdueRemindText && overdueRemindDom) {
   overdueRemindDom.innerHTML = overdueRemindText.replace(/\$day/, '<span> ' + dayNum + ' </span>');
 }
 
+var navMenu = document.getElementById('nav-menu');
+var searchContainer = document.querySelector('.search');
+navMenu.addEventListener('click', () => {
+  var leftAside = document.querySelector('.left-aside');
+  var rightAside = document.querySelector('.right-aside');
+  var rightMain = document.querySelector('.right-main');
+  if (leftAside) { leftAside.style.display = 'none'}
+  if (rightAside) { rightAside.style.marginLeft = 'unset'}
+  if (searchContainer) {searchContainer.style.right = '70px';}
+  if (rightMain) {
+    rightMain.style.float = 'unset';
+    rightMain.style.margin = '65px auto';
+    rightMain.style.width = '800px';
+  };
+});
+
 var navSearch = document.getElementById('nav-search');
 var searchBox = document.querySelector('.search-box');
 navSearch.addEventListener('mouseover', () => {

source-src/main.scss

@@ -64,7 +64,7 @@ svg.icon {
     margin-left: -35px;
   }
   &.icon-search {
-    margin-top: 10px;
+    margin-top: 21px;
   }
 }
 
@@ -162,7 +162,7 @@ svg.icon {
     }
   }
   .right-nav {
-    padding-left: 40px;
+    padding-left: 55px;
     position: fixed;
     top: 0;
     width: 100%;
@@ -172,7 +172,7 @@ svg.icon {
     li {
       list-style: none;
       float:left;
-      line-height: 40px;
+      line-height: 60px;
       margin-right: 30px;
 
       a {
@@ -187,7 +187,7 @@ svg.icon {
 .search {
   float: right;
   color: #717171;
-  line-height: 40px;
+  line-height: 60px;
   right: 395px;
   position: relative;
 
@@ -250,17 +250,17 @@ svg.icon {
     }
   }
 }
-.right-main{
-  margin-top: 58px;
-  padding-left: 40px;
+.right-main {
+  margin-top: 65px;
+  padding-left: 50px;
   float:left;
 }
 
 .category {
   li {
     list-style: none;
     float: left;
-    margin: 10px 0px 5px 10px;
+    margin: 20px 0px 5px 10px;
 
     a {
       padding: 5px 11px;