manage mobile sidebar

4 files changed, 126 insertions, 3 deletions

diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index c3deae8..b074aa1 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -26,6 +26,7 @@ $sidebar-width-tablet: 40%
 $content-width-tablet: 60%
 $padding-content: 35px 45px
 $padding-content_mobile: 0px 45px 35px
+$padding-mobile-header: 15px 45px
 
 $margin-blocks: 30px
 
diff --git a/assets/sass/scaffold.sass b/assets/sass/scaffold.sass
index 4a7f54c..43ec779 100644
--- a/assets/sass/scaffold.sass
+++ b/assets/sass/scaffold.sass
@@ -252,3 +252,73 @@ img.gopher
   margin: 0 auto $margin-blocks !important
   max-width: 200px
 
+// MOBILE ONLY
+
++desktop
+  .overlay-menu, .mobile-menu, .hamburger
+    display: none
+
++tablet
+  .overlay-menu, .mobile-menu, .hamburger
+    display: none
+
++smartphone
+  .mobile-header
+    padding: $padding-mobile-header
+    background: $dark-blue
+    color: $grey-100
+    
+    p
+      font-size: $font-size_h2
+      text-align: center
+      margin: 0
+  header
+    display: none
+  .overlay-menu, .mobile-menu
+    display: block
+  .mobile-menu
+    display: flex
+    height: 100vh
+    align-items: center
+    justify-content: center
+
+  .overlay-menu
+    display: none
+    +transition(all 0.3s)
+    background: $dark-blue !important
+    width: 0%
+    height: 0vh
+    position: absolute
+    top: 0
+    z-index: 1
+
+    header
+      display: block
+
+  .hamburger
+    cursor: pointer
+    position: absolute
+    top: 30px
+    left: 16px
+    display: block
+    z-index: 100
+
+    .bar
+      width: 22px
+      height: 2px
+      background-color: $grey-100
+      margin-bottom: 5px
+      position: relative
+      +transition(all 0.2s)
+    &.cross .bar
+      transform-origin: 50% 50%
+      &:nth-child(1)
+        +transform(rotate(45deg))
+        top: 7px
+      &:nth-child(3)
+        +transform(rotate(-45deg))
+      &:nth-child(2)
+        display: none
+
+
+// MOBILE ONLY END
\ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9e98648..c9c4a2f 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -8,5 +8,22 @@
   </footer>
   <link href="https://fonts.googleapis.com/css?family=Montserrat:500,600|Raleway:400,400i,600" rel="stylesheet">
   {{ template "_internal/google_analytics.html" . }}
+  <script type="text/javascript">
+    document.querySelector('.mobile-header').addEventListener('click', function () {
+      var om = document.querySelector(".overlay-menu");
+      if (document.querySelector('.hamburger').classList.contains("cross")) {
+        document.querySelector('.hamburger').classList.remove("cross");
+        om.style.display = "none";
+        om.style.width = "0%";
+        om.style.height = "0%";
+      }
+      else {
+        document.querySelector('.hamburger').classList.add("cross");
+        om.style.width = "100%";
+        om.style.height = "100vh";
+        om.style.display = "block";
+      }
+    });
+  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/layouts/partials/sidebar/sidebar.html b/layouts/partials/sidebar/sidebar.html
index b4829d6..ea01053 100644
--- a/layouts/partials/sidebar/sidebar.html
+++ b/layouts/partials/sidebar/sidebar.html
@@ -1,5 +1,4 @@
 <header style="{{ partial "sidebar/style" . | safeCSS }}">
-
   <div class="intro">
     <div class="logo-container">
       <a href="/">
@@ -19,11 +18,47 @@
         </p>
       {{ end }}
     </div>
-
   </div>
 
   <div class="socials">
       {{ partial "sidebar/social" .}}
   </div>
+</header>
+
+<div class="mobile-header">
+  <p> {{ .Site.Title }} </p>
+  <div class="hamburger">
+    <div class="bar"></div>
+    <div class="bar"></div>
+    <div class="bar"></div>
+  </div>
+</div>
 
-</header>
\ No newline at end of file
+<div class="overlay-menu">
+  <header>
+    <div class="intro">
+      <div class="logo-container">
+        <a href="/">
+          <img src='{{ .Site.Params.sidebar.logo | default "images/edna-west.jpg" | absURL }}' alt="Profile {{ .Title }}" class="rounded-logo">
+        </a>
+      </div>
+      <h2>{{ .Site.Params.intro.main | default "Welcome, I'm John Doe" | emojify }}</h2>
+      <h3>{{ .Site.Params.intro.sub | default "This is my personal website" | emojify }}</h3>
+      <div class="menu">
+        {{ partial "sidebar/menu" . }}
+        {{ if .Site.Params.contact.email }}
+          {{ $email := printf "mailto:%s" .Site.Params.contact.email}}
+          <p>
+              <a href="{{ $email }}" target="_blank" rel="external">
+                  {{ .Site.Params.contact.text | emojify }}
+              </a>
+          </p>
+        {{ end }}
+      </div>
+    </div>
+
+    <div class="socials">
+        {{ partial "sidebar/social" .}}
+    </div>
+  </header>
+</div>
\ No newline at end of file