Files
project-managment/templates/components/top_nav.html
T
sankalp 71b700388b feat(templates): add polished login UI with Tailwind and Alpine.js
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
2026-06-28 14:15:39 +05:45

27 lines
3.2 KiB
HTML

<div class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-600 px-4 py-2 flex items-center gap-1 overflow-x-auto shrink-0">
<a href="/dashboard/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if request.path == '/dashboard/' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-home mr-1.5"></i>Dashboard
</a>
<a href="/dashboard/projects/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/projects/' in request.path and '/ticket-priorities/' not in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-layer-group mr-1.5"></i>Projects
</a>
<a href="/dashboard/project-timeline/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/project-timeline/' in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-calendar-days mr-1.5"></i>Timeline
</a>
<a href="/dashboard/project-board/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/project-board/' in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-columns mr-1.5"></i>Board
</a>
<a href="/dashboard/tickets/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if request.path == '/dashboard/tickets/' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-ticket mr-1.5"></i>Tickets
</a>
<a href="/dashboard/epics/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/epics/' in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-flag mr-1.5"></i>Epics
</a>
<a href="/dashboard/contributions/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/contributions/' in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-chart-bar mr-1.5"></i>Analytics
</a>
<a href="/dashboard/leaderboard/" class="whitespace-nowrap px-3 py-1.5 rounded-lg text-sm font-medium transition-colors {% if '/leaderboard/' in request.path %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300{% else %}text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}">
<i class="fas fa-trophy mr-1.5"></i>Leaderboard
</a>
</div>