Responsive Header with Navigation and User Account
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<script-src="https://cdn.tailwindcss.com"></script>-<link-href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"-rel="stylesheet">-</head>-<style>-/*-Styling-the-scrollbar-*/-#cart-items-{-overflow-y:-auto;-}-#cart-items::-webkit-scrollbar-{-width:-4px;-}-#cart-items::-webkit-scrollbar-thumb-{-background-color:-#000;-border-radius:-10px;-}-#cart-items::-webkit-scrollbar-track-{-background:-transparent;-}-/*-Enhanced-styling-for-header-elements-*/-.header-nav-a-{-transition:-color-0.3s-ease,-background-color-0.3s-ease;-}-.header-nav-a:hover-{-color:-#1D4ED8;-/*-Blue-hover-color-*/-background-color:-#f3f4f6;-/*-Light-gray-background-on-hover-*/-border-radius:-0.375rem;-padding:-0.5rem;-}-.user-dropdown-{-width:-240px;-}-/*-For-mobile-menu-*/-.mobile-menu-content-a-{-transition:-color-0.3s-ease;-}-.mobile-menu-content-a:hover-{-color:-#1D4ED8;-}-</style>-<body-class="bg-gray-50">-<!---Backdrop--->-<div-id="backdrop"-class="fixed-inset-0-bg-black-bg-opacity-50-z-40-hidden"></div>-<header-class="bg-white-shadow-lg-fixed-w-full-top-0-z-50">-<nav-class="mx-auto-flex-max-w-7xl-items-center-justify-between-px-6-py-4-lg:px-8"-aria-label="Global">-<!---Logo-Section--->-<div-class="flex-lg:flex-1">-<a-href="/"-class="text-xl-font-semibold">-<span-class="sr-only">Your-Company</span>-<img-src="~/images/logo.png"-alt="Logo"-class="h-[120px]-w-[120px]">-</a>-</div>-<div-class="hidden-lg:flex-lg:flex-1-lg:justify-center-items-center-gap-8-header-nav">-<!---Desktop-Navigation--->-<a-href="/product"-class="text-gray-900-font-medium">Products</a>-<a-href="/newmerch"-class="text-gray-900-font-medium">New-Merch</a>-<a-href="/auction"-class="text-gray-900-font-medium">Auction</a>-<a-href="/contact"-class="text-gray-900-font-medium">Contact</a>-</div>-<div-class="lg:flex-flex-lg:flex-1-lg:justify-end-items-center-gap-6">-<!---Bell-Icon--->-<a-href="#"-class="text-gray-500-hover:text-gray-900-transition">-<i-class="fas-fa-bell-text-xl"></i>-</a>-<div-class="relative">-<a-href="#"-class="text-gray-500-hover:text-red-500-transition-relative"-id="wishlist-icon">-<i-class="fas-fa-heart-text-xl"></i>-<span-id="wishlist-count"-class="absolute--top-2--right-2-bg-red-500-text-white-text-xs-w-5-h-5-flex-items-center-justify-center-rounded-full-hidden">0</span>-</a>-<!---Wishlist-Dropdown--->-<div-id="wishlist-dropdown"-class="absolute-right-0-bg-white-shadow-md-p-4-w-[350px]-hidden-rounded-lg">-<h3-class="font-semibold-mb-2-text-lg">Wishlist</h3>-<ul-id="wishlist-items"-class="space-y-2-max-h-[300px]-overflow-y-auto-p-2">-<li-class="text-gray-500">No-items-in-wishlist</li>-</ul>-<div-class="mt-4">-<a-href="/wishlist">-<button-class="w-full-bg-white-text-black-py-3-hover:bg-gray-100-transition-border-2-border-black-rounded-md">View-Wishlist</button>-</a>-</div>-</div>-</div>-<!---Cart-and-Notification-Icon--->-<div-class="relative">-<a-href="#"-class="text-gray-500-hover:text-gray-900-transition-relative"-id="cart-icon">-<i-class="fas-fa-shopping-cart-text-xl"></i>-<span-id="cart-count"-class="absolute--top-2--right-2-bg-red-500-text-white-text-xs-w-5-h-5-flex-items-center-justify-center-rounded-full-hidden">0</span>-</a>-<!---Cart-Dropdown--->-<div-id="cart-dropdown"-class="absolute-right-0-bg-white-shadow-md-p-4-w-[350px]-hidden-rounded-lg">-<h3-class="font-semibold-mb-2-text-lg">Shopping-Cart</h3>-<ul-id="cart-items"-class="space-y-2-max-h-[300px]-overflow-y-auto-p-2">-<li-class="text-gray-500">No-items-in-cart</li>-</ul>-<div-class="mt-4">-<a-href="/checkout">-<button-class="w-full-bg-black-text-white-py-3-hover:bg-gray-800-transition-font-semibold-rounded-md">Checkout</button>-</a>-<a-href="/cart">-<button-class="w-full-bg-white-text-black-py-3-hover:bg-gray-800-transition-border-2-border-black-rounded-md-mt-2">View-Cart</button>-</a>-</div>-</div>-</div>-<!---User-Account-Section--->-@if-(User.Identity.IsAuthenticated)-{-<div-class="relative">-<button-id="userMenuButton"-class="text-gray-500-font-medium-flex-gap-1-items-center-hover:text-gray-900-transition">-<p-class="text-black">Welcome!</p>-<span-class="cursor-pointer">@User.FindFirst("Phone")?.Value</span>-<i-class="fas-fa-chevron-down-ml-1-text-xs"></i>-</button>-<div-id="userDropdown"-class="absolute-right-0-mt-2-w-48-bg-white-rounded-md-shadow-lg-hidden-z-50-user-dropdown">-<div-class="py-1">-<a-href="/profile"-class="block-px-4-py-2-text-sm-text-gray-700-hover:bg-gray-100">-<i-class="fas-fa-user-mr-2"></i>Profile-</a>-<a-href="/resetpassword"-class="block-px-4-py-2-text-sm-text-gray-700-hover:bg-gray-100">-<i-class="fas-fa-key-mr-2"></i>Change-Password-</a>-<a-href="/purchase-history"-class="block-px-4-py-2-text-sm-text-gray-700-hover:bg-gray-100">-<i-class="fas-fa-history-mr-2"></i>Purchase-History-</a>-@if-(User.IsInRole("Admin"))-{-<a-href="/admin"-class="block-px-4-py-2-text-sm-text-gray-700-hover:bg-gray-100">-<i-class="fas-fa-cog-mr-2"></i>Admin-Panel-</a>-}-<form-action="@Url.Action("Logout",-"Account")"-method="post"-class="border-t-border-gray-100">-@Html.AntiForgeryToken()-<button-type="submit"-class="block-w-full-text-left-px-4-py-2-text-sm-text-red-600-hover:bg-gray-100">-<i-class="fas-fa-sign-out-alt-mr-2"></i>Log-out-</button>-</form>-</div>-</div>-</div>-}-else-{-<a-href="/login"-class="text-gray-900-font-medium-hover:text-blue-500-transition">-Log-in-<span-aria-hidden="true">→</span>-</a>-}-</div>-</nav>-<!---Mobile-Menu--->-<div-id="mobile-menu"-class="fixed-inset-y-0-right-0-w-64-bg-white-shadow-lg-transform-translate-x-full-transition-transform-duration-300-ease-in-out-z-50">-<div-class="p-6">-@if-(User.Identity.IsAuthenticated)-{-<div-class="mb-6-pb-4-border-b-border-gray-200">-<p-class="text-black-font-medium">Welcome!</p>-<p-class="text-gray-600-mb-4">@User.FindFirst("Phone")?.Value</p>-<div-class="space-y-2">-<a-href="/profile"-class="block-text-sm-text-gray-700-hover:text-blue-500">-<i-class="fas-fa-user-mr-2"></i>Profile-</a>-<a-href="/change-password"-class="block-text-sm-text-gray-700-hover:text-blue-500">-<i-class="fas-fa-key-mr-2"></i>Change-Password-</a>-<a-href="/purchase-history"-class="block-text-sm-text-gray-700-hover:text-blue-500">-<i-class="fas-fa-history-mr-2"></i>Purchase-History-</a>-<form-action="@Url.Action("Logout",-"Account")"-method="post"-class="mt-2">-@Html.AntiForgeryToken()-<button-type="submit"-class="text-red-600-hover:text-red-900-transition">-<i-class="fas-fa-sign-out-alt-mr-2"></i>Log-out-</button>-</form>-</div>-</div>-}-else-{-<div-class="mb-6-pb-4-border-b-border-gray-200">-<a-href="/login"-class="text-gray-900-font-medium-hover:text-blue-500-transition">-Log-in-<span-aria-hidden="true">→</span>-</a>-</div>-}-<div-class="space-y-4-mobile-menu-content">-<a-href="/product"-class="block-text-gray-900-text-base-font-medium">Products</a>-<a-href="/newmerch"-class="block-text-gray-900-text-base-font-medium">New-Merch</a>-<a-href="/auction"-class="block-text-gray-900-text-base-font-medium">Auction</a>-<a-href="/contact"-class="block-text-gray-900-text-base-font-medium">Contact</a>-</div>-</div>-</div>-</header>-<script>-document.addEventListener("DOMContentLoaded",-function-()-{-const-cartIcon-=-document.querySelector('#cart-icon');-const-cartDropdown-=-document.querySelector('#cart-dropdown');-const-cartItemsContainer-=-document.querySelector('#cart-items');-const-cartCount-=-document.querySelector('#cart-count');-const-userMenuButton-=-document.querySelector('#userMenuButton');-const-userDropdown-=-document.querySelector('#userDropdown');-const-cartButtons-=-document.querySelector('#cart-buttons');-const-cartLink-=-document.querySelector('#cart-link');-//-Cart-functionality-let-cart-=-[];-//-Toggle-cart-dropdown-visibility-cartIcon.addEventListener('click',-(e)-=>-{-e.stopPropagation();-//-Prevents-closing-if-clicking-inside-the-cart-cartDropdown.classList.toggle('hidden');-});-//-Handle-adding-items-to-cart-const-addToCartButton-=-document.getElementById("add-to-cart");-addToCartButton?.addEventListener("click",-()-=>-{-const-productName-=-addToCartButton.getAttribute("data-product-name");-//-Add-product-to-cart-cart.push(productName);-//-Update-cart-count-and-items-cartCount.textContent-=-cart.length;-cartCount.classList.remove("hidden");-//-Render-cart-items-renderCartItems();-});-function-renderCartItems()-{-cartItemsContainer.innerHTML-=-"";-//-Clear-previous-content-if-(cart.length-===-0)-{-cartItemsContainer.innerHTML-=-'<li-class="text-gray-500">Không-có-sản-phẩm-nào-trong-giỏ-hàng</li>';-cartCount.classList.add("hidden");-//-Hide-cart-count-when-empty-}-else-{-cart.forEach((item,-index)-=>-{-cartItemsContainer.innerHTML-+=-`-<li-class="flex-justify-between-items-center">-<span>${item}</span>-<button-class="text-red-500-text-sm"-onclick="removeItem(${index})"><i-class="</button>-</li>-<button-onclick="removeFromWishlist(${index})"-class="text-red-500-hover:text-red-700">-<i-class=""></i>-</button>-`;-cartItemsContainer.innerHTML-+=-`-<div-id="cart-buttons"-class="mt-4">-<a-href="/checkout">-<button-class="w-full-bg-black-text-white-py-3-hover:bg-gray-800-transition-font-bold">Thanh-Toán</button>-</a>-</div>-<div-id="cart-link"-class="mt-2">-<a-href="/cart">-<button-class="w-full-bg-white-text-black-py-3-hover:bg-gray-800-transition-border-black-border-2-font-bold">Giỏ-Hàng</button>-</a>-</div>-`;-});-cartCount.classList.remove("hidden");-//-Show-cart-count-when-not-empty-//-Add-checkout-and-cart-buttons-directly-to-the-cart-container-}-}-//-Remove-item-from-the-cart-window.removeItem-=-(index)-=>-{-cart.splice(index,-1);-cartCount.textContent-=-cart.length;-if-(cart.length-===-0)-cartCount.classList.add("hidden");-renderCartItems();-};-//-Close-cart-dropdown-when-clicking-outside-document.addEventListener('click',-(e)-=>-{-if-(!cartDropdown.contains(e.target)-&&-!cartIcon.contains(e.target))-{-cartDropdown.classList.add('hidden');-}-});-//-User-menu-functionality-//-Toggle-user-dropdown-visibility-userMenuButton?.addEventListener('click',-(e)-=>-{-e.stopPropagation();-//-Prevents-closing-if-clicking-inside-the-user-menu-userDropdown.classList.toggle('hidden');-});-//-Close-user-dropdown-when-clicking-outside-document.addEventListener('click',-(e)-=>-{-if-(!userDropdown.contains(e.target)-&&-!userMenuButton.contains(e.target))-{-userDropdown.classList.add('hidden');-}-});-//-Mobile-menu-handling-const-mobileMenuButton-=-document.getElementById('mobile-menu-button');-const-mobileMenu-=-document.getElementById('mobile-menu');-const-backdrop-=-document.getElementById('backdrop');-function-toggleMobileMenu()-{-const-isOpen-=-!mobileMenu.classList.contains('translate-x-full');-if-(isOpen)-{-closeMobileMenu();-}-else-{-openMobileMenu();-}-}-function-openMobileMenu()-{-mobileMenu.classList.remove('translate-x-full');-backdrop.classList.remove('hidden');-document.body.style.overflow-=-'hidden';-}-function-closeMobileMenu()-{-mobileMenu.classList.add('translate-x-full');-backdrop.classList.add('hidden');-document.body.style.overflow-=-'';-}-mobileMenuButton.addEventListener('click',-toggleMobileMenu);-backdrop.addEventListener('click',-closeMobileMenu);-//-Close-mobile-menu-when-pressing-Escape-document.addEventListener('keydown',-(e)-=>-{-if-(e.key-===-'Escape')-{-closeMobileMenu();-userDropdown.classList.add('hidden');-}-});-});-document.addEventListener("DOMContentLoaded",-function-()-{-const-cartIcon-=-document.querySelector('#cart-icon');-const-cartDropdown-=-document.querySelector('#cart-dropdown');-const-cartItemsContainer-=-document.querySelector('#cart-items');-const-cartCount-=-document.querySelector('#cart-count');-//-Cart-functionality-let-cart-=-[];-//-Toggle-cart-dropdown-visibility-cartIcon.addEventListener('click',-(e)-=>-{-e.stopPropagation();-//-Prevents-closing-if-clicking-inside-the-cart-cartDropdown.classList.toggle('hidden');-});-//-Close-cart-dropdown-when-clicking-outside-document.addEventListener('click',-(e)-=>-{-if-(!cartDropdown.contains(e.target)-&&-!cartIcon.contains(e.target))-{-cartDropdown.classList.add('hidden');-}-});-});-/////-document.addEventListener("DOMContentLoaded",-function-()-{-//-Existing-cart-variables...-const-wishlistIcon-=-document.querySelector('#wishlist-icon');-const-wishlistDropdown-=-document.querySelector('#wishlist-dropdown');-const-wishlistItemsContainer-=-document.querySelector('#wishlist-items');-const-wishlistCount-=-document.querySelector('#wishlist-count');-//-Initialize-wishlist-array-let-wishlist-=-[];-//-Toggle-wishlist-dropdown-visibility-wishlistIcon.addEventListener('click',-(e)-=>-{-e.stopPropagation();-wishlistDropdown.classList.toggle('hidden');-});-//-Close-wishlist-dropdown-when-clicking-outside-document.addEventListener('click',-(e)-=>-{-if-(!wishlistDropdown.contains(e.target)-&&-!wishlistIcon.contains(e.target))-{-wishlistDropdown.classList.add('hidden');-}-});-//-Add-wishlist-functionality-to-product-heart-icons-document.querySelectorAll('.fa-heart').forEach(heartIcon-=>-{-heartIcon.addEventListener('click',-function-(e)-{-e.preventDefault();-const-productContainer-=-this.closest('.group');-if-(!productContainer)-return;-const-productId-=-productContainer.querySelector('.add-to-cart').dataset.productId;-const-productName-=-productContainer.querySelector('.add-to-cart').dataset.productName;-const-productPrice-=-productContainer.querySelector('.add-to-cart').dataset.productPrice;-const-productImage-=-productContainer.querySelector('.add-to-cart').dataset.productImage;-//-Toggle-wishlist-status-const-index-=-wishlist.findIndex(item-=>-item.id-===-productId);-if-(index-===--1)-{-//-Add-to-wishlist-wishlist.push({-id:-productId,-name:-productName,-price:-productPrice,-image:-productImage-});-this.classList.add('text-red-500');-}-else-{-//-Remove-from-wishlist-wishlist.splice(index,-1);-this.classList.remove('text-red-500');-}-updateWishlistUI();-});-});-function-updateWishlistUI()-{-wishlistItemsContainer.innerHTML-=-"";-if-(wishlist.length-===-0)-{-wishlistItemsContainer.innerHTML-=-'<li-class="text-gray-500">No-items-in-wishlist</li>';-wishlistCount.classList.add('hidden');-}-else-{-wishlist.forEach((item,-index)-=>-{-wishlistItemsContainer.innerHTML-+=-`-<li-class="flex-items-center-gap-4-py-2">-<img-src="${item.image}"-alt="${item.name}"-class="w-16-h-16-object-cover-rounded">-<div-class="flex-1">-<h4-class="font-medium">${item.name}</h4>-<p-class="text-gray-500">${new-Intl.NumberFormat('vi-VN',-{-style:-'currency',-currency:-'VND'-}).format(item.price)}</p>-</div>-<button-onclick="removeFromWishlist(${index})"-class="text-red-500-hover:text-red-700">-<i-class="fas-fa-times"></i>-</button>-</li>-`;-});-wishlistCount.textContent-=-wishlist.length;-wishlistCount.classList.remove('hidden');-}-}-//-Add-global-function-to-remove-items-from-wishlist-window.removeFromWishlist-=-(index)-=>-{-wishlist.splice(index,-1);-updateWishlistUI();-};-});-////-document.addEventListener("DOMContentLoaded",-function-()-{-//-Existing-cart-variables...-const-wishlistIcon-=-document.querySelector('#wishlist-icon');-const-wishlistDropdown-=-document.querySelector('#wishlist-dropdown');-const-wishlistItemsContainer-=-document.querySelector('#wishlist-items');-const-wishlistCount-=-document.querySelector('#wishlist-count');-//-Initialize-wishlist-array-let-wishlist-=-[];-//-Toggle-wishlist-dropdown-visibility-wishlistIcon.addEventListener('click',-(e)-=>-{-e.stopPropagation();-wishlistDropdown.classList.toggle('hidden');-});-//-Close-wishlist-dropdown-when-clicking-outside-document.addEventListener('click',-(e)-=>-{-if-(!wishlistDropdown.contains(e.target)-&&-!wishlistIcon.contains(e.target))-{-wishlistDropdown.classList.add('hidden');-}-});-//-Add-wishlist-functionality-to-product-heart-icons-document.querySelectorAll('.fa-heart').forEach(heartIcon-=>-{-heartIcon.addEventListener('click',-function-(e)-{-e.preventDefault();-const-productContainer-=-this.closest('.group');-if-(!productContainer)-return;-const-productId-=-productContainer.querySelector('.add-to-cart').dataset.productId;-const-productName-=-productContainer.querySelector('.add-to-cart').dataset.productName;-const-productPrice-=-productContainer.querySelector('.add-to-cart').dataset.productPrice;-const-productImage-=-productContainer.querySelector('.add-to-cart').dataset.productImage;-//-Toggle-wishlist-status-const-index-=-wishlist.findIndex(item-=>-item.id-===-productId);-if-(index-===--1)-{-//-Add-to-wishlist-wishlist.push({-id:-productId,-name:-productName,-price:-productPrice,-image:-productImage-});-this.classList.add('text-red-500');-}-else-{-//-Remove-from-wishlist-wishlist.splice(index,-1);-this.classList.remove('text-red-500');-}-updateWishlistUI();-});-});-function-updateWishlistUI()-{-wishlistItemsContainer.innerHTML-=-"";-if-(wishlist.length-===-0)-{-wishlistItemsContainer.innerHTML-=-'<li-class="text-gray-500">No-items-in-wishlist</li>';-wishlistCount.classList.add('hidden');-}-else-{-wishlist.forEach((item,-index)-=>-{-wishlistItemsContainer.innerHTML-+=-`-<li-class="flex-items-center-gap-4-py-2">-<img-src="${item.image}"-alt="${item.name}"-class="w-16-h-16-object-cover-rounded">-<div-class="flex-1">-<h4-class="font-medium">${item.name}</h4>-<p-class="text-gray-500">${new-Intl.NumberFormat('vi-VN',-{-style:-'currency',-currency:-'VND'-}).format(item.price)}</p>-</div>-<button-onclick="removeFromWishlist(${index})"-class="text-red-500-hover:text-red-700">-<i-class="fas-fa-times"></i>-</button>-</li>-`;-});-wishlistCount.textContent-=-wishlist.length;-wishlistCount.classList.remove('hidden');-}-}-//-Add-global-function-to-remove-items-from-wishlist-window.removeFromWishlist-=-(index)-=>-{-wishlist.splice(index,-1);-updateWishlistUI();-};-});-</script>-</body>-</html>-design-lại-giao-diện-và-giữ-nguyên-chức-năng-cho-tôi
