update ui sidebar
This commit is contained in:
Norbert Maciaszek
@@ -12,54 +12,69 @@
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar (Copy from index.html) -->
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 hidden lg:flex flex-col">
|
||||
<div class="p-6 flex items-center gap-3">
|
||||
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center text-white">
|
||||
<i data-lucide="gift"></i>
|
||||
<div class="w-10 h-10 gradient-bg rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200">
|
||||
<i data-lucide="gift" class="text-white w-6 h-6"></i>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">
|
||||
Gift Planner
|
||||
</h1>
|
||||
<span class="text-xl font-black tracking-tighter">GIFT<span class="text-indigo-600">PLANNER</span></span>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 py-4 space-y-2">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="layout-dashboard"></i> Dashboard
|
||||
|
||||
<nav class="flex-1 px-4 py-4 space-y-1">
|
||||
<a href="dashboard.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-600 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i> Dashboard
|
||||
</a>
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="bell"></i> Aktualizacje
|
||||
<a href="updates.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="bell" class="w-5 h-5"></i> Powiadomienia
|
||||
</a>
|
||||
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="globe"></i> Święta
|
||||
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i> Okazje
|
||||
</a>
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="sparkles"></i> Inspiracje
|
||||
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="users" class="w-5 h-5"></i> Osoby
|
||||
</a>
|
||||
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors group">
|
||||
<i data-lucide="search" class="group-hover:text-indigo-600 transition-colors"></i> Wyszukiwarka
|
||||
<span class="ml-auto bg-indigo-100 text-indigo-600 text-[8px] px-1.5 py-0.5 rounded font-black uppercase">AI</span>
|
||||
<a href="notes.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="pen-tool" class="w-5 h-5"></i> Notatki
|
||||
</a>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="book-open"></i> Poradniki
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">AI Assistant</span>
|
||||
</div>
|
||||
<a href="search.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="sparkles" class="w-5 h-5"></i> Wyszukiwarka
|
||||
</a>
|
||||
<a href="occasions.html" class="flex items-center gap-3 px-4 py-3 bg-indigo-50 text-indigo-700 rounded-xl font-medium">
|
||||
<i data-lucide="calendar"></i> Okazje
|
||||
<a href="inspirations.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="image" class="w-5 h-5"></i> Inspiracje
|
||||
</a>
|
||||
<a href="persons.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="users"></i> Osoby
|
||||
<a href="global-holidays.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i> Święta
|
||||
</a>
|
||||
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<i data-lucide="wallet"></i> Budżet
|
||||
<div class="pt-4 pb-2 px-4">
|
||||
<span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em]">Wiedza & Finanse</span>
|
||||
</div>
|
||||
<a href="blog.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="book-open" class="w-5 h-5"></i> Poradniki
|
||||
</a>
|
||||
<a href="budget.html" class="flex items-center gap-3 px-4 py-3 text-gray-500 hover:bg-indigo-50 rounded-2xl transition-all font-bold text-sm group">
|
||||
<i data-lucide="wallet" class="w-5 h-5"></i> Budżet
|
||||
</a>
|
||||
</nav>
|
||||
<div class="p-4 border-t border-gray-100">
|
||||
<div class="flex items-center gap-3 p-4">
|
||||
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold">NK</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<p class="text-sm font-semibold truncate">Norbert K.</p>
|
||||
<p class="text-xs text-gray-500">Premium</p>
|
||||
|
||||
<div class="mt-auto p-6">
|
||||
<a href="/settings.html">
|
||||
<div class="bg-gray-50 rounded-3xl p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold text-xs">A</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold">Adam Kowalski</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<i data-lucide="zap" class="w-2.5 h-2.5 text-yellow-500 fill-yellow-500"></i>
|
||||
<p class="text-[10px] font-bold text-gray-500 uppercase">120 Tokenów</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user