Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-07-01 00:50:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(navbar): add conditional transparency.

Browse Source
This commit is contained in:
limes.pink 2025-04-15 03:07:49 +02:00
parent 5373788e7c
commit 6168490f8c
2 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/css/main.css
View File

@ -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);
}

24
src/components/Navbar/Navbar.vue
View File

@ -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>