Preview: index.jsx
Size: 11.10 KB
//proc/thread-self/root/home/byroehnu/easetack.com/resources/js/Frontend/Components/Header/index.jsx
import React, { useEffect, useState, useRef } from "react"
import { Link, router, usePage } from "@inertiajs/react"
import organizeMenusIntoHierarchy from "@/utils/organizeMenusIntoHierarchy"
import MenuItem from "@/Admin/Components/Header/MenuItem"
import { useSelector } from "react-redux"
import SideHeader from "./SideHeader"
import GlobalSearch from "./GlobalSearch"
import LanguageDropdown from "./LanguageDropdown"
import gravatarUrl from "gravatar-url"
import { showAlert } from "@/Admin/Utils/SweetAlert"
import translate from "@/utils/translate"
import { Icon } from "@iconify/react"
export default function Header({ cart }) {
const { cart_slug } = usePage().props
const { carts } = useSelector((state) => state.carts)
const { lang, auth } = usePage().props
const { currentLang } = useSelector((state) => state.pages)
const customize = useSelector((state) => state.customize)
const [sideHeaderToggle, setSideHeaderToggle] = useState(false)
const [mobileToggle, setMobileToggle] = useState(false)
const [isSticky, setIsSticky] = useState()
const [profileDropdownOpen, setProfileDropdownOpen] = useState(false)
const currentLanguage = currentLang ?? lang.default_lang
const mainMenus = localStorage.getItem("main_menu") ? JSON.parse(localStorage.getItem("main_menu")) : []
const menus = mainMenus ? organizeMenusIntoHierarchy(mainMenus[currentLanguage]) : []
const cartItemCount = carts?.reduce((total, item) => total + (item.quantity || 1), 0) || 0
const handleProfileDropdownToggle = () => setProfileDropdownOpen(!profileDropdownOpen)
// handle logout
const handleLogout = () => {
showAlert(`${translate("Are you sure")}?`, `${translate("You want to logout this session")}?`, `${translate("Logout")}!`, () => {
router.post(route("logout"))
})
}
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 0) {
setIsSticky(true)
} else {
setIsSticky(false)
}
})
}, [])
useEffect(() => {
const handleClickOutside = (event) => {
if (!event.target.closest(".cs_dropdown_wrap")) {
setProfileDropdownOpen(false)
}
}
if (profileDropdownOpen) {
document.addEventListener("mousedown", handleClickOutside)
} else {
document.removeEventListener("mousedown", handleClickOutside)
}
return () => document.removeEventListener("mousedown", handleClickOutside)
}, [profileDropdownOpen])
return (
<>
<header className={`cs_site_header cs_style_1 cs_primary_color cs_sticky_header cs_white_bg${isSticky ? " cs_sticky_active" : ""}`}>
<div className="cs_main_header">
<div className="container">
<div className="cs_main_header_in">
<div className="cs_main_header_left">
<Link className="cs_site_branding" to="/" href="/">
<img src={customize?.general?.site_logo_dark} alt={customize?.general?.site_name} />
</Link>
<div className="cs_nav">
<nav className={`cs_nav_list_wrap${mobileToggle ? " cs_active" : ""}`}>
<ul className="cs_nav_list">
{menus.map((menuItem) => (
<MenuItem setMobileToggle={setMobileToggle} key={menuItem.id} item={menuItem} />
))}
</ul>
</nav>
<span
className={`cs_menu_toggle${mobileToggle ? " cs_toggle_active" : ""}`}
onClick={() => setMobileToggle(!mobileToggle)}
>
<span></span>
</span>
</div>
</div>
<div className="cs_main_header_right">
<div className="cs_toolbox">
<GlobalSearch />
{auth?.is_loggedIn ? (
<div className="cs_dropdown_wrap">
<div
onClick={handleProfileDropdownToggle}
className={`cs_header_user_btn ${profileDropdownOpen ? "active" : ""}`}
>
<Icon icon="lucide:circle-user" width="20" height="20" />
</div>
{profileDropdownOpen && (
<div className="cs_header_user_dropdown">
<div className="cs_header_user_info">
<img src={gravatarUrl(auth?.user?.email)} alt="" />
<h4 className="">{auth?.user?.name}</h4>
<p className="">{auth?.user?.email}</p>
</div>
<ul className="cs_header_user_list cs_mp0">
<li>
<Link href={route("user.dashboard")}>{translate("Dashboard")}</Link>
</li>
<li>
<Link href={route("user.orders")}>{translate("My Orders")}</Link>
</li>
<li>
<Link href={route("user.profile.edit")}>{translate("Profile")}</Link>
</li>
<li>
<a href="#" onClick={handleLogout}>
{translate("Log out")}
</a>
</li>
</ul>
</div>
)}
</div>
) : (
<div className="cs_header_user_btn active d-flex">
<Link href={route("login.create")}>{translate("Login")}</Link>
</div>
)}
{cart && (
<Link href={route("pages.show", { slug: cart_slug })} className="cart-counter">
<svg width={22} height={22} viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_293_142)">
<path
d="M19.25 5.5H16.5C16.5 4.04131 15.9205 2.64236 14.8891 1.61091C13.8576 0.579463 12.4587 0 11 0C9.54131 0 8.14236 0.579463 7.11091 1.61091C6.07946 2.64236 5.5 4.04131 5.5 5.5H2.75C2.02065 5.5 1.32118 5.78973 0.805456 6.30546C0.289731 6.82118 0 7.52065 0 8.25L0 17.4167C0.00145554 18.6318 0.484808 19.7967 1.34403 20.656C2.20326 21.5152 3.3682 21.9985 4.58333 22H17.4167C18.6318 21.9985 19.7967 21.5152 20.656 20.656C21.5152 19.7967 21.9985 18.6318 22 17.4167V8.25C22 7.52065 21.7103 6.82118 21.1945 6.30546C20.6788 5.78973 19.9793 5.5 19.25 5.5ZM11 1.83333C11.9725 1.83333 12.9051 2.21964 13.5927 2.90728C14.2804 3.59491 14.6667 4.52754 14.6667 5.5H7.33333C7.33333 4.52754 7.71964 3.59491 8.40728 2.90728C9.09491 2.21964 10.0275 1.83333 11 1.83333ZM20.1667 17.4167C20.1667 18.146 19.8769 18.8455 19.3612 19.3612C18.8455 19.8769 18.146 20.1667 17.4167 20.1667H4.58333C3.85399 20.1667 3.15451 19.8769 2.63879 19.3612C2.12306 18.8455 1.83333 18.146 1.83333 17.4167V8.25C1.83333 8.00688 1.92991 7.77373 2.10182 7.60182C2.27373 7.42991 2.50688 7.33333 2.75 7.33333H5.5V9.16667C5.5 9.40978 5.59658 9.64294 5.76849 9.81485C5.94039 9.98676 6.17355 10.0833 6.41667 10.0833C6.65978 10.0833 6.89294 9.98676 7.06485 9.81485C7.23676 9.64294 7.33333 9.40978 7.33333 9.16667V7.33333H14.6667V9.16667C14.6667 9.40978 14.7632 9.64294 14.9352 9.81485C15.1071 9.98676 15.3402 10.0833 15.5833 10.0833C15.8264 10.0833 16.0596 9.98676 16.2315 9.81485C16.4034 9.64294 16.5 9.40978 16.5 9.16667V7.33333H19.25C19.4931 7.33333 19.7263 7.42991 19.8982 7.60182C20.0701 7.77373 20.1667 8.00688 20.1667 8.25V17.4167Z"
fill="#121212"
/>
</g>
<defs>
<clipPath id="clip0_293_142">
<rect width={22} height={22} fill="white" />
</clipPath>
</defs>
</svg>
{cartItemCount === 0 ? "" : <span>{cartItemCount}</span>}
</Link>
)}
{Object.entries(lang.languages).length > 1 && <LanguageDropdown />}
<button
className="cs_hamburger_btn cs_hamburger_info_btn "
onClick={() => setSideHeaderToggle(!sideHeaderToggle)}
>
<span className="cs_hamburger_btn_in">
<span />
<span />
<span />
<span />
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<SideHeader sideHeaderToggle={sideHeaderToggle} setSideHeaderToggle={setSideHeaderToggle} customize={customize} />
</>
)
}
Directory Contents
Dirs: 0 × Files: 14