Adjust sidebar

zivong · Jul 1, 2020 · 6537437 · 6537437
1 parent d94cbc7
commit 6537437
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 2 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,4 +1,23 @@
 <div class="wrapper">
+  <script>
+    function clickSidebarButton() {
+      const elem = document.getElementById("site-sidebar")
+      if (elem.style.display == "none") {
+        elem.style.display = "block";
+      } else {
+        elem.style.display = "none";
+      }
+    }
+  </script>
+  <a class="site-sidebar-button" onclick="clickSidebarButton()">
+    {%- if site.avatar contains "://" -%}
+      {%- assign avatar = site.avatar -%}
+    {%- else -%}
+      {%- assign avatar = site.avatar | relative_url -%}
+    {%- endif -%}
+    <i class="far fa-user"></i>
+  </a>
+
   <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>
 
   {% if site.data.navigation %}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,7 +12,7 @@
       </header>
 
       <div class="site-body wrapper">
-        <aside class="site-sidebar">
+        <aside class="site-sidebar" id="site-sidebar">
           {% include sidebar.html %}
         </aside>
         <main class="site-main" aria-label="Content">

diff --git a/_sass/hamilton/layout.scss b/_sass/hamilton/layout.scss
@@ -25,6 +25,22 @@
   }
 }
 
+.site-sidebar-button {
+  position: absolute;
+  top: -2px;
+  left: $spacing-unit / 2;
+
+  img {
+    width: $base-font-size * 2.5;
+    height: auto;
+    border-radius: 50%;
+  }
+
+  @media screen and (min-width: $on-small) {
+    display: none;
+  }
+}
+
 .site-title {
   @include relative-font-size(1.625);
   font-family: $title-font-family;
@@ -194,6 +210,12 @@
 
   @include media-query($on-small) {
     display: none;
+    border-right: none;
+    border-bottom: 1px solid;
+  }
+
+  @media screen and (min-width: $on-small) {
+    display: block !important;
   }
 }
 

diff --git a/_sass/hamilton/skin.scss b/_sass/hamilton/skin.scss
@@ -69,7 +69,7 @@ table {
 }
 
 .site-sidebar {
-  border-right-color: $border-color-light;
+  border-color: $border-color-light;
 }
 
 .site-title {