110 lines
9.0 KiB
Plaintext
110 lines
9.0 KiB
Plaintext
<style>
|
|
/* Premium slim scrollbar for the navigation */
|
|
.nav-scrollbar::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
.nav-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.nav-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.nav-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
</style>
|
|
|
|
<div class="min-h-[4.5rem] bg-black/20 flex items-center px-5 relative border-b border-white/10 backdrop-blur-sm">
|
|
<div class="container-fluid w-full">
|
|
<a class="group flex items-center gap-3 no-underline" href="">
|
|
<!-- SAQA-inspired 'Q' Swish & Travel Icon -->
|
|
<div class="relative flex-shrink-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="w-8 h-8 text-blue-300 group-hover:text-white transition-colors duration-300 drop-shadow-lg">
|
|
<!-- The Swirl / 'Q' body (representing the globe & SAQA watermark) -->
|
|
<circle cx="10.5" cy="10.5" r="7.5" stroke-linecap="round" />
|
|
<!-- The infinity/swish tail of the 'Q' mimicking a flight path -->
|
|
<path stroke-linecap="round" d="M15.5 15.5c3 3 5.5 5 7 3s.5-3-2-5" />
|
|
<!-- Minimalist airplane taking off -->
|
|
<path fill="currentColor" stroke="none" d="M14.5 4.5l3-3h1.5l-2.5 3.5 1 3-2-1v-2z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<span class="text-xl font-extrabold tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-blue-100 to-white drop-shadow-sm group-hover:scale-[1.02] transition-transform origin-left">
|
|
TMT <span class="text-blue-400 font-light">SAQA</span>
|
|
</span>
|
|
<span class="text-[0.65rem] text-blue-300/80 uppercase tracking-[0.2em] font-semibold -mt-1 group-hover:text-blue-200 transition-colors">
|
|
Travel & Logistics
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="checkbox" title="Navigation menu" class="peer appearance-none cursor-pointer w-14 h-10 text-white absolute top-4 right-4 border border-white/10 rounded bg-[url('data:image/svg+xml,%3csvg_xmlns=%27http://www.w3.org/2000/svg%27_viewBox=%270_0_30_30%27%3e%3cpath_stroke=%27rgba(255,255,255,0.55)%27_stroke-linecap=%27round%27_stroke-miterlimit=%2710%27_stroke-width=%272%27_d=%27M4_7h22M4_15h22M4_23h22%27/%3e%3c/svg%3e')] bg-no-repeat bg-center bg-[length:1.75rem] checked:bg-white/20 sm:hidden transition-colors z-20" />
|
|
|
|
<div class="hidden peer-checked:block sm:block sm:h-[calc(100vh-4.5rem)] sm:overflow-y-auto nav-scrollbar" onclick="document.querySelector('.peer').click()">
|
|
<nav class="flex flex-col space-y-1 px-3 py-5">
|
|
|
|
<!-- Overview -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="" Match="NavLinkMatch.All">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
|
|
</svg>
|
|
Overview
|
|
</NavLink>
|
|
|
|
<!-- Booking -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="booking">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
|
|
</svg>
|
|
Booking
|
|
</NavLink>
|
|
|
|
<!-- Financial -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="financial">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Financial
|
|
</NavLink>
|
|
|
|
<!-- Forex -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="forex">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
|
</svg>
|
|
Forex
|
|
</NavLink>
|
|
|
|
<!-- Visa -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="visa">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" />
|
|
</svg>
|
|
Visa
|
|
</NavLink>
|
|
|
|
<!-- Compliance -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="compliance">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
Compliance
|
|
</NavLink>
|
|
|
|
<!-- VAS -->
|
|
<NavLink class="group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200 border-l-2 border-transparent [&.active]:bg-blue-500/20 [&.active]:text-white [&.active]:border-blue-400" href="vas">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-3 flex-shrink-0 text-gray-400 group-hover:text-white group-[.active]:text-blue-400 transition-colors">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
|
</svg>
|
|
VAS
|
|
</NavLink>
|
|
|
|
</nav>
|
|
</div> |