157 lines
7 KiB
JavaScript
157 lines
7 KiB
JavaScript
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import { useEffect, useState } from 'react'
|
|
import AppIcon from './icons/AppIcon'
|
|
import AppLogo from './icons/AppIcon'
|
|
import IconNavHome from './icons/IconNavHome'
|
|
import IconNavMovie from './icons/IconNavMovie'
|
|
import IconNavTv from './icons/IconNavTv'
|
|
import NavigationIcon from './NavigationIcon'
|
|
import 'react-tooltip/dist/react-tooltip.css'
|
|
import { Tooltip } from 'react-tooltip'
|
|
|
|
export default function Navigation() {
|
|
const router = useRouter()
|
|
const [token, setToken] = useState(false)
|
|
useEffect(() => {
|
|
let temp = localStorage.getItem('access_token') || false
|
|
setToken(temp)
|
|
}, [])
|
|
return (
|
|
<nav className='sticky top-0 z-50 flex items-center justify-between bg-app-semi-dark-blue p-5 md:mx-6 md:mt-6 md:mb-[33px] md:rounded-[10px] lg:fixed lg:left-0 lg:mr-0 lg:h-5/6 lg:flex-col lg:py-9'>
|
|
<Tooltip id="my-tooltip" place="bottom-start" events="hover" />
|
|
<Link href='/' passHref>
|
|
<a>
|
|
<AppLogo />
|
|
</a>
|
|
</Link>
|
|
<div className='flex w-1/2 items-center justify-between lg:h-[400px] lg:flex-col 2xs:w-[70%] nav-res'>
|
|
{/* <NavigationIcon href='/'>
|
|
<svg
|
|
className={router.pathname === '/' ? 'active-link' : 'icon-nav'}
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
viewBox='0 0 16 16'>
|
|
<path d='M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707L7.293 1.5Z' />
|
|
<path d='m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9.293Zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018Z' />
|
|
</svg>
|
|
</NavigationIcon> */}
|
|
<NavigationIcon href='/latest-top-10' >
|
|
|
|
<svg
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Top10"
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
className={
|
|
router.pathname == '/latest-top-10' ? 'active-link' : 'icon-nav'
|
|
}
|
|
viewBox='0 0 16 16'>
|
|
<path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15Z' />
|
|
</svg>
|
|
</NavigationIcon>
|
|
|
|
<div onClick={()=> window.location.href="/get-posts/category:Movies/"}>
|
|
<svg
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Browse"
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
className={
|
|
router.pathname == '/get-posts/[category]'
|
|
? 'active-link'
|
|
: 'icon-nav'
|
|
}
|
|
viewBox='0 0 16 16'>
|
|
<path
|
|
|
|
d='M16 8a8.001 8.001 0 0 1-7.022 7.94l1.902-7.098a2.995 2.995 0 0 0 .05-1.492A2.977 2.977 0 0 0 10.237 6h5.511A8 8 0 0 1 16 8ZM0 8a8 8 0 0 0 7.927 8l1.426-5.321a2.978 2.978 0 0 1-.723.255 2.979 2.979 0 0 1-1.743-.147 2.986 2.986 0 0 1-1.043-.7L.633 4.876A7.975 7.975 0 0 0 0 8Zm5.004-.167L1.108 3.936A8.003 8.003 0 0 1 15.418 5H8.066a2.979 2.979 0 0 0-1.252.243 2.987 2.987 0 0 0-1.81 2.59ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<NavigationIcon href='/search'>
|
|
<svg
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Search"
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
className={
|
|
router.pathname == '/search' ? 'active-link' : 'icon-nav'
|
|
}
|
|
viewBox='0 0 16 16'>
|
|
<path d='M6.5 13a6.474 6.474 0 0 0 3.845-1.258h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.008 1.008 0 0 0-.115-.1A6.471 6.471 0 0 0 13 6.5 6.502 6.502 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13Zm0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z' />
|
|
</svg>
|
|
</NavigationIcon>
|
|
|
|
|
|
<NavigationIcon href='/movie' >
|
|
<IconNavMovie />
|
|
</NavigationIcon>
|
|
<NavigationIcon href='/tv' data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="TV">
|
|
<IconNavTv />
|
|
</NavigationIcon>
|
|
<NavigationIcon href={token ? '/upload' : '/login?page=upload'}>
|
|
<svg
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Upload"
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
className={
|
|
router.pathname == '/upload' ? 'active-link' : 'icon-nav'
|
|
}
|
|
viewBox='0 0 16 16'>
|
|
<path d='M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z' />
|
|
</svg>
|
|
</NavigationIcon>
|
|
|
|
|
|
{token ? (
|
|
<NavigationIcon href='/dashboard' >
|
|
<IconNavHome />
|
|
</NavigationIcon>
|
|
) : null}
|
|
</div>
|
|
<div style={{ cursor: "pointer" }}>
|
|
{token ? <svg xmlns="http://www.w3.org/2000/svg"
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Logout"
|
|
onClick={() => {
|
|
localStorage.clear()
|
|
window.location.href = "/"
|
|
}} width="24" height="24" fill="currentColor" className="icon-nav" viewBox="0 0 16 16">
|
|
<path fillRule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z" />
|
|
<path fillRule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z" />
|
|
</svg>
|
|
:
|
|
<svg
|
|
data-tooltip-id="my-tooltip"
|
|
data-tooltip-content="Login"
|
|
onClick={() => {
|
|
router.push("/login")
|
|
}}
|
|
width='24'
|
|
height='24'
|
|
fill='currentColor'
|
|
className={router.pathname == '/login' ? 'active-link' : 'icon-nav'}
|
|
viewBox='0 0 16 16'>
|
|
<path
|
|
fillRule='evenodd'
|
|
d='M10 3.5a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 1 1 0v2A1.5 1.5 0 0 1 9.5 14h-8A1.5 1.5 0 0 1 0 12.5v-9A1.5 1.5 0 0 1 1.5 2h8A1.5 1.5 0 0 1 11 3.5v2a.5.5 0 0 1-1 0v-2z'
|
|
/>
|
|
<path
|
|
fillRule='evenodd'
|
|
d='M4.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H14.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z'
|
|
/>
|
|
</svg>
|
|
}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|