From 5d84d9a1003cc2796dc3bdf7f213ff6ed1236075 Mon Sep 17 00:00:00 2001 From: Daniel Brendel Date: Sat, 25 Mar 2023 15:02:04 +0100 Subject: [PATCH] Resolves #6 --- app/resources/js/app.js | 14 ++++++++++++-- app/resources/sass/app.scss | 12 ++++++++++-- app/views/navbar.php | 2 +- public/js/app.js | 2 +- 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/app/resources/js/app.js b/app/resources/js/app.js index 854146a..8ec87b4 100644 --- a/app/resources/js/app.js +++ b/app/resources/js/app.js @@ -29,6 +29,16 @@ window.vue = new Vue({ el.classList.toggle('is-active'); $target.classList.toggle('is-active'); + + if (el.classList.contains('is-active')) { + let rootel = document.getElementsByClassName('navbar')[0]; + rootel.classList.add('navbar-purple'); + rootel.classList.add('navbar-no-transition'); + } else { + let rootel = document.getElementsByClassName('navbar')[0]; + rootel.classList.remove('navbar-purple'); + rootel.classList.remove('navbar-no-transition'); + } }); }); } @@ -230,9 +240,9 @@ document.addEventListener('DOMContentLoaded', function(){ window.onscroll = function() { if ((document.body.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10) || (document.documentElement.scrollTop > document.getElementsByClassName('navbar')[0].offsetHeight + 10)) { - document.getElementsByClassName('navbar')[0].classList.add('navbar-background-show'); + document.getElementsByClassName('navbar')[0].classList.add('navbar-purple'); } else { - document.getElementsByClassName('navbar')[0].classList.remove('navbar-background-show'); + document.getElementsByClassName('navbar')[0].classList.remove('navbar-purple'); } }; diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss index c4be542..07b1feb 100644 --- a/app/resources/sass/app.scss +++ b/app/resources/sass/app.scss @@ -18,12 +18,20 @@ body { transition: .3s ease-in-out; } +.navbar-no-transition { + transition: unset; +} + .navbar-item-brand img { border-radius: 50%; } -.navbar-background-show { - background-color: rgb(76, 76, 120); +.navbar-purple { + background-color: rgb(76, 76, 120) !important; +} + +.navbar-menu { + background-color: rgb(76, 76, 120) !important; } a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:hover, .navbar-link.is-active { diff --git a/app/views/navbar.php b/app/views/navbar.php index 2f3a60c..7d3809a 100644 --- a/app/views/navbar.php +++ b/app/views/navbar.php @@ -11,7 +11,7 @@ -