Merge pull request #441 from pastelsky/mobile-enhancements

Mobile enhancements

Author: SpaceK33z

components/sidebar-mobile/sidebar-mobile-style.scss

@@ -3,7 +3,7 @@
 
 .sidebar-mobile {
   position: fixed;
-  width: 295px;
+  width: 300px;
   height: 100vh;
   z-index: 100;
   top: 0;
@@ -12,12 +12,12 @@
   -webkit-overflow-scrolling: touch;
   transform: translate3D(-100%, 0, 0);
   transform: translate3D(calc(-100% + 5px), 0, 0);
-  transition: all 500ms;
+  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
 
   @include break {
     display: none;
   }
-  
+
   &--visible {
     transform: translate3D(0, 0, 0);
   }
@@ -40,50 +40,73 @@
   width: 285px;
   height: 100vh;
   overflow-x: hidden;
+  padding: 12px 0;
   background: getColor(white);
-  box-shadow: 0 0 5px getColor(emperor);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 }
 
 .sidebar-mobile__close {
   position:absolute;
-  right:16px;
-  top:19px;
-  font-size:1.5em;
   cursor:pointer;
-  color:getColor(dusty-grey);
-  transition:color 250ms;
+  right: 22px;
+  top: 22px;
+  font-size: 1.3em;
+  background: getColor(denim);
+  color: getColor(white);
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background 150ms;
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
-    color:getColor(mine-shaft);
+    background: darken(getColor(denim), 20%);
   }
 }
 
 .sidebar-mobile__section {
-  font-size: getFontSize(1);
-  text-transform: uppercase;
-  color: getColor(mine-shaft);
-  margin: 1em 16px 0.25em;
+  border-left: 2px solid transparent;
+  padding-bottom:0.5em;
+
+  &--active {
+    border-left: 2px solid getColor(malibu);
 
-  &--block {
-    display: block;
+    .sidebar-mobile__section-header {
+      color: lighten(getColor(fiord), 15%)
+    }
   }
+}
 
-  &:active,
-  &--active {
-    color: getColor(malibu);
+.sidebar-mobile__section-header {
+  text-transform: uppercase;
+  color: getColor(elephant);
+  padding: 0.75em 16px 0.25em;
+  font-weight: 600;
+  display: block;
+
+  .sidebar-mobile__content div:not(:first-of-type) & {
+    border-top: 1px solid getColor(alto);
   }
 }
 
 .sidebar-mobile__page {
   display: block;
   padding: 0.5em 17px;
   text-transform: capitalize;
-  color: getColor(dusty-grey);
+  color: getColor(dove-grey);
   -webkit-tap-highlight-color: rgba(0,0,0,0);
 
   &:active,
   &--active {
     color: getColor(mine-shaft);
-    background: getColor(alto);
+    font-weight: 600;
+    background: #F1F4F4;
+  }
+
+  &:hover {
+    color: inherit;
   }
 }

components/sidebar-mobile/sidebar-mobile.jsx

@@ -68,9 +68,11 @@ export default class SidebarMobile extends React.Component {
       let active = pathname === section.url || pathname.includes(`/${section.url}`),
           absoluteUrl = `/${section.url}`;
       return (
-        <div key={ absoluteUrl }>
-          <Link 
-            className={ `sidebar-mobile__section sidebar-mobile__section--block ${active ? 'sidebar-mobile__section--active' : ''}` } 
+        <div
+          className={ `sidebar-mobile__section ${active ? 'sidebar-mobile__section--active' : ''}` }
+          key={ absoluteUrl }>
+          <Link
+            className="sidebar-mobile__section-header"
             key={ absoluteUrl }
             to={ absoluteUrl }
             onClick={ this._close.bind(this) }>  

template.ejs

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <title><%= webpackConfig.template.title %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#2B3A42">
     <link rel="shortcut icon" href="/assets/favicon.ico">
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />