Initial commit - LayoutLib.RCL
This commit is contained in:
@@ -0,0 +1,123 @@
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
|
||||
<aside
|
||||
class="flex flex-col w-64 h-screen bg-base-200 border-r border-base-300 shadow-xl overflow-hidden transition-all duration-300">
|
||||
<!-- Sidebar Header -->
|
||||
<div class="flex items-center justify-between p-6 bg-primary/5 border-b border-base-300">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="p-2 bg-primary rounded-xl text-primary-content shadow-lg shadow-primary/20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xl font-black tracking-tighter text-base-content">ADMIN</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex-1 overflow-y-auto p-4 space-y-2 custom-scrollbar">
|
||||
<div class="px-3 mb-2">
|
||||
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-base-content/40">General</p>
|
||||
</div>
|
||||
|
||||
<NavLink
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 hover:bg-base-300 group"
|
||||
href="/" Match="NavLinkMatch.All">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 opacity-50 group-[.active]:opacity-100 group-[.active]:text-primary" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
<span class="font-bold text-sm">Dashboard</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="px-3 mt-6 mb-2">
|
||||
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-base-content/40">Commerce</p>
|
||||
</div>
|
||||
|
||||
<NavLink
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 hover:bg-base-300 group"
|
||||
href="/admin/products">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 opacity-50 group-[.active]:opacity-100 group-[.active]:text-primary" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||||
</svg>
|
||||
<span class="font-bold text-sm">Products</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 hover:bg-base-300 group"
|
||||
href="/admin/categories">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 opacity-50 group-[.active]:opacity-100 group-[.active]:text-primary" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
|
||||
</svg>
|
||||
<span class="font-bold text-sm">Categories</span>
|
||||
</NavLink>
|
||||
|
||||
<div class="px-3 mt-6 mb-2">
|
||||
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-base-content/40">Settings</p>
|
||||
</div>
|
||||
|
||||
<NavLink
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-2xl transition-all duration-200 hover:bg-base-300 group"
|
||||
href="/manage-UserRole">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 opacity-50 group-[.active]:opacity-100 group-[.active]:text-primary" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<span class="font-bold text-sm">User Roles</span>
|
||||
</NavLink>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Footer -->
|
||||
<div class="p-4 border-t border-base-300 bg-base-300/20">
|
||||
<div class="flex items-center gap-3 p-3 rounded-2xl bg-base-100 border border-base-300 shadow-sm">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-neutral text-neutral-content rounded-xl w-10">
|
||||
<span class="text-xs">AD</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span class="text-sm font-black truncate">Admin User</span>
|
||||
<span class="text-[10px] opacity-50 truncate">admin@company.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--bc) / 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--bc) / 0.2);
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: hsl(var(--b3));
|
||||
border-left: 4px solid hsl(var(--p));
|
||||
border-radius: 0 1rem 1rem 0 !important;
|
||||
padding-left: calc(1rem - 4px) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user