sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
74 lines
7.0 KiB
HTML
74 lines
7.0 KiB
HTML
<aside class="hidden lg:flex lg:flex-col shrink-0 bg-white dark:bg-gray-950 border-r border-gray-200 dark:border-gray-700 transition-all duration-200 h-full w-64" :class="[sidebarOpen ? 'w-64' : 'w-16', sidebarOpen ? '' : 'dk-sidebar-collapsed']">
|
|
<div class="dk-sidebar-brand flex items-center gap-3 px-6 h-16 border-b border-gray-200 dark:border-gray-700 shrink-0">
|
|
{% if branding and branding.logo_small %}
|
|
<img src="{{ branding.logo_small.url }}" alt="{{ brand_name }}" class="h-8 w-8 rounded-lg shrink-0 object-cover">
|
|
{% elif branding and branding.logo %}
|
|
<img src="{{ branding.logo.url }}" alt="{{ brand_name }}" class="h-8 w-auto shrink-0">
|
|
{% else %}
|
|
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm shrink-0">{{ brand_name|first }}</div>
|
|
{% endif %}
|
|
<span class="dk-sidebar-brand-text text-lg font-semibold text-gray-900 dark:text-white" x-show="sidebarOpen">{{ brand_name }}</span>
|
|
</div>
|
|
<nav class="flex-1 overflow-y-auto p-3 space-y-1">
|
|
<a href="/dashboard/" class="dk-sidebar-link {% if request.path == '/dashboard/' %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Dashboard">
|
|
<i class="fas fa-home w-5 text-center"></i><span x-show="sidebarOpen">Dashboard</span>
|
|
</a>
|
|
<p class="dk-sidebar-group px-3 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mt-4 mb-2"><span x-show="sidebarOpen">Project Management</span></p>
|
|
<a href="/dashboard/projects/" class="dk-sidebar-link {% if '/projects/' in request.path and '/ticket-priorities/' not in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Projects">
|
|
<i class="fas fa-layer-group w-5 text-center"></i><span x-show="sidebarOpen">Projects</span>
|
|
</a>
|
|
<a href="/dashboard/project-timeline/" class="dk-sidebar-link {% if '/project-timeline/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Project Timeline">
|
|
<i class="fas fa-calendar-days w-5 text-center"></i><span x-show="sidebarOpen">Project Timeline</span>
|
|
</a>
|
|
<a href="/dashboard/project-board/" class="dk-sidebar-link {% if '/project-board/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Project Board">
|
|
<i class="fas fa-columns w-5 text-center"></i><span x-show="sidebarOpen">Project Board</span>
|
|
</a>
|
|
<a href="/dashboard/tickets/" class="dk-sidebar-link {% if request.path == '/dashboard/tickets/' %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Tickets">
|
|
<i class="fas fa-ticket w-5 text-center"></i><span x-show="sidebarOpen" class="flex-1">Tickets</span>
|
|
<span class="dk-badge bg-blue-600 text-white text-[10px]" x-show="sidebarOpen">{{ total_tickets }}</span>
|
|
</a>
|
|
<a href="/dashboard/ticket-timeline/" class="dk-sidebar-link {% if '/ticket-timeline/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Ticket Timeline">
|
|
<i class="fas fa-calendar w-5 text-center"></i><span x-show="sidebarOpen">Ticket Timeline</span>
|
|
</a>
|
|
<a href="/dashboard/epics/" class="dk-sidebar-link {% if '/epics/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Epics">
|
|
<i class="fas fa-flag w-5 text-center"></i><span x-show="sidebarOpen">Epics</span>
|
|
</a>
|
|
<p class="dk-sidebar-group px-3 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mt-6 mb-2"><span x-show="sidebarOpen">Analytics</span></p>
|
|
<a href="/dashboard/contributions/" class="dk-sidebar-link {% if '/contributions/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="User Contributions">
|
|
<i class="fas fa-chart-bar w-5 text-center"></i><span x-show="sidebarOpen">User Contributions</span>
|
|
</a>
|
|
<a href="/dashboard/leaderboard/" class="dk-sidebar-link {% if '/leaderboard/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Leaderboard">
|
|
<i class="fas fa-trophy w-5 text-center"></i><span x-show="sidebarOpen">Leaderboard</span>
|
|
</a>
|
|
<p class="dk-sidebar-group px-3 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mt-6 mb-2"><span x-show="sidebarOpen">Notifications</span></p>
|
|
<a href="/dashboard/notifications/" class="dk-sidebar-link {% if '/notifications/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Notifications">
|
|
<i class="fas fa-bell w-5 text-center"></i><span x-show="sidebarOpen">Notifications</span>
|
|
</a>
|
|
<p class="dk-sidebar-group px-3 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mt-6 mb-2"><span x-show="sidebarOpen">Settings</span></p>
|
|
<a href="/dashboard/ticket-priorities/" class="dk-sidebar-link {% if '/ticket-priorities/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Ticket Priorities">
|
|
<i class="fas fa-flag w-5 text-center"></i><span x-show="sidebarOpen">Ticket Priorities</span>
|
|
</a>
|
|
<a href="/dashboard/external/" class="dk-sidebar-link {% if '/external/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="External Access">
|
|
<i class="fas fa-share-alt w-5 text-center"></i><span x-show="sidebarOpen">External Access</span>
|
|
</a>
|
|
<a href="/dashboard/settings/ui/" class="dk-sidebar-link {% if '/settings/ui/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="UI Settings">
|
|
<i class="fas fa-cog w-5 text-center"></i><span x-show="sidebarOpen">UI Settings</span>
|
|
</a>
|
|
{% if request.user.role == 'superadmin' %}
|
|
<p class="dk-sidebar-group px-3 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mt-6 mb-2"><span x-show="sidebarOpen">Administration</span></p>
|
|
<a href="/dashboard/users/" class="dk-sidebar-link {% if '/users/' in request.path %}dk-sidebar-link-active{% else %}dk-sidebar-link-inactive{% endif %}" title="Users">
|
|
<i class="fas fa-users w-5 text-center"></i><span x-show="sidebarOpen" class="flex-1">Users</span>
|
|
<span class="dk-badge bg-blue-600 text-white text-[10px]" x-show="sidebarOpen">{{ total_users }}</span>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
<div class="p-3 border-t border-gray-200 dark:border-gray-700">
|
|
<form id="sidebar-logout-form" method="post" action="{% url 'logout' %}">
|
|
{% csrf_token %}
|
|
<button type="button" @click="window.confirmAction({ title: 'Logout', message: 'Are you sure you want to log out?', confirmText: 'Logout', danger: true, onConfirm: () => document.getElementById('sidebar-logout-form').submit() })" class="dk-sidebar-link dk-sidebar-link-inactive w-full text-left" title="Logout">
|
|
<i class="fas fa-sign-out-alt w-5 text-center"></i><span x-show="sidebarOpen">Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|