twotalesanimation
88 lines
5.3 KiB
PHP
88 lines
5.3 KiB
PHP
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo"><a href="/" style="text-decoration: none; color: inherit;">Additional Design</a></div>
|
|
<nav>
|
|
<!-- <a href="/">Home</a> -->
|
|
<a href="/wallpapers">Wallpaper</a>
|
|
<a href="/murals">Murals</a>
|
|
<!-- <a href="/fabrics">Fabrics</a> -->
|
|
<!-- <a href="/#portfolio">Portfolio</a> -->
|
|
<a href="/#projects">Projects</a>
|
|
<!-- <a href="/#shop">Decor Shop</a> -->
|
|
<a href="/#contact">Contact</a>
|
|
</nav>
|
|
<div style="display: flex; align-items: center; gap: 1.5rem;">
|
|
<!-- Authentication Links -->
|
|
@auth
|
|
<a href="{{ route('custom-orders.create') }}" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Custom Order</a>
|
|
<div style="position: relative; display: inline-block;">
|
|
<button onclick="toggleUserMenu()" style="background: none; border: none; cursor: pointer; padding: 0; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; color: inherit; font-size: 0.9rem; font-family: Montserrat, sans-serif;">
|
|
{{ auth()->user()->name }}
|
|
<svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<div id="user-menu" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-width: 200px; z-index: 1000;">
|
|
<a href="{{ route('my-account') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Account</a>
|
|
<a href="{{ route('my-orders') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Orders</a>
|
|
@if(auth()->user()->is_admin)
|
|
<a href="/admin" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">Admin Panel</a>
|
|
@endif
|
|
<form action="{{ route('logout') }}" method="POST" style="margin: 0;" id="logout-form">
|
|
@csrf
|
|
<button type="submit" style="font-family: Montserrat, sans-serif; width: 100%; text-align: left; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign Out</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<a href="{{ route('auth.login') }}" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign In</a>
|
|
@endauth
|
|
|
|
<!-- Cart -->
|
|
<a href="{{ route('cart') }}" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; font-weight: 500; position: relative;">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|
</svg>
|
|
<span>Cart</span>
|
|
@if($cartCount > 0)
|
|
<span style="background: var(--accent-dark); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; position: absolute; top: -8px; right: -8px;">{{ $cartCount }}</span>
|
|
@endif
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
function toggleUserMenu() {
|
|
const menu = document.getElementById('user-menu');
|
|
if (menu) {
|
|
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const userMenu = document.getElementById('user-menu');
|
|
const toggleButton = event.target.closest('button[onclick="toggleUserMenu()"]');
|
|
const logoutForm = document.getElementById('logout-form');
|
|
|
|
// Don't close if clicking logout form or the toggle button
|
|
if (userMenu && !event.target.closest('#user-menu') && !toggleButton && !logoutForm?.contains(event.target)) {
|
|
userMenu.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Allow logout form to submit by not preventing default
|
|
document.addEventListener('submit', function(event) {
|
|
if (event.target.id === 'logout-form') {
|
|
// Allow normal form submission
|
|
return true;
|
|
}
|
|
});
|
|
</script>
|