160 lines
8.0 KiB
TypeScript
160 lines
8.0 KiB
TypeScript
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import Link from 'next/link';
|
|
import { IRootState } from '@/store';
|
|
import { toggleSidebar, toggleRTL } from '@/store/themeConfigSlice';
|
|
import Dropdown from '@/components/dropdown';
|
|
import IconMenu from '@/components/icon/icon-menu';
|
|
import IconCalendar from '@/components/icon/icon-calendar';
|
|
import IconEdit from '@/components/icon/icon-edit';
|
|
import IconChatNotification from '@/components/icon/icon-chat-notification';
|
|
import IconSearch from '@/components/icon/icon-search';
|
|
import IconXCircle from '@/components/icon/icon-x-circle';
|
|
import IconSun from '@/components/icon/icon-sun';
|
|
import IconMoon from '@/components/icon/icon-moon';
|
|
import IconLaptop from '@/components/icon/icon-laptop';
|
|
import IconMailDot from '@/components/icon/icon-mail-dot';
|
|
import IconArrowLeft from '@/components/icon/icon-arrow-left';
|
|
import IconInfoCircle from '@/components/icon/icon-info-circle';
|
|
import IconBellBing from '@/components/icon/icon-bell-bing';
|
|
import IconKey from '@/components/icon/Icon-Key';
|
|
import IconUser from '@/components/icon/icon-user';
|
|
import IconLogout from '@/components/icon/icon-logout';
|
|
import IconCaretsDown from '@/components/icon/icon-carets-down';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { getTranslation } from '@/i18n';
|
|
|
|
const Header = () => {
|
|
const pathname = usePathname();
|
|
const dispatch = useDispatch();
|
|
const router = useRouter();
|
|
const { t } = getTranslation();
|
|
|
|
const isRtl = useSelector((state: IRootState) => state.themeConfig.rtlClass) === 'rtl';
|
|
const themeConfig = useSelector((state: IRootState) => state.themeConfig);
|
|
|
|
const [token, setToken] = useState("");
|
|
const [userEmail, setUserEmail] = useState("")
|
|
|
|
useEffect(() => {
|
|
const Token: any = localStorage.getItem('token');
|
|
const UserEmail: any = localStorage.getItem('user_email')
|
|
setToken(Token);
|
|
setUserEmail(UserEmail)
|
|
}, []);
|
|
|
|
const handleSignOut = async () => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("user_email")
|
|
localStorage.removeItem("paymentDetails")
|
|
localStorage.removeItem("payment_session")
|
|
localStorage.removeItem("userDetails")
|
|
router.push('/login');
|
|
};
|
|
|
|
return (
|
|
<header className="z-40 dark">
|
|
<div className="shadow-sm">
|
|
<div className="relative flex w-full items-center bg-[#242424] px-5 py-2.5 text-white border-b border-[#000]/60">
|
|
|
|
{/* Mobile Logo + Menu */}
|
|
<div className="horizontal-logo flex items-center justify-between lg:hidden">
|
|
<Link href="/" className="main-logo flex items-center">
|
|
<img className="inline w-8" src="/assets/images/logo_sb.png" alt="logo" />
|
|
<span className="hidden md:inline text-2xl font-semibold ml-2 text-white">Social Buddy</span>
|
|
</Link>
|
|
|
|
<button
|
|
type="button"
|
|
className="flex rounded-full bg-gray-700/40 p-2 hover:bg-gray-700/70"
|
|
onClick={() => dispatch(toggleSidebar())}
|
|
>
|
|
<IconMenu className="h-5 w-5 text-white" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Right Section */}
|
|
<div className="flex items-center ml-auto space-x-4">
|
|
|
|
{/* Profile Dropdown */}
|
|
<div className="dropdown flex shrink-0">
|
|
<Dropdown
|
|
offset={[0, 8]}
|
|
placement={`${isRtl ? 'bottom-start' : 'bottom-end'}`}
|
|
btnClassName="relative group block"
|
|
button={
|
|
// <img
|
|
// className="h-9 w-9 rounded-full object-cover border border-gray-700"
|
|
// src="/assets/images/user-profile.jpeg"
|
|
// alt="userProfile"
|
|
// />
|
|
<span title="Your Account Profile">
|
|
<IconUser className="h-10 w-10 rounded-full object-cover border p-2 border-gray-700" />
|
|
</span>
|
|
}
|
|
>
|
|
<ul className="w-[230px] bg-[#242424] text-white rounded-md overflow-hidden shadow-xl border border-gray-800">
|
|
|
|
{/* Profile Header */}
|
|
<li className="px-4 py-4 flex items-center border-b border-gray-700">
|
|
<IconUser className='h-10 w-10' />
|
|
<div className="pl-4">
|
|
{/* <h4 className="text-base font-semibold">John Doe</h4> */}
|
|
<span className="text-gray-400 text-sm">{userEmail ? userEmail : ""}</span>
|
|
</div>
|
|
</li>
|
|
|
|
{/* Profile Page */}
|
|
{/* <li>
|
|
<Link href="/users/profile" className="dark:hover:text-white flex items-center !py-3">
|
|
<IconUser className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
Profile
|
|
</Link>
|
|
</li> */}
|
|
|
|
|
|
<li className="border-t border-white-light dark:border-white-light/10">
|
|
{token ? (
|
|
<>
|
|
{/* Change Password Button */}
|
|
<Link
|
|
href="/change-password"
|
|
className="!py-3 flex items-center text-primary hover:text-blue-600"
|
|
>
|
|
<IconKey className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
Change Password
|
|
</Link>
|
|
|
|
{/* Sign Out Button */}
|
|
<button
|
|
type="button"
|
|
onClick={handleSignOut}
|
|
title="Securely sign out of Social Buddy"
|
|
className="!py-3 text-danger flex items-center w-full text-left"
|
|
>
|
|
<IconLogout className="h-4.5 w-4.5 shrink-0 ltr:mr-2 rtl:ml-2" />
|
|
Sign Out
|
|
</button>
|
|
</>
|
|
) : (
|
|
<Link href="/login" className="!py-3 text-danger flex items-center">
|
|
<IconLogout className="h-4.5 w-4.5 shrink-0 rotate-90 ltr:mr-2 rtl:ml-2" />
|
|
Login
|
|
</Link>
|
|
)}
|
|
</li>
|
|
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|