0.6.0 (#12)

* Fix ineffective option, fixed #10

* Feat: dropdown list, #6

* Fix repo url

* Feat: sidebar with toggle

* Update doc

themes/buble.css

@@ -21,6 +21,51 @@ nav {
   text-align: right;
 }
 
+nav ul, nav li {
+  list-style: none;
+  display: inline-block;
+}
+
+/* navbar dropdown */
+nav li {
+  position: relative;
+}
+
+nav li ul {
+  padding: 0;
+  max-height: 0;
+  position: absolute;
+  top: 24px;
+  background-color: rgba(255, 255, 255, .6);
+  border: 1px solid #0074D9;
+  right: 0;
+  overflow: hidden;
+  opacity: 0;
+  overflow-y: auto;
+  transition: opacity .3s ease, max-height .5s ease;
+}
+
+nav li:hover ul {
+  opacity: 1;
+  max-height: 100px;
+}
+
+nav li ul li {
+  display: block;
+}
+
+nav li ul a {
+  display: block;
+  font-size: 14px;
+  margin: 0;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+nav li ul a.active {
+  border-bottom: 0;
+}
+
 nav a {
   margin: 0 1em;
   padding: 5px 0;
@@ -108,6 +153,8 @@ main {
   width: 16em;
   z-index: 1;
   padding-top: 40px;
+  left: 0;
+  transition: left 250ms ease-out;
 }
 
 .sidebar ul {
@@ -138,6 +185,32 @@ main {
   color: #333;
 }
 
+/* sidebar toggle */
+.sidebar-toggle {
+  background-color: transparent;
+  border: 0;
+  bottom: 10px;
+  left: 10px;
+  position: absolute;
+  text-align: center;
+  transition: opacity .3s;
+  width: 30px;
+  z-index: 10;
+  outline: none;
+}
+
+.sidebar-toggle:hover {
+  opacity: .4;
+}
+
+.sidebar-toggle span {
+  background-color: #0074D9;
+  display: block;
+  height: 2px;
+  margin-bottom: 4px;
+  width: 16px;
+}
+
 /* main content */
 .content {
   bottom: 0;
@@ -148,15 +221,43 @@ main {
   top: 0;
   overflow-x: hidden;
   padding-top: 20px;
+  transition: left 250ms ease;
+}
+
+main.close .sidebar {
+  left: -16em;
+}
+
+main.close .content {
+  left: 0;
 }
 
 @media screen and (max-width: 600px) {
+  nav {
+    margin-top: 16px;
+  }
+
+  nav li ul {
+    top: 30px;
+  }
+
   .sidebar {
     left: -16em;
+    transition: left 250ms ease;
   }
 
   .content {
     left: 0;
+    min-width: 100vw;
+    transition: left 250ms ease-out;
+  }
+
+  main.close .sidebar {
+    left: 0;
+  }
+
+  main.close .content {
+    left: 16em;
   }
 }