diff --git a/404.dev.html b/404.dev.html index 81e930d..a2b9bee 100644 --- a/404.dev.html +++ b/404.dev.html @@ -8,5 +8,5 @@
- + diff --git a/CHANGELOG.md b/CHANGELOG.md index ea38ec9..25575c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.6.1 +### Bug fixes +- In the mobile, it should collapse the sidebar when toggle is clicked. +- Fix the dropdown list style. +- Fix sidebar animation. + ## 0.6.0 ### Features - Navbar support dropdown list, #6 diff --git a/src/event.js b/src/event.js index 357c64c..1b20b36 100644 --- a/src/event.js +++ b/src/event.js @@ -77,7 +77,12 @@ export function activeLink (dom, activeParent) { export function bindToggle (dom) { dom = typeof dom === 'object' ? dom : document.querySelector(dom) if (!dom) return - const main = document.querySelector('main') + const body = document.body - dom.addEventListener('click', () => main.classList.toggle('close')) + dom.addEventListener('click', () => body.classList.toggle('close')) + + if (!/mobile/i.test(navigator.userAgent)) return + document.querySelector('aside').addEventListener('click', event => { + body.classList.toggle('close') + }) } diff --git a/themes/buble.css b/themes/buble.css index 725a087..78debb3 100644 --- a/themes/buble.css +++ b/themes/buble.css @@ -17,7 +17,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -32,36 +32,41 @@ nav li { } 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; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } 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 { + display: block; + padding: 0; + margin: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -89,7 +94,7 @@ nav a.active { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -132,6 +137,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -154,7 +160,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -221,14 +227,13 @@ main { top: 0; overflow-x: hidden; padding-top: 20px; - transition: left 250ms ease; } -main.close .sidebar { - left: -16em; +body.close .sidebar { + transform: translateX(-16em); } -main.close .content { +body.close .content { left: 0; } @@ -243,21 +248,29 @@ main.close .content { .sidebar { left: -16em; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(16em); } - main.close .content { - left: 16em; + body.close .content { + transform: translateX(16em); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(16em); } } diff --git a/themes/pure.css b/themes/pure.css index b1e7516..031bd0e 100644 --- a/themes/pure.css +++ b/themes/pure.css @@ -15,7 +15,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -30,36 +30,41 @@ nav li { } nav li ul { - padding: 0; - max-height: 0; - position: absolute; - top: 24px; background-color: rgba(255, 255, 255, .6); border: 1px solid #000; - right: 0; - overflow: hidden; opacity: 0; - overflow-y: auto; - transition: opacity .3s ease, max-height .5s ease; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } 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 { + display: block; + margin: 0; + padding: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -78,7 +83,7 @@ nav a { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -117,6 +122,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -137,7 +143,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -197,11 +203,11 @@ main { transition: left 250ms ease; } -main.close .sidebar { +body.close .sidebar { left: -300px; } -main.close .content { +body.close .content { left: 0; } @@ -216,21 +222,29 @@ main.close .content { .sidebar { left: -300px; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(300px); } - main.close .content { - left: 300px; + body.close .content { + transform: translateX(300px); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(300px); } } diff --git a/themes/vue.css b/themes/vue.css index e192351..e2468f7 100644 --- a/themes/vue.css +++ b/themes/vue.css @@ -17,7 +17,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -29,39 +29,45 @@ nav ul, nav li { /* navbar dropdown */ nav li { position: relative; + display: inline-block; } nav li ul { - padding: 0; - max-height: 0; - position: absolute; - top: 24px; background-color: rgba(255, 255, 255, .6); border: 1px solid #42b983; - right: 0; - overflow: hidden; opacity: 0; - overflow-y: auto; - transition: opacity .3s ease, max-height .5s ease; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } 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 { + display: block; + padding: 0; + margin: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -89,7 +95,7 @@ nav a.active { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -131,6 +137,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -153,7 +160,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -217,21 +224,20 @@ main { /* main content */ .content { bottom: 0; - left: 300px; overflow-y: auto; + left: 300px; position: absolute; right: 0; top: 0; overflow-x: hidden; padding-top: 20px; - transition: left 250ms ease; } -main.close .sidebar { - left: -300px; +body.close .sidebar { + transform: translateX(-300px); } -main.close .content { +body.close .content { left: 0; } @@ -246,21 +252,29 @@ main.close .content { .sidebar { left: -300px; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(300px); } - main.close .content { - left: 300px; + body.close .content { + transform: translateX(300px); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(300px); } }