[FEAT] Improved menu
This commit is contained in:
@@ -1,74 +1,43 @@
|
||||
<template>
|
||||
<nav class="sticky top-0 z-50 w-full glass border-b border-gray-200/50 dark:border-gray-800/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<!-- Logo & Brand -->
|
||||
<div class="flex-shrink-0 flex items-center gap-3">
|
||||
<router-link to="/" class="flex items-center gap-2 group">
|
||||
<div class="w-8 h-8 rounded-lg bg-gray-900 dark:bg-white flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200">
|
||||
<i class="fas fa-layer-group text-white dark:text-gray-900 text-sm"></i>
|
||||
</div>
|
||||
<span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span>
|
||||
</router-link>
|
||||
<!-- Left Side: Logo & Navigation -->
|
||||
<div class="flex items-center gap-8">
|
||||
<NavbarLogo />
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center">
|
||||
<NavbarLinks />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
<router-link to="/" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Generator</router-link>
|
||||
<router-link to="/blog" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Blog</router-link>
|
||||
<router-link to="/about" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</router-link>
|
||||
<router-link to="/faq" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">FAQ</router-link>
|
||||
</div>
|
||||
|
||||
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
|
||||
|
||||
<!-- Right Side: Actions & User -->
|
||||
<div class="hidden md:flex items-center gap-5">
|
||||
<!-- Auth & Projects -->
|
||||
<div v-if="authStore.user" class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-[150px]">
|
||||
{{ authStore.user.email }}
|
||||
</span>
|
||||
<button @click="openSaveModal" class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-save mr-1.5"></i> Save
|
||||
</button>
|
||||
<button @click="isProjectListOpen = true" class="btn btn-secondary btn-sm">
|
||||
<i class="fas fa-folder-open mr-1.5"></i> Projects
|
||||
</button>
|
||||
<button @click="authStore.logout()" class="text-sm text-gray-500 hover:text-red-500 transition-colors" title="Logout">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<template v-if="authStore.user">
|
||||
<NavbarProjectActions
|
||||
@open-save-modal="openSaveModal"
|
||||
@open-project-list="isProjectListOpen = true"
|
||||
/>
|
||||
|
||||
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<NavbarUserMenu @open-auth-modal="isAuthModalOpen = true" />
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm">
|
||||
<button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm shadow-indigo-500/20 shadow-lg">
|
||||
Login / Register
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" title="Source Code">
|
||||
<i class="fab fa-github text-lg"></i>
|
||||
</a>
|
||||
<a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2] transition-colors" title="Discord Community">
|
||||
<i class="fab fa-discord text-lg"></i>
|
||||
</a>
|
||||
<button @click="$emit('open-help')" class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400 transition-colors" title="Help">
|
||||
<i class="fas fa-question-circle text-lg"></i>
|
||||
</button>
|
||||
<DarkModeToggle />
|
||||
</div>
|
||||
<NavbarSocials @open-help="$emit('open-help')" />
|
||||
</div>
|
||||
|
||||
<AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" />
|
||||
<ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" />
|
||||
<SaveProjectModal
|
||||
:is-open="isSaveProjectModalOpen"
|
||||
:initial-name="projectStore.currentProject?.name"
|
||||
@close="isSaveProjectModalOpen = false"
|
||||
@save="handleSaveProject"
|
||||
/>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<div class="flex md:hidden">
|
||||
<DarkModeToggle />
|
||||
@@ -80,37 +49,16 @@
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div v-show="isMobileMenuOpen" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur-xl">
|
||||
<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="isMobileMenuOpen = false">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="isMobileMenuOpen = false">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="isMobileMenuOpen = false">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="isMobileMenuOpen = false">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');
|
||||
isMobileMenuOpen = false;
|
||||
"
|
||||
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>
|
||||
<NavbarMobileMenu
|
||||
:is-open="isMobileMenuOpen"
|
||||
@close="isMobileMenuOpen = false"
|
||||
@open-help="$emit('open-help')"
|
||||
/>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { ref, toRef } from 'vue';
|
||||
import DarkModeToggle from '../utilities/DarkModeToggle.vue';
|
||||
import { useAuthStore } from '@/stores/useAuthStore';
|
||||
import AuthModal from '@/components/auth/AuthModal.vue';
|
||||
@@ -120,9 +68,16 @@
|
||||
import { useSettingsStore } from '@/stores/useSettingsStore';
|
||||
import { useExportLayers } from '@/composables/useExportLayers';
|
||||
import { useLayers } from '@/composables/useLayers';
|
||||
import { toRef } from 'vue';
|
||||
|
||||
defineEmits(['open-help']); // Removed 'open-project' since we handle it here
|
||||
// Sub-components
|
||||
import NavbarLogo from './navbar/NavbarLogo.vue';
|
||||
import NavbarLinks from './navbar/NavbarLinks.vue';
|
||||
import NavbarProjectActions from './navbar/NavbarProjectActions.vue';
|
||||
import NavbarUserMenu from './navbar/NavbarUserMenu.vue';
|
||||
import NavbarSocials from './navbar/NavbarSocials.vue';
|
||||
import NavbarMobileMenu from './navbar/NavbarMobileMenu.vue';
|
||||
|
||||
defineEmits(['open-help']);
|
||||
|
||||
const isMobileMenuOpen = ref(false);
|
||||
const isAuthModalOpen = ref(false);
|
||||
@@ -165,14 +120,8 @@
|
||||
try {
|
||||
const data = await generateProjectJSON();
|
||||
|
||||
if (projectStore.currentProject && projectStore.currentProject.name === name) { // Simple check, ideally check ID but UI only exposes name edit on save for new projects or overwrite?
|
||||
// Actually SaveProjectModal allows editing name.
|
||||
// If it's the same project, we update.
|
||||
if (projectStore.currentProject && projectStore.currentProject.name === name) {
|
||||
await projectStore.updateProject(projectStore.currentProject.id, data);
|
||||
// Update name if changed? updateProject signature might need name.
|
||||
// current implementation of updateProject only updates data.
|
||||
// To update name we need to change store or backend.
|
||||
// For now, let's just update data.
|
||||
} else {
|
||||
await projectStore.createProject(name, data);
|
||||
}
|
||||
@@ -182,3 +131,4 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user