Add content overlay when mobile sidebar is open
Tweak transition timing
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
</div>
</div>
<div class="main">
+ <div class="overlay"></div>
<div class="content">
{{ content | safe }}
</div>

MODIFY
website/src/styles/_mixins.scss
website/src/styles/_mixins.scss
@content;
}
}
+
+@mixin transition-timing{
+ transition-duration: 200ms;
+ transition-timing-function: cubic-bezier(0.57, 0.33, 0.19, 0.97);
+}
\ No newline at end of file

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
@import "_footer";
.sidebar {
+ @include transition-timing;
z-index: 1;
width: $sidebar-width;
list-style: none;
width: $sidebar-width;
border-right: 1px solid $gray-color;
background-color: #ffffff;
- transition: transform 250ms ease-in;
+ transition-property: transform;
@include mobile-only() {
transform: translateX(-100%);
}
}
+.overlay{
+ display: none;
+
+ @include mobile-only() {
+ @include transition-timing;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #181818;
+ opacity: 0;
+ display: block;
+ transition-property: opacity;
+
+ &.visible {
+ opacity: 0.5;
+ }
+ }
+}
+
.main {
margin-left: $sidebar-width;
overflow: hidden;

MODIFY
website/static/js/index.js
website/static/js/index.js
+const mobileHandle = document.getElementsByClassName('mobile-handle')[0];
+const toc = document.getElementsByClassName('sidebar')[0];
+const overlay = document.getElementsByClassName('overlay')[0];
+
tocbot.init({
tocSelector: '.toc-container',
ignoreSelector: '[toc-exclude]',
@@ -11,10 +15,11 @@ tocbot.init({
},
});
-document
- .getElementsByClassName('mobile-handle')[0]
- .addEventListener('click', function (event) {
+function mobileToggleEvent(event){
event.preventDefault();
- const toc = document.getElementsByClassName('sidebar')[0];
toc.classList.toggle('visible');
- });
\ No newline at end of file
+ overlay.classList.toggle('visible');
+}
+
+mobileHandle.addEventListener('click', mobileToggleEvent);
+overlay.addEventListener('click', mobileToggleEvent);
\ No newline at end of file

Add content overlay when mobile sidebar is open

- Tweak transition timing