Fixed styling on currently selected item in mobile menu to match mock…

…-ups. Added resize handler to toggle open class for styling when browser resized bigger than mobile minimum.
phonegap · May 10, 2016 · 07582dd · 07582dd
1 parent 7de3f11
commit 07582dd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/assets/scripts/main.js b/assets/scripts/main.js
@@ -4,6 4,12 @@ document.addEventListener('DOMContentLoaded', function(event) {
 
  toggleButton.addEventListener("click", function(e){ 
  sidebar.classList.toggle('open'); 
- }); 
-
  });
  function resize() {
  console.log("Resizing")
  if (window.innerWidth>=820 && sidebar.classList.contains('open'))
  sidebar.classList.toggle('open');
  } 
  window.addEventListener("resize", resize); 
 });
 
diff --git a/assets/styles/index.css.stylus b/assets/styles/index.css.stylus
@@ -148,9 148,7 @@ article.page
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px; 
  a
- color #1692b2 
- &.mobile
- color white 
  color #1692b2 
  h3
  font-size 0.875rem
  text-transform uppercase
@@ -161,19 159,18 @@ article.page
  ul
  list-style none 
  margin: 0 0 1rem;
- // Reduced to help tutorials sidebar page
- padding 0
  a
  color white
  display block
  width 100%
  box-sizing border-box
  padding 0 20px
  &.current
- background #40aed0
- border-top 1px solid #018bad
- border-bottom 1px solid #018bad
- box-shadow 0 1px 0 #56c0e2 
  color #ee3551
  background transparent
  border-top none
  border-bottom none
  box-shadow none 
 .mobile-docs-header
  display block
  height 45px

diff --git a/layouts/includes/sidebar.jade b/layouts/includes/sidebar.jade
@@ -26,7 26,10 @@ script.
  }, 
  }
  document.addEventListener('DOMContentLoaded', function (event) {
 
  app.init();
 
 
  })