sankalp
2435061423
Replace Django default templates with Tailwind‑styled layout, add reusable sidebar/topbar, integrate Alpine.js and HTMX for interactivity, include Chart.js placeholder, and streamline markup for authenticated views. New Features - Introduce Tailwind CSS via django‑tailwind‑cli for consistent styling - Add Alpine.js and HTMX for client‑side behavior - Add Chart.js script for future visualisation - Create reusable sidebar and topbar components for authenticated templates Enhancements - Refactor base.html to reduce duplication and improve maintainability - Add dynamic title block and extra_head/slots for extensibility - Adopt responsive layout with min‑h-screen and fixed navigation Bug Fixes- Remove stale static CSS reference that caused layout issues - Fix missing user role display and related styling - Correct viewport meta tag and charset handling
34 lines
3.0 KiB
HTML
34 lines
3.0 KiB
HTML
<nav class="bg-white border-b border-gray-200 fixed top-0 left-0 right-0 z-30 h-16">
|
|
<div class="px-4 h-full flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<button @click="sidebarOpen = !sidebarOpen" class="lg:hidden btn btn-ghost btn-sm btn-square">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
|
</button>
|
|
<a href="{% url 'home' %}" class="text-xl font-bold text-blue-600">ProMan</a>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="hidden sm:flex items-center gap-1 mr-4 text-sm text-gray-500">
|
|
<span class="w-2 h-2 rounded-full bg-green-400"></span>
|
|
{{ user.get_role_display }}
|
|
</div>
|
|
<div class="dropdown dropdown-end">
|
|
<div tabindex="0" role="button" class="flex items-center gap-2 btn btn-ghost btn-sm">
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
|
|
{{ user.first_name|first|default:user.username|first|upper }}
|
|
</div>
|
|
<span class="hidden sm:inline text-sm font-medium">{{ user.get_full_name|default:user.username }}</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content menu p-2 shadow-lg bg-white rounded-xl w-48 mt-2 border">
|
|
<li><a href="{% url 'profile' %}" class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>Profile</a></li>
|
|
{% if user.is_admin %}
|
|
<li><a href="{% url 'user_list' %}" class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.5-9a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"/></svg>Manage Users</a></li>
|
|
{% endif %}
|
|
<div class="divider my-1"></div>
|
|
<li><a href="{% url 'logout' %}" class="flex items-center gap-2 text-red-600"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|