Fix up scrolling for two-layered nav

uwcirg · Jan 14, 2025 · 83182d8 · 83182d8
1 parent e92bc4c
commit 83182d8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/lib/components/layout/LanguageMenu.svelte b/src/lib/components/layout/LanguageMenu.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <Dropdown nav inNavbar class="navbar-dropdown" size="sm" direction="down">
-  <DropdownToggle color="primary" nav>
+  <DropdownToggle color="primary" class="pt-0" nav>
     <span style="font-size:small">
       {$locales[$locale].lang} <Icon name="globe2" />
     </span>

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
@@ -57,6 +57,11 @@
 
   function scrollFunction() {
     if (window.scrollY > 40) {
+      let links = document.getElementsByClassName("nav-link");
+      if (links.length == 0) return;
+      for(let i = 0; i < links.length; i++) {
+        links[i].classList.add("scrolling");
+      }
       document.getElementById("nav-image")?.classList.add("scrolling");
       document.getElementsByClassName("navbar")?.[0]?.classList.add("scrolling");
       let es = document.getElementsByClassName("nav-text");
@@ -65,6 +70,11 @@
         es[i].classList.add("scrolling");
       }
     } else if (window.scrollY == 0) {
+      let links = document.getElementsByClassName("nav-link");
+      if (links.length == 0) return;
+      for(let i = 0; i < links.length; i++) {
+        links[i].classList.remove("scrolling");
+      }
       document.getElementById("nav-image")?.classList.remove("scrolling");
       document.getElementsByClassName("navbar")?.[0]?.classList.remove("scrolling");
       let es = document.getElementsByClassName("nav-text");

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -132,6 +132,10 @@
     -o-transition: all 0.06s linear;
     transition: all 0.06s linear;
   }
+  :global(.nav-link.scrolling) {
+    padding-top: 0rem !important;
+    padding-bottom: 0.25rem !important;
+  }
   :global(#nav-image.scrolling) {
     width: 160px !important;
     margin-left: 10px;