root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Improved menu

Browse Source
This commit is contained in:
root
2026-01-01 18:33:54 +01:00
parent 7e51896d00
commit 9e19237311
7 changed files with 253 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/layout/navbar/NavbarMobileMenu.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="transform opacity-0 -translate-y-2"
enter-to-class="transform opacity-100 translate-y-0"
leave-active-class="transition ease-in duration-150"
leave-from-class="transform opacity-100 translate-y-0"
leave-to-class="transform opacity-0 -translate-y-2"
>
<div v-show="isOpen" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur-xl absolute top-16 left-0 w-full z-40 shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1">
<router-link to="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">Generator</router-link>
<router-link to="/blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">Blog</router-link>
<router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">About</router-link>
<router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link>
<div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3">
<a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<i class="fab fa-github text-xl"></i>
</a>
<a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2]">
<i class="fab fa-discord text-xl"></i>
</a>
<button
@click="
$emit('open-help');
$emit('close');
"
class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
>
<i class="fas fa-question-circle text-xl"></i>
</button>
</div>
</div>
</div>
</transition>
</template>
<script setup lang="ts">
import { RouterLink } from 'vue-router';
defineProps<{
isOpen: boolean;
}>();
defineEmits(['close', 'open-help']);
</script>