navbar change
This commit is contained in:
parent
99d91d51c0
commit
f0caaf1ad0
@ -4,15 +4,24 @@ import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import classnames from "classnames";
|
||||
import { GiHamburgerMenu } from "react-icons/gi";
|
||||
import { MdOutlineRestaurantMenu } from "react-icons/md";
|
||||
import Reserve from "./reserveButton";
|
||||
import "./NavBar.css";
|
||||
import { GiHamburgerMenu } from "react-icons/gi";
|
||||
import {
|
||||
AiOutlineInstagram,
|
||||
AiOutlineFacebook,
|
||||
AiOutlineTwitter,
|
||||
} from "react-icons/ai";
|
||||
import { FaTiktok } from "react-icons/fa";
|
||||
|
||||
const NavBar = () => {
|
||||
const currentPath = usePathname();
|
||||
console.log(currentPath);
|
||||
const [toggle_menu, set_toggle_menu] = useState(false);
|
||||
const [menu_open, set_menu_open] = useState(false);
|
||||
|
||||
const handleNav = () => {
|
||||
set_menu_open(!menu_open);
|
||||
};
|
||||
|
||||
// Create an array to hold the list items
|
||||
const links = [
|
||||
@ -114,38 +123,77 @@ const NavBar = () => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="block md:hidden">
|
||||
<GiHamburgerMenu
|
||||
className="text-accent text-4xl space-x-2 absolute top-3 right-3"
|
||||
onClick={() => set_toggle_menu(true)}
|
||||
/>
|
||||
{toggle_menu && (
|
||||
<div className="navbar_small_screen_overlay flex_center slide_bottom">
|
||||
<MdOutlineRestaurantMenu
|
||||
fontSize={27}
|
||||
className="text-accent absolute top-3 right-3 text-4xl"
|
||||
onClick={() => set_toggle_menu(false)}
|
||||
/>
|
||||
<ul className="flex flex-col text-2xl col-auto gap-4 grid-cols-1 table-auto absolute">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
|
||||
// replace with classnames object instead
|
||||
className={classnames({
|
||||
"border-b border-jefesRed text-accent":
|
||||
link.href === currentPath,
|
||||
"text-accent": link.href !== currentPath,
|
||||
// "hover:text-jefesRed": true,
|
||||
})}
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<div className={menu_open ? "hidden" : ""}>
|
||||
{" "}
|
||||
<div
|
||||
onClick={handleNav}
|
||||
className="md:hidden cursor-pointer pl-24 text-white top-3 right-3 absolute"
|
||||
>
|
||||
<GiHamburgerMenu size={25} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={menu_open ? "" : "hidden"}>
|
||||
<div
|
||||
onClick={handleNav}
|
||||
className="md:hidden cursor-pointer top-3 right-3 absolute z-20 ease-in duration-500"
|
||||
>
|
||||
<Image src="/fork.svg" width={20} height={20} alt="fork" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
menu_open
|
||||
? "fixed right-0 top-0 w-[65%] sm:hidden h-screen bg-[#18191a] p-10 ease-in duration-300 z-10"
|
||||
: "fixed right-[-100%] top-0 p-10 ease-in duration-500"
|
||||
}
|
||||
>
|
||||
<div className="flex flex-col py-32 w-full items-center justify-center">
|
||||
<ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center">
|
||||
{links.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
|
||||
// replace with classnames object instead
|
||||
onClick={() => set_menu_open(false)}
|
||||
className={classnames({
|
||||
"border-b-2 border-white text-red-700":
|
||||
link.href === currentPath,
|
||||
"text-red-700": link.href !== currentPath,
|
||||
"hover:text-red-700": true,
|
||||
})}
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
<ul className="hover:cursor-pointer flex flex-col gap-8 items-center justify-center py-8">
|
||||
{links2.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
// className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
|
||||
// replace with classnames object instead
|
||||
onClick={() => set_menu_open(false)}
|
||||
className={classnames({
|
||||
"border-b-2 border-white text-red-700":
|
||||
link.href === currentPath,
|
||||
"text-red-700": link.href !== currentPath,
|
||||
"hover:text-red-700": true,
|
||||
})}
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-row justify-around items-center text-red-800">
|
||||
<FaTiktok size={30} className="cursor-pointer" />
|
||||
<AiOutlineInstagram size={30} className="cursor-pointer" />
|
||||
<AiOutlineFacebook size={30} className="cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
],
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
@ -22,6 +22,7 @@ module.exports = {
|
||||
ring: "hsl(var(--ring))",
|
||||
background: "hsl(var(--background))",
|
||||
foreground: "hsl(var(--foreground))",
|
||||
jefesRed: "#B3121E",
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary))",
|
||||
foreground: "hsl(var(--primary-foreground))",
|
||||
@ -73,4 +74,4 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user