63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
|
<div class="navigation-menu" id="navigation-menu">
|
||
|
|
<nav class="nav-menu-content">
|
||
|
|
<a href="/auth/login"
|
||
|
|
class="nav-menu-item nav-sign-in"
|
||
|
|
hx-get="/auth/login"
|
||
|
|
hx-swap="none"
|
||
|
|
hx-on::after-request="window.location.href='/login'">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
||
|
|
<polyline points="10 17 15 12 10 7"></polyline>
|
||
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
||
|
|
</svg>
|
||
|
|
<span>Sign in</span>
|
||
|
|
</a>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.navigation-menu {
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
|
||
|
|
min-width: 200px;
|
||
|
|
z-index: 1000;
|
||
|
|
overflow: hidden;
|
||
|
|
animation: slideIn 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideIn {
|
||
|
|
from { opacity: 0; transform: translateY(-10px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu-content {
|
||
|
|
padding: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 14px;
|
||
|
|
padding: 12px 14px;
|
||
|
|
border-radius: 8px;
|
||
|
|
text-decoration: none;
|
||
|
|
color: white;
|
||
|
|
font-size: 15px;
|
||
|
|
transition: all 0.15s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sign-in {
|
||
|
|
background: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sign-in:hover {
|
||
|
|
background: var(--primary-dark);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-sign-in svg {
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
</style>
|