fastpocket/Frontend/components/Navigation.jsx

111 lines
3.1 KiB
JavaScript

"use client"
import Logo from "@/components/Logo"
import React, { useState } from "react"
import Link from "next/link"
import { Navigation24Filled } from "@fluentui/react-icons"
function Navigation({ isUserLoggedIn }) {
const [checked, setChecked] = useState()
const handleClick = () => {
checked ? setChecked(!checked) : setChecked(checked)
}
return (
<div className="drawer max-w-fit">
<input
id="my-drawer-3"
type="checkbox"
className="drawer-toggle "
aria-label="menu-toggle"
checked={checked}
/>
<div className="drawer-content flex flex-col max-w-fit sm:max-w-full sm:w-full">
{/* Navbar */}
<div className="flex-grow navbar ">
<div className="flex-none lg:hidden">
<label htmlFor="my-drawer-3" className="items-center">
<Navigation24Filled />
</label>
</div>
<div className="flex-none hidden lg:block">
<ul className="menu menu-horizontal items-center text-base-content font-medium">
{/* Site branding */}
<li className="shrink-0 mr-4">
{/* Logo */}
<Link href="/">
<Logo className="group relative cursor-pointer" />
</Link>
</li>
{/* Navbar menu content here */}
<li>
<Link href="/pricing" onClick={handleClick}>
Become A 10x Dev
</Link>
</li>
<li>
<Link href="/about">Meet Sam</Link>
</li>
{/* <li>
<Link href="/contact" onClick={handleClick}>
Contact
</Link>
</li> */}
{isUserLoggedIn ? (
<li>
<Link href="/account" onClick={handleClick}>
Account
</Link>
</li>
) : (
<></>
)}
</ul>
</div>
</div>
{/* Page content here */}
</div>
<div className="drawer-side z-20">
<label
htmlFor="my-drawer-3"
className="drawer-overlay"
aria-label="drawer-navigation"
></label>
<div className="menu w-80 h-full bg-base-100 text-base-content">
{/* Sidebar content here */}
<div className="shrink-0 m-3">
{/* Logo */}
<Link href="/">
<Logo className="group relative cursor-pointer" />
</Link>
</div>
<ul>
<li>
<Link href="/pricing">Get Your FastPocket</Link>
</li>
<li>
<Link href="/about">Meet Sam</Link>
</li>
</ul>
{/* <li>
<Link href="/contact">Contact</Link>
</li> */}
{isUserLoggedIn ? (
<li>
<Link href="/account" onClick={handleClick}>
Account
</Link>
</li>
) : (
<></>
)}
</div>
</div>
</div>
)
}
export default Navigation