69 lines
4.1 KiB
Vue
69 lines
4.1 KiB
Vue
<template>
|
||
<aside class="w-64 h-screen fixed bg-white text-black border border-gray-200 overflow-y-auto hide-scrollbar">
|
||
<!-- Sidebar Header -->
|
||
<div class="p-4 text-xl font-bold">
|
||
🎓 TailAdmin
|
||
</div>
|
||
|
||
<!-- User Info Section (Optional) -->
|
||
<!-- <div class="p-4 border-b border-gray-700 text-sm">
|
||
<p class="font-semibold">Welcome, Atul!</p>
|
||
<p class="text-gray-400">Admin</p>
|
||
</div> -->
|
||
|
||
|
||
<p class="text-gray-400 text-xs">MENU</p>
|
||
|
||
<!-- Navigation Links -->
|
||
<nav class="flex flex-col p-4 space-y-2 text-xs gap-5 text-gray-500">
|
||
<NuxtLink to="/Dashboard" class="p-2 rounded hover:bg-gray-800 flex items-center text-xc font-semibold">
|
||
<svg width="24" height="24" viewBox="0 0 24 24"
|
||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V8.99998C3.25 10.2426 4.25736 11.25 5.5 11.25H9C10.2426 11.25 11.25 10.2426 11.25 8.99998V5.5C11.25 4.25736 10.2426 3.25 9 3.25H5.5ZM4.75 5.5C4.75 5.08579 5.08579 4.75 5.5 4.75H9C9.41421 4.75 9.75 5.08579 9.75 5.5V8.99998C9.75 9.41419 9.41421 9.74998 9 9.74998H5.5C5.08579 9.74998 4.75 9.41419 4.75 8.99998V5.5ZM5.5 12.75C4.25736 12.75 3.25 13.7574 3.25 15V18.5C3.25 19.7426 4.25736 20.75 5.5 20.75H9C10.2426 20.75 11.25 19.7427 11.25 18.5V15C11.25 13.7574 10.2426 12.75 9 12.75H5.5ZM4.75 15C4.75 14.5858 5.08579 14.25 5.5 14.25H9C9.41421 14.25 9.75 14.5858 9.75 15V18.5C9.75 18.9142 9.41421 19.25 9 19.25H5.5C5.08579 19.25 4.75 18.9142 4.75 18.5V15ZM12.75 5.5C12.75 4.25736 13.7574 3.25 15 3.25H18.5C19.7426 3.25 20.75 4.25736 20.75 5.5V8.99998C20.75 10.2426 19.7426 11.25 18.5 11.25H15C13.7574 11.25 12.75 10.2426 12.75 8.99998V5.5ZM15 4.75C14.5858 4.75 14.25 5.08579 14.25 5.5V8.99998C14.25 9.41419 14.5858 9.74998 15 9.74998H18.5C18.9142 9.74998 19.25 9.41419 19.25 8.99998V5.5C19.25 5.08579 18.9142 4.75 18.5 4.75H15ZM15 12.75C13.7574 12.75 12.75 13.7574 12.75 15V18.5C12.75 19.7426 13.7574 20.75 15 20.75H18.5C19.7426 20.75 20.75 19.7427 20.75 18.5V15C20.75 13.7574 19.7426 12.75 18.5 12.75H15ZM14.25 15C14.25 14.5858 14.5858 14.25 15 14.25H18.5C18.9142 14.25 19.25 14.5858 19.25 15V18.5C19.25 18.9142 18.9142 19.25 18.5 19.25H15C14.5858 19.25 14.25 18.9142 14.25 18.5V15Z"
|
||
fill="currentColor">
|
||
</path>
|
||
</svg>
|
||
Dashboard
|
||
</NuxtLink>
|
||
<NuxtLink to="/students" class="p-2 rounded hover:bg-gray-800 flex items-center text-lg font-semibold">🎓 Students</NuxtLink>
|
||
<NuxtLink to="/students/profile?id=1" class="p-2 rounded hover:bg-gray-800 flex items-center text-lg font-semibold">👤 Profile</NuxtLink>
|
||
<NuxtLink to="/students/settings" class="p-2 rounded hover:bg-gray-800 flex items-center text-lg font-semibold">⚙️ Settings</NuxtLink>
|
||
<NuxtLink to="/notifications" class="p-2 rounded hover:bg-gray-800 flex items-center text-lg font-semibold">🔔 Notifications</NuxtLink>
|
||
<NuxtLink to="/about" class="p-2 rounded hover:bg-gray-800 flex items-center text-lg font-semibold">ℹ️ About</NuxtLink>
|
||
</nav>
|
||
|
||
|
||
<p class="text-gray-400 text-xs">MENU</p>
|
||
|
||
<nav class="flex flex-col p-4 space-y-2">
|
||
<NuxtLink to="/Dashboard" class="p-2 rounded hover:bg-gray-800">🏠 Dashboard</NuxtLink>
|
||
<NuxtLink to="/students" class="p-2 rounded hover:bg-gray-800">🎓 Students</NuxtLink>
|
||
<NuxtLink to="/students/profile?id=1" class="p-2 rounded hover:bg-gray-800">👤 Profile</NuxtLink>
|
||
<NuxtLink to="/students/settings" class="p-2 rounded hover:bg-gray-800">⚙️ Settings</NuxtLink>
|
||
<NuxtLink to="/notifications" class="p-2 rounded hover:bg-gray-800">🔔 Notifications</NuxtLink>
|
||
<NuxtLink to="/about" class="p-2 rounded hover:bg-gray-800">ℹ️ About</NuxtLink>
|
||
</nav>
|
||
|
||
|
||
|
||
<!-- Footer Section -->
|
||
<div class="p-4 border-t border-gray-700 text-sm mt-auto">
|
||
© 2025 Atul Gunjal
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<style>
|
||
.hide-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.hide-scrollbar {
|
||
-ms-overflow-style: none;
|
||
/* IE and Edge */
|
||
scrollbar-width: none;
|
||
/* Firefox */
|
||
}
|
||
</style>
|