Skip to content

Commit

Permalink
chore(sidebar): rework sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@matheusmedeiros
matheusmedeiros committed Apr 15, 2021
1 parent 04ea14f commit c544f5b
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 1,374 deletions.
78 changes: 28 additions & 50 deletions parts/sidebar.html
View file
@@ -1,39 +1,3 @@
<section class="sidebar-mobile">
<div class="overlay"></div>
<div class="header">
<button class="burger-button">☰</button>
<div class="version-and-toggle">
<div class="version">
<svg class="logo" style="shape-rendering: geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="114" height="34"><g fill="none" fill-rule="evenodd"><g stroke="#fff" stroke-width="2"><path d="M1 1c0 .443 0 2.475 1.431 3.845s5.476 1.702 7.112 0a5.22 5.22 0 0 0 .557-.688C11 2.831 11 1.038 11 1" stroke-linecap="square"/><path d="M11 0v10.87"/><path d="M1 10.263c1.679-.63 3.369.282 5.07 2.737 1.211-2.122 2.855-3.118 4.93-2.989" stroke-linecap="round"/><path d="M11 10c1.699.014 3.014.42 3.947 1.218 1.319 1.172 3.752 5.95 6.656 8.789.962 1.413 4.637.895 7.396.919M9 16.037c2.398-.153 4.055.173 4.974.978 1.298 1.182 5.193 8.015 6.454 8.799 2.483 1.766 5.8 1.038 8.572 1.038" stroke-linejoin="round"/><path d="M1 17.99c0 .941.706 1.802 2.118 2.581l8.061 3.171c1.952.656 3.226 1.208 3.822 1.653s.929 1.114.999 2.004V31"/><path d="M6.382 21.841c2.013 1.012 3.065 1.646 3.158 1.903.139.386.368 1.799.368 1.799.123.699.123 2.518 0 5.457l-.368 1.139"/><path d="M5 32.07l15.871-.061M1 1v16.99"/></g><g fill="#fff"><path d="M1 5l1.471.725h6.444L10 5l.57 5-4.835 2-4.344-1.739z"/><path d="M40.238 24c1.511 0 2.823-.323 3.938-.968a6.51 6.51 0 0 0 2.574-2.728c.601-1.173.902-2.552.902-4.136 0-1.437-.275-2.746-.825-3.927s-1.371-2.119-2.464-2.816-2.468-1.045-4.125-1.045h0-5.192V24h5.192zm0-1.012h-4.07V9.392h4.07c1.349 0 2.49.29 3.421.869s1.643 1.382 2.134 2.409.737 2.193.737 3.498c0 1.276-.238 2.431-.715 3.465s-1.184 1.852-2.123 2.453-2.09.902-3.454.902h0zm13.471 1.232c.792 0 1.529-.154 2.211-.462a5.44 5.44 0 0 0 1.782-1.287 5.97 5.97 0 0 0 1.177-1.903c.279-.719.418-1.474.418-2.266 0-.807-.139-1.566-.418-2.277a5.9 5.9 0 0 0-1.188-1.892c-.513-.55-1.107-.983-1.782-1.298a5.13 5.13 0 0 0-2.2-.473c-.792 0-1.529.158-2.211.473a5.58 5.58 0 0 0-1.782 1.298 6 6 0 0 0-1.177 1.892c-.279.711-.418 1.47-.418 2.277 0 .792.139 1.547.418 2.266s.667 1.353 1.166 1.903a5.32 5.32 0 0 0 1.771 1.287c.682.308 1.426.462 2.233.462zm-.022-.99a4.02 4.02 0 0 1-2.244-.66 4.83 4.83 0 0 1-1.617-1.771c-.403-.741-.605-1.558-.605-2.453 0-.924.205-1.76.616-2.508s.953-1.349 1.628-1.804 1.423-.682 2.244-.682a3.99 3.99 0 0 1 2.233.671c.682.447 1.225 1.045 1.628 1.793s.605 1.569.605 2.464-.202 1.72-.605 2.475a4.84 4.84 0 0 1-1.628 1.804c-.682.447-1.434.671-2.255.671zm11.612.99c.719 0 1.39-.121 2.013-.363a5.35 5.35 0 0 0 1.639-.99c.469-.418.799-.898.99-1.441h0l-1.078-.308c-.117.367-.363.711-.737 1.034s-.814.583-1.32.781-1.023.297-1.551.297c-.821 0-1.573-.224-2.255-.671s-1.228-1.052-1.639-1.815-.616-1.599-.616-2.508c0-.924.202-1.756.605-2.497s.942-1.324 1.617-1.749a4.16 4.16 0 0 1 2.266-.638c.748 0 1.434.18 2.057.539s1.104.854 1.441 1.485h0l1.078-.352c-.396-.821-.99-1.47-1.782-1.947s-1.709-.715-2.75-.715c-1.085 0-2.053.264-2.904.792a5.65 5.65 0 0 0-2.002 2.112c-.484.88-.726 1.87-.726 2.97a6.19 6.19 0 0 0 .429 2.31c.286.719.686 1.353 1.199 1.903a5.67 5.67 0 0 0 1.804 1.298c.689.315 1.43.473 2.222.473zm9.178 0a5.42 5.42 0 0 0 2.827-.781c.873-.521 1.558-1.236 2.057-2.145h0l.022 1.716c.015.264.103.488.264.671s.367.29.616.319a.87.87 0 0 0 .209.022 3.67 3.67 0 0 0 .341-.022h0v-.902c-.147-.015-.26-.066-.341-.154s-.121-.22-.121-.396h0V12.56h-1.1v7.216c-.22.689-.557 1.294-1.012 1.815s-.979.924-1.573 1.21-1.214.429-1.859.429c-.968 0-1.69-.348-2.167-1.045s-.715-1.756-.715-3.179h0V12.56h-1.1v6.6c0 1.672.308 2.933.924 3.784s1.525 1.276 2.728 1.276zm12.675 0c.792 0 1.529-.154 2.211-.462a5.44 5.44 0 0 0 1.782-1.287 5.97 5.97 0 0 0 1.177-1.903c.279-.719.418-1.474.418-2.266 0-.807-.139-1.566-.418-2.277a5.9 5.9 0 0 0-1.188-1.892c-.513-.55-1.107-.983-1.782-1.298a5.13 5.13 0 0 0-2.2-.473c-.792 0-1.529.158-2.211.473a5.58 5.58 0 0 0-1.782 1.298 6 6 0 0 0-1.177 1.892c-.279.711-.418 1.47-.418 2.277 0 .792.139 1.547.418 2.266s.667 1.353 1.166 1.903a5.32 5.32 0 0 0 1.771 1.287c.682.308 1.426.462 2.233.462zm-.022-.99a4.02 4.02 0 0 1-2.244-.66 4.83 4.83 0 0 1-1.617-1.771c-.403-.741-.605-1.558-.605-2.453 0-.924.205-1.76.616-2.508s.953-1.349 1.628-1.804 1.423-.682 2.244-.682a3.99 3.99 0 0 1 2.233.671c.682.447 1.225 1.045 1.628 1.793s.605 1.569.605 2.464-.202 1.72-.605 2.475a4.84 4.84 0 0 1-1.628 1.804c-.682.447-1.434.671-2.255.671zm10.952.77l2.53-5.962 2.53 5.962h.968l4.95-11.44h-1.1l-4.356 10.23-2.354-5.588 1.914-4.62h-1.012l-1.54 3.762-1.562-3.762h-.99l1.914 4.62-2.354 5.588-4.378-10.23h-1.078L97.114 24h.968zm13.75.132c.264 0 .579-.037.946-.11s.675-.154.924-.242h0l-.22-.902c-.191.073-.411.132-.66.176s-.491.066-.726.066c-.352 0-.638-.099-.858-.297s-.33-.561-.33-1.089h0V7.94h-1.122v14.124c0 .631.187 1.133.561 1.507s.869.561 1.485.561z" fill-rule="nonzero"/></g></g><defs /></svg>
<small>v0.2</small>
</div>
<div class="theme-toggle">
<input type="checkbox" class="dn" id="theme-selector"/>
<label for="theme-selector" class="toggle">
<span class="toggle-handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
</label>
</div>
</div>
</div>
<div id="mobile-menu-content" class="wrapper">
<div class="content">
<div class="toc">
{{.TOC}}
</div>
</div>
</div>
<script type="text/javascript">
{{ .ToggleMenu }}
</script>
</section>
<section id="search-container">
<div class="search-box">
<input type="text" id="search-input" placeholder="Type to search..." autocomplete="off" />
Expand All @@ -46,26 +10,28 @@
</div>
</section>
<section id="sidebar">
<div class="overlay"></div>
<div class="header">
<button class="burger-button">☰</button>
<div class="version-and-toggle">
<div class="version">
<svg class="logo" style="shape-rendering: geometricPrecision" xmlns="http://www.w3.org/2000/svg" width="114" height="34"><g fill="none" fill-rule="evenodd"><g stroke="#fff" stroke-width="2"><path d="M1 1c0 .443 0 2.475 1.431 3.845s5.476 1.702 7.112 0a5.22 5.22 0 0 0 .557-.688C11 2.831 11 1.038 11 1" stroke-linecap="square"/><path d="M11 0v10.87"/><path d="M1 10.263c1.679-.63 3.369.282 5.07 2.737 1.211-2.122 2.855-3.118 4.93-2.989" stroke-linecap="round"/><path d="M11 10c1.699.014 3.014.42 3.947 1.218 1.319 1.172 3.752 5.95 6.656 8.789.962 1.413 4.637.895 7.396.919M9 16.037c2.398-.153 4.055.173 4.974.978 1.298 1.182 5.193 8.015 6.454 8.799 2.483 1.766 5.8 1.038 8.572 1.038" stroke-linejoin="round"/><path d="M1 17.99c0 .941.706 1.802 2.118 2.581l8.061 3.171c1.952.656 3.226 1.208 3.822 1.653s.929 1.114.999 2.004V31"/><path d="M6.382 21.841c2.013 1.012 3.065 1.646 3.158 1.903.139.386.368 1.799.368 1.799.123.699.123 2.518 0 5.457l-.368 1.139"/><path d="M5 32.07l15.871-.061M1 1v16.99"/></g><g fill="#fff"><path d="M1 5l1.471.725h6.444L10 5l.57 5-4.835 2-4.344-1.739z"/><path d="M40.238 24c1.511 0 2.823-.323 3.938-.968a6.51 6.51 0 0 0 2.574-2.728c.601-1.173.902-2.552.902-4.136 0-1.437-.275-2.746-.825-3.927s-1.371-2.119-2.464-2.816-2.468-1.045-4.125-1.045h0-5.192V24h5.192zm0-1.012h-4.07V9.392h4.07c1.349 0 2.49.29 3.421.869s1.643 1.382 2.134 2.409.737 2.193.737 3.498c0 1.276-.238 2.431-.715 3.465s-1.184 1.852-2.123 2.453-2.09.902-3.454.902h0zm13.471 1.232c.792 0 1.529-.154 2.211-.462a5.44 5.44 0 0 0 1.782-1.287 5.97 5.97 0 0 0 1.177-1.903c.279-.719.418-1.474.418-2.266 0-.807-.139-1.566-.418-2.277a5.9 5.9 0 0 0-1.188-1.892c-.513-.55-1.107-.983-1.782-1.298a5.13 5.13 0 0 0-2.2-.473c-.792 0-1.529.158-2.211.473a5.58 5.58 0 0 0-1.782 1.298 6 6 0 0 0-1.177 1.892c-.279.711-.418 1.47-.418 2.277 0 .792.139 1.547.418 2.266s.667 1.353 1.166 1.903a5.32 5.32 0 0 0 1.771 1.287c.682.308 1.426.462 2.233.462zm-.022-.99a4.02 4.02 0 0 1-2.244-.66 4.83 4.83 0 0 1-1.617-1.771c-.403-.741-.605-1.558-.605-2.453 0-.924.205-1.76.616-2.508s.953-1.349 1.628-1.804 1.423-.682 2.244-.682a3.99 3.99 0 0 1 2.233.671c.682.447 1.225 1.045 1.628 1.793s.605 1.569.605 2.464-.202 1.72-.605 2.475a4.84 4.84 0 0 1-1.628 1.804c-.682.447-1.434.671-2.255.671zm11.612.99c.719 0 1.39-.121 2.013-.363a5.35 5.35 0 0 0 1.639-.99c.469-.418.799-.898.99-1.441h0l-1.078-.308c-.117.367-.363.711-.737 1.034s-.814.583-1.32.781-1.023.297-1.551.297c-.821 0-1.573-.224-2.255-.671s-1.228-1.052-1.639-1.815-.616-1.599-.616-2.508c0-.924.202-1.756.605-2.497s.942-1.324 1.617-1.749a4.16 4.16 0 0 1 2.266-.638c.748 0 1.434.18 2.057.539s1.104.854 1.441 1.485h0l1.078-.352c-.396-.821-.99-1.47-1.782-1.947s-1.709-.715-2.75-.715c-1.085 0-2.053.264-2.904.792a5.65 5.65 0 0 0-2.002 2.112c-.484.88-.726 1.87-.726 2.97a6.19 6.19 0 0 0 .429 2.31c.286.719.686 1.353 1.199 1.903a5.67 5.67 0 0 0 1.804 1.298c.689.315 1.43.473 2.222.473zm9.178 0a5.42 5.42 0 0 0 2.827-.781c.873-.521 1.558-1.236 2.057-2.145h0l.022 1.716c.015.264.103.488.264.671s.367.29.616.319a.87.87 0 0 0 .209.022 3.67 3.67 0 0 0 .341-.022h0v-.902c-.147-.015-.26-.066-.341-.154s-.121-.22-.121-.396h0V12.56h-1.1v7.216c-.22.689-.557 1.294-1.012 1.815s-.979.924-1.573 1.21-1.214.429-1.859.429c-.968 0-1.69-.348-2.167-1.045s-.715-1.756-.715-3.179h0V12.56h-1.1v6.6c0 1.672.308 2.933.924 3.784s1.525 1.276 2.728 1.276zm12.675 0c.792 0 1.529-.154 2.211-.462a5.44 5.44 0 0 0 1.782-1.287 5.97 5.97 0 0 0 1.177-1.903c.279-.719.418-1.474.418-2.266 0-.807-.139-1.566-.418-2.277a5.9 5.9 0 0 0-1.188-1.892c-.513-.55-1.107-.983-1.782-1.298a5.13 5.13 0 0 0-2.2-.473c-.792 0-1.529.158-2.211.473a5.58 5.58 0 0 0-1.782 1.298 6 6 0 0 0-1.177 1.892c-.279.711-.418 1.47-.418 2.277 0 .792.139 1.547.418 2.266s.667 1.353 1.166 1.903a5.32 5.32 0 0 0 1.771 1.287c.682.308 1.426.462 2.233.462zm-.022-.99a4.02 4.02 0 0 1-2.244-.66 4.83 4.83 0 0 1-1.617-1.771c-.403-.741-.605-1.558-.605-2.453 0-.924.205-1.76.616-2.508s.953-1.349 1.628-1.804 1.423-.682 2.244-.682a3.99 3.99 0 0 1 2.233.671c.682.447 1.225 1.045 1.628 1.793s.605 1.569.605 2.464-.202 1.72-.605 2.475a4.84 4.84 0 0 1-1.628 1.804c-.682.447-1.434.671-2.255.671zm10.952.77l2.53-5.962 2.53 5.962h.968l4.95-11.44h-1.1l-4.356 10.23-2.354-5.588 1.914-4.62h-1.012l-1.54 3.762-1.562-3.762h-.99l1.914 4.62-2.354 5.588-4.378-10.23h-1.078L97.114 24h.968zm13.75.132c.264 0 .579-.037.946-.11s.675-.154.924-.242h0l-.22-.902c-.191.073-.411.132-.66.176s-.491.066-.726.066c-.352 0-.638-.099-.858-.297s-.33-.561-.33-1.089h0V7.94h-1.122v14.124c0 .631.187 1.133.561 1.507s.869.561 1.485.561z" fill-rule="nonzero"/></g></g><defs /></svg>
<small>v{{.Version}}</small>
</div>
<div class="theme-toggle">
<input type="checkbox" class="dn" id="theme-selector"/>
<label for="theme-selector" class="toggle">
<span class="toggle-handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
</label>
</div>
<input type="checkbox" class="dn" id="theme-selector"/>
<label for="theme-selector" class="toggle">
<span class="toggle-handler">
<span class="crater crater--1"></span>
<span class="crater crater--2"></span>
<span class="crater crater--3"></span>
</span>
<span class="star star--1"></span>
<span class="star star--2"></span>
<span class="star star--3"></span>
<span class="star star--4"></span>
</label>
</div>
</div>
<script type="text/javascript">
{{ .ThemeSelector }}
Expand All @@ -78,8 +44,20 @@
</div>
{{ end }}
</div>
<div class="toc">
<!-- Desktop menu -->
<div class="desktop-menu-content toc">
{{.TOC}}
</div>
<!-- Mobile menu -->
<div class="mobile-menu-content">
<div class="content">
<div class="toc">
{{.TOC}}
</div>
</div>
</div>
<script type="text/javascript">
{{ .ToggleMenu }}
</script>
</section>
<section id="content">
4 changes: 2 additions & 2 deletions static/js/toggle_menu.js
View file
@@ -1,7 +1,7 @@
(() => {
const button = document.querySelector('.burger-button');
const menuContent = document.querySelector('#mobile-menu-content');
const overlay = document.querySelector('.sidebar-mobile .overlay');
const menuContent = document.querySelector('.mobile-menu-content');
const overlay = document.querySelector('#sidebar .overlay');

const toggleMenu = () => {
menuContent.classList.toggle('menu-active');
Expand Down

0 comments on commit c544f5b

Please sign in to comment.