host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit sidebar style and animation

Browse source
This commit is contained in:
Paul Nicoué 2022-07-22 17:53:26 +02:00
parent 92e940b9cc
commit 5e06917b54
5 changed files with 144 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

26
public/assets/js/app.js
View file

@ -2,6 +2,12 @@
// DATA
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
const sidebar = document.querySelector('.sidebar');
const sidebarNav = document.querySelector('.sidebar__nav');
const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -16,9 +22,29 @@ function convertRemToPixels(rem) {
// LOGIC
// ----------------------------------------------------------------------------
// SIDEBAR ANIMATION
function slimDownSidebar() {
if (sidebar) {
sidebar.classList.add('sidebar--slimmed');
}
}
function slimDownSidebarOnClick() {
if (sidebarNavLinks.length > 0) {
for (let i = 0; i < sidebarNavLinks.length; i++) {
sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
}
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
// Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function() {},false);
// SIDEBAR ANIMATION
slimDownSidebarOnClick();