vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: added vueuse for onClickOutside, upgraded functionality for hamburger menu and locale picker

Browse source
This commit is contained in:
Benjamin Singleton 2025-06-14 12:38:57 -05:00
parent 3b74fc00f1
commit 6ea53dc652
4 changed files with 80 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

26
apps/vdn-static/src/App.vue
View file

@ -3,16 +3,21 @@ import "./assets/style.scss";
import { ref, type Ref } from "vue";
import { SAMPLE } from "@repo/common/sample";
import LocalePicker from "./components/organisms/LocalePicker.vue";
import { vOnClickOutside } from "@vueuse/components";
const burgerOpen: Ref<boolean> = ref<boolean>(false);
const toggleBurger = (): void => {
burgerOpen.value = !burgerOpen.value;
};
const closeBurger = (): void => {
burgerOpen.value = false;
};
</script>
<template>
<div class="min-h-screen flex flex-col">
<div class="min-h-screen flex flex-col" v-on-click-outside="closeBurger">
<!-- Main application wrapper -->
<nav
class="navbar is-fixed-top"
@ -37,15 +42,24 @@ const toggleBurger = (): void => {
<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
<div class="navbar-start">
<RouterLink class="navbar-item" to="/"
<RouterLink
class="navbar-item"
to="/"
@click="closeBurger()"
>What is Viossa?</RouterLink
>
<RouterLink class="navbar-item" to="/resources"
<RouterLink
class="navbar-item"
to="/resources"
@click="closeBurger()"
>Resources</RouterLink
>
<RouterLink class="navbar-item" to="/resources">{{
SAMPLE
}}</RouterLink>
<RouterLink
class="navbar-item"
to="/resources"
@click="closeBurger()"
>{{ SAMPLE }}</RouterLink
>
<LocalePicker />
</div>
</div>

36
apps/vdn-static/src/components/organisms/LocalePicker.vue
View file

@ -1,44 +1,28 @@
<script setup lang="ts">
import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
import { ref } from "vue";
import { vOnClickOutside } from "@vueuse/components";
const isOpen = ref<boolean>(false);
const dropdownRef = useTemplateRef("dropdown");
const toggleOpen = (): void => {
isOpen.value = !isOpen.value;
};
const close = (): void => {
isOpen.value = false;
};
const setLocaleId = (id: LocaleId): void => {
localeId.value = id;
close();
};
const detectFocus = (e: MouseEvent) => {
if (!isOpen) {
return;
}
const dropdown = dropdownRef.value;
if (!dropdown) {
return;
}
const { target } = e;
const focused =
target instanceof Node
&& (dropdown === target || dropdown.contains(target));
if (!focused) {
isOpen.value = false;
}
};
onMounted(() => window.addEventListener("click", detectFocus));
onUnmounted(() => window.removeEventListener("click", detectFocus));
</script>
<template>
<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
<div
:class="['dropdown', isOpen && 'is-active']"
v-on-click-outside="close">
<div class="dropdown-trigger">
<button
class="button"