104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Logo from "@/components/Logo";
|
|
import React, { useState } from "react";
|
|
import { Menu } from "@styled-icons/entypo/Menu";
|
|
import Link from "next/link";
|
|
|
|
function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
|
|
const [checked, setChecked] = useState<boolean>();
|
|
const handleClick = () => {
|
|
checked ? setChecked(!checked) : setChecked(checked);
|
|
};
|
|
return (
|
|
<div className="drawer">
|
|
<input
|
|
id="my-drawer-3"
|
|
type="checkbox"
|
|
className="drawer-toggle "
|
|
checked={checked}
|
|
/>
|
|
<div className="drawer-content flex flex-col">
|
|
{/* Navbar */}
|
|
<div className="w-full navbar">
|
|
<div className="flex-none lg:hidden">
|
|
<label htmlFor="my-drawer-3">
|
|
<Menu
|
|
size={36}
|
|
className="self-center w-full h-full cursor-pointer fill-black dark:fill-white"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex-none hidden lg:block">
|
|
<ul className="menu menu-horizontal items-center">
|
|
{/* Site branding */}
|
|
<div className="shrink-0 mr-4">
|
|
{/* Logo */}
|
|
<Logo className="group relative cursor-pointer" />
|
|
</div>
|
|
{/* Navbar menu content here */}
|
|
<li>
|
|
<Link href="/pricing" onClick={handleClick}>
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/blogs" onClick={handleClick}>
|
|
Blogs
|
|
</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">
|
|
<label htmlFor="my-drawer-3" className="drawer-overlay"></label>
|
|
|
|
<ul className="menu w-80 h-full bg-white dark:bg-black">
|
|
{/* Sidebar content here */}
|
|
<div className="shrink-0 m-3">
|
|
{/* Logo */}
|
|
<Logo className="group relative cursor-pointer" />
|
|
</div>
|
|
<li>
|
|
<Link href="/pricing">Pricing</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/blogs">Blogs</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="/contact">Contact</Link>
|
|
</li>
|
|
{isUserLoggedIn ? (
|
|
<li>
|
|
<Link href="/account" onClick={handleClick}>
|
|
Account
|
|
</Link>
|
|
</li>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Navigation;
|