lukaszraczylo/claude-mnemonic
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/claude-mnemonic.git synced 2026-10-16 05:37:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

deslopify docs website

Browse Source
This commit is contained in:
lukaszraczylo
2026-05-26 19:22:47 +01:00
parent c5967c3eaa
commit 549fefc675
15 changed files with 1690 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/NavBar.vue
+19 -44
View File
@@ -1,70 +1,45 @@
<template>
<nav class="fixed top-0 left-0 right-0 z-50 bg-gradient-to-b from-slate-950 via-slate-950/95 to-transparent backdrop-blur-md">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 sm:py-5 flex justify-between items-center">
<a href="#" class="flex items-center gap-2 sm:gap-3 text-white font-bold text-xl sm:text-2xl">
<div class="w-8 h-8 sm:w-9 sm:h-9 bg-gradient-to-br from-amber-500 to-amber-400 rounded-lg flex items-center justify-center">
<i class="fas fa-brain text-slate-950 text-sm sm:text-base"></i>
</div>
{{ title }}
</a>
<nav class="border-b border-neutral-800/80 sticky top-0 z-50 bg-[#09090b]/90 backdrop-blur-sm">
<div class="max-w-5xl mx-auto px-4 sm:px-6 h-14 flex justify-between items-center">
<a href="#" class="text-white font-bold text-base tracking-tight">Claude Mnemonic</a>
<ul class="hidden md:flex gap-6 lg:gap-8">
<ul class="hidden md:flex items-center gap-6">
<li v-for="link in links" :key="link.href">
<a :href="link.href" class="text-slate-400 hover:text-white text-sm font-medium transition-colors animated-underline">
{{ link.label }}
</a>
<a :href="link.href" class="text-neutral-500 hover:text-white text-sm transition-colors">{{ link.label }}</a>
</li>
</ul>
<div class="flex items-center gap-3 sm:gap-4">
<a :href="githubUrl" target="_blank" class="text-slate-400 hover:text-white text-lg sm:text-xl transition-colors">
<div class="flex items-center gap-4">
<a :href="githubUrl" target="_blank" class="text-neutral-500 hover:text-white transition-colors text-lg">
<i class="fab fa-github"></i>
</a>
<a href="#installation" class="hidden sm:inline-flex bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-4 sm:px-5 py-2 sm:py-2.5 rounded-lg font-semibold text-sm hover:scale-105 hover:shadow-lg hover:shadow-amber-500/30 transition-all">
Get Started
<a href="#install" class="hidden sm:inline-flex items-center gap-2 text-sm font-medium text-amber-500 hover:text-amber-400 transition-colors">
Install <i class="fas fa-arrow-right text-xs"></i>
</a>
<button @click="$emit('toggle-menu')" class="md:hidden text-white text-xl p-2">
<button @click="$emit('toggle-menu')" class="md:hidden text-neutral-500 hover:text-white p-1">
<i :class="mobileMenuOpen ? 'fas fa-times' : 'fas fa-bars'"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<Transition
enter-active-class="transition duration-200 ease-out"
enter-from-class="opacity-0 -translate-y-2"
enter-to-class="opacity-100 translate-y-0"
leave-active-class="transition duration-150 ease-in"
leave-from-class="opacity-100 translate-y-0"
leave-to-class="opacity-0 -translate-y-2"
>
<div v-if="mobileMenuOpen" class="md:hidden bg-slate-900/95 backdrop-blur-xl border-t border-slate-800 px-4 sm:px-6 py-4">
<a v-for="link in links" :key="link.href" :href="link.href"
@click="$emit('toggle-menu')"
class="block py-3 text-slate-400 hover:text-white border-b border-slate-800 last:border-0 transition-colors">
{{ link.label }}
</a>
<a href="#installation" @click="$emit('toggle-menu')"
class="mt-4 block text-center bg-gradient-to-br from-amber-500 to-amber-400 text-slate-950 px-5 py-2.5 rounded-lg font-semibold text-sm">
Get Started
</a>
</div>
</Transition>
<div v-if="mobileMenuOpen" class="md:hidden border-t border-neutral-800/80 px-6 py-4 space-y-1">
<a v-for="link in links" :key="link.href" :href="link.href"
@click="$emit('toggle-menu')"
class="block py-2 text-neutral-500 hover:text-white text-sm transition-colors">
{{ link.label }}
</a>
</div>
</nav>
</template>
<script setup>
defineProps({
title: {
type: String,
default: 'Mnemonic'
},
links: {
type: Array,
default: () => [
{ label: 'Features', href: '#features' },
{ label: 'How It Works', href: '#how-it-works' },
{ label: 'Install', href: '#installation' },
{ label: 'Install', href: '#install' },
{ label: 'Config', href: '#config' },
{ label: 'FAQ', href: '#faq' },
]
},