From 6168490f8c90d5f2ada892ac86b9ef8336b778b2 Mon Sep 17 00:00:00 2001
From: "limes.pink" <git@limes.pink>
Date: Tue, 15 Apr 2025 03:07:49 +0200
Subject: [PATCH] feat(navbar): add conditional transparency.

---
 src/assets/css/main.css          | 18 ++++++++++++++++++
 src/components/Navbar/Navbar.vue | 24 +++++++++++++++---------
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 052a93c..5acfe39 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -273,3 +273,21 @@ input[type="range"]:focus::-moz-range-thumb {
     display: unset !important;
   }
 }
+
+/* Scrollbar styling 'cause it's fancy */
+html::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
+}
+html::-webkit-scrollbar-track {
+	background: var(--bg-shade-1);
+}
+html::-webkit-scrollbar-thumb {
+	background-color: var(--text-shade-0);
+	border-radius: 24px;
+	border: 3px solid var(--bg-shade-1);
+}
+html {
+	scrollbar-width: thin;
+	scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
+}
\ No newline at end of file
diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue
index 6a50267..fe277af 100644
--- a/src/components/Navbar/Navbar.vue
+++ b/src/components/Navbar/Navbar.vue
@@ -12,13 +12,23 @@ function handleDropdownButton(dropdown: boolean | string) {
 		openDropdown.value = dropdown;
 	}
 }
+
+const scrollY = ref<number>(0);
+
+onMounted(() => {
+	// eslint-disable-next-line no-undef
+	window.addEventListener('scroll', () => {
+		// eslint-disable-next-line no-undef
+		scrollY.value = window.scrollY;
+	});
+});
 </script>
 
 <template>
-  <header class="transparent">
+  <header :class="{ 'transparent': scrollY === 0 }">
     <div class="left-section">
       <button
-        :class="{'dropdown-button': true, 'hide-on-desktop': true, active: openDropdown === 'mobile' }"
+        :class="{ 'dropdown-button': true, 'hide-on-desktop': true, active: openDropdown === 'mobile' }"
         @click="handleDropdownButton('mobile')"
       >
         <svg
@@ -104,7 +114,6 @@ function handleDropdownButton(dropdown: boolean | string) {
         class="dropdown"
       >
         <div
-
           class="dropdown-content"
           @click="handleDropdownButton(false)"
         >
@@ -310,13 +319,13 @@ function handleDropdownButton(dropdown: boolean | string) {
     <nav>
       <div class="dropdown-button-wrapper hide-on-mobile">
         <button
-          :class="{'dropdown-button': true, active: openDropdown === 'about' }"
+          :class="{ 'dropdown-button': true, active: openDropdown === 'about' }"
           @click="handleDropdownButton('about')"
         >
           {{ $t("nav.about") }}
         </button>
         <button
-          :class="{'dropdown-button': true, active: openDropdown === 'docs' }"
+          :class="{ 'dropdown-button': true, active: openDropdown === 'docs' }"
           @click="handleDropdownButton('docs')"
         >
           {{ $t("nav.docs") }}
@@ -359,9 +368,7 @@ function handleDropdownButton(dropdown: boolean | string) {
         </button>
       </a>
 
-      <div
-        class="dropdown"
-      >
+      <div class="dropdown">
         <div
           v-if="openDropdown === 'about'"
           class="dropdown-content"
@@ -1139,7 +1146,6 @@ header .user-widget .button.logout {
 	background: var(--bg-shade-3);
 	color: var(--text-shade-3);
 }
-
 </style>
 
 <style>