112 lines
3.7 KiB
JavaScript
112 lines
3.7 KiB
JavaScript
/* eslint-disable @next/next/no-img-element */
|
|
import React, { useEffect, useState } from 'react';
|
|
import {useRouter} from 'next/router';
|
|
|
|
|
|
const cRoutes = [
|
|
{
|
|
path: [""],
|
|
route: "/",
|
|
title: "Home",
|
|
},
|
|
{
|
|
path: ["search"],
|
|
route: "/search",
|
|
title: "Search",
|
|
},
|
|
{
|
|
path: ["get-posts"],
|
|
route: "/get-posts/category:Movies/",
|
|
title: "Browse",
|
|
},
|
|
{
|
|
path: ["upload"],
|
|
route: "/upload/",
|
|
title: "Upload",
|
|
},
|
|
{
|
|
path: ["dashboard"],
|
|
route: "/dashboard/",
|
|
title: "Dashboard",
|
|
}
|
|
];
|
|
|
|
|
|
const Header = () => {
|
|
const [showNav,setShowNav] = useState(false);
|
|
|
|
const route = useRouter();
|
|
const router = route.pathname;
|
|
const[token,setToken]=useState(false)
|
|
|
|
let cRouter = router?.split("/") ?? [];
|
|
useEffect(()=>{
|
|
let temp = localStorage.getItem("access_token") || false
|
|
setToken(temp)
|
|
},[])
|
|
return (
|
|
<div className=''>
|
|
<header className="hidden bg-background-header/25 text-sm font-medium md:flex sticky top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 justify-between">
|
|
|
|
|
|
|
|
|
|
<span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold my-4' onClick={()=>route.push("/")}>theRARBG</span>
|
|
|
|
<div className='hidden md:flex mx-auto font-normal items-center'>
|
|
{cRoutes.map((obj, i) => (
|
|
<div className={`px-6 uppercase cursor-pointer font-normal ${obj.path.includes(cRouter[1] || "0") ? "border-b-2 border-primary" : ""} h-full flex items-center ${(!token && i===4)?'hidden':""} `} onClick={()=>
|
|
{
|
|
let temp = token?false:true
|
|
if(i===3&&temp){
|
|
window.location.href=`/login`;
|
|
}
|
|
|
|
else{
|
|
route.push(`${obj.route}`);
|
|
}
|
|
}} key={i}>
|
|
<p className={`${obj.path.includes(cRouter[1] || "0") ? "text-primary" : ""} hover:text-green-400 h-fit`}>{obj.title}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<button className='px-5 bg-primary/10 text-primary border-primary my-4 text-xs hover:bg-primary/30' style={{border:"solid 0.5px",fontWeight:"400"}} onClick={()=>
|
|
{
|
|
if(token){
|
|
localStorage.clear()
|
|
window.location.href="/login"
|
|
}else{
|
|
route.push("/login")
|
|
}
|
|
}} >{token?"Logout":"Login"}</button>
|
|
</header>
|
|
{/*Mobile Hamburger Menu */}
|
|
<div className={`${showNav?"h-screen":"h-[60px]"} transition-all ease-in-out duration-500 z-20 md:hidden bg-background-header/25 w-full fixed top-0 font-montserrat backdrop-blur-3xl px-8 md:px-16 flex flex-col`}>
|
|
<div className='h-[60px] w-full flex justify-between items-center'>
|
|
<span className='mx-6 cursor-pointer hover:text-green-400 text-xl font-semibold' onClick={()=>route.push("/")}>theRARBG</span>
|
|
<img src='/navIcon.png' alt="The Navigation Icon" className='w-8 h-8 cursor-pointer' onClick={() => setShowNav(!showNav)}/>
|
|
</div>
|
|
<div className={`${showNav?"opacity-100 pt-56":" opacity-0 h-0 "} transition-all duration-500 ease-in-out grow w-full flex flex-col items-center gap-5`}>
|
|
{cRoutes.map((obj, i) => (
|
|
<div className={`uppercase cursor-pointer text-5xl font-normal flex justify-center items-center ${obj.path.includes(router) ? "border-b-2 border-primary " : ""} `}
|
|
onClick={()=>{
|
|
if(i===3&&!token){
|
|
route.push(`/login`);
|
|
}
|
|
else{
|
|
route.push(`${obj.route}`);
|
|
}
|
|
setShowNav(false)}
|
|
}
|
|
key={i}>
|
|
<p className={`${obj.path.includes(router) ? "text-primary" : ""} hover:text-green-400`}>{obj.title}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Header
|