hugo-toha/assets/scripts/sections/sidebar.js
Aaron Qian 02db3d3044
Bundling JS with ESBuild (#702)
* add npm dependencies used in this theme

* implement helper to configure JS and ESBuild

* migrate jquery popper.js bootstrap fontawesome to js bundle

* refactor main.js into smaller pieces, and moved navbar.js to assets

* remove list.js. It adjusts post card height to be the same, but is actually not needed.

* refactored notes.js, search.js, single.js into application.js

* move ityped to js asset, implement experiences horizontal vertical line in css

* align recent post height via css

* migrated home.js and refactored into various sections

* migrated darkMode feature to js bundle

* moved mermaid feature to js bundle

* migrate syntax highlight to js bundle

* migrate katex ( js portion ) to js bundle

* migrate pdf-js to js bundle by delegating to cdn

* set explicit comparisions for feature envvars so js can properly optimize

* removed goat-counter

* more fixes for broken achievements and small bugs

* more bug fixes

* allow configuration of hightlight.js, fix video-player shortcode

* remove jquery all together

* add null handling and fix merge conflicts

Co-authored-by: Aaron Qian <aaron@yeet.io>
2023-01-06 00:42:54 +06:00

38 lines
1.3 KiB
JavaScript

import { getDeviceState } from '../core/device'
// Toggle sidebar on click. Here, class "hide" open the sidebar
function toggleSidebar () {
const sidebar = document.getElementById('sidebar-section')
if (sidebar == null) {
return
}
if (sidebar.classList.contains('hide')) {
sidebar.classList.remove('hide')
} else {
// if toc-section is open, then close it first
const toc = document.getElementById('toc-section')
if (toc != null && toc.classList.contains('hide')) {
toc.classList.remove('hide')
}
// add "hide" class
sidebar.classList.add('hide')
// if it is mobile device. then scroll to top.
const { isMobile } = getDeviceState()
if (isMobile && sidebar.classList.contains('hide')) {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
if (document.getElementById('hero-area') != null) {
document.getElementById('hero-area').classList.toggle('hide')
}
}
}
if (document.getElementById('content-section') != null) {
document.getElementById('content-section').classList.toggle('hide')
}
}
window.addEventListener('DOMContentLoaded', () => {
// bind click event to #sidebar-toggler in navbar-2.html
const toggle = document.getElementById('sidebar-toggler')
if (toggle) toggle.addEventListener('click', toggleSidebar)
})