support hide sidebar in large screen

suyan · suyan · commit 5648882f1201 · 2016-10-31T22:12:22.000-07:00
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,4 +1,4 @@
-<aside id="sidebar">
+<aside id="sidebar" class="open">
   <div id="sidebar-left">
     <a id="sidebar-avatar" href="{{ "/" | prepend: site.baseurl }}">
       <img id="sidebar-avatar-img" alt="{{ site.tittle }}" src="{{ site.avatar | prepend: site.baseurl }}"/>
diff --git a/_includes/social.html b/_includes/social.html
@@ -1,3 +1,4 @@
+<!-- Generate icon by yourself https://icomoon.io/app/#/select -->
 {% if site.twitter %}
   <a href="https://twitter.com/{{ site.twitter }}" class="sidebar-social-icon twitter" target="_blank"></a>
 {% endif %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,7 +7,7 @@
   <body>
     {% include sidebar.html %}
 
-    <main id="main">
+    <main id="main" class="open">
       {{ content }}
 
       <div class="footer">
@@ -18,7 +18,7 @@
       </div>
     </main>
 
-    <button id="menu">
+    <button id="menu" class="open">
       <span id="menu-icons"></span>
     </button>
 
diff --git a/_sass/4-sidebar.sass b/_sass/4-sidebar.sass
@@ -5,9 +5,10 @@
   position: absolute
   top: 0
   bottom: 0
-  left: 0
+  left: -$sidebar-width
   z-index: 20
   width: $sidebar-width
+  background-color: $sidebar-bg
   overflow: hidden
   transition: left .35s $time-function, transform .35s $time-function
   user-select: none
@@ -21,6 +22,8 @@
     width: $sidebar-right-width
     height: 100%
     background: $sidebar-right-bg
+  &.open
+    transform: translateX(100%)
 
 
 // Sidebar Left
diff --git a/_sass/5-post.sass b/_sass/5-post.sass
@@ -1,13 +1,15 @@
 
 #main
   float: right
-  width: calc(100% - #{$sidebar-width})
+  width: 100%
   height: 100%
   overflow: auto
   -webkit-overflow-scrolling: touch
   transition: width .35s $time-function
   // &.fadeIn
   //   animation: fadeIn .6s $time-function
+  &.open
+    width: calc(100% - #{$sidebar-width})
 
 .container
   max-width: $post-max-width
diff --git a/_sass/6-menu.sass b/_sass/6-menu.sass
@@ -1,6 +1,6 @@
 
 #menu
-  display: none
+  display: block
   position: fixed
   top: $menu-top
   right: $menu-right
@@ -34,5 +34,6 @@
       @extend %icon-right
       float: left
       width: 50%
+
   &.open > &-icons
     transform: translateX(50%)
diff --git a/_sass/a-smallscreen.sass b/_sass/a-smallscreen.sass
@@ -7,6 +7,8 @@
 
   #main
     width: 100%
+    &.open
+      width: 100%
   #menu
     display: block
   .container
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -49,11 +49,10 @@ $(function() {
       afterPjax();
       NProgress.done();
       main.scrollTop(0).addClass('fadeIn');
-      menu.add(sidebar).removeClass('open');
-      {% if site.google_analytics %}
-      ga('set', 'location', window.location.href);
-      ga('send', 'pageview');
-      {% endif %}
+      // only remove open in small screen
+      if($(window).width() <= 1024) {
+        menu.add(sidebar).add(main).removeClass('open');
+      }
     }
   });
 
@@ -73,7 +72,7 @@ $(function() {
 
   // Menu
   menu.on('click', function() {
-    $(this).add(sidebar).toggleClass('open');
+    $(this).add(sidebar).add(menu).add(main).toggleClass('open');
   });
 
 });

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<aside id="sidebar">`
	`1`	`+<aside id="sidebar" class="open">`
`2`	`2`	`<div id="sidebar-left">`
`3`	`3`	`<a id="sidebar-avatar" href="{{ "/" \| prepend: site.baseurl }}">`
`4`	`4`	`<img id="sidebar-avatar-img" alt="{{ site.tittle }}" src="{{ site.avatar \| prepend: site.baseurl }}"/>`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!-- Generate icon by yourself https://icomoon.io/app/#/select -->`
`1`	`2`	`{% if site.twitter %}`
`2`	`3`	`<a href="https://twitter.com/{{ site.twitter }}" class="sidebar-social-icon twitter" target="_blank"></a>`
`3`	`4`	`{% endif %}`