fixed nav and scrolling nav
This commit is contained in:
ImAlpha
parent
e9ba7d0639
commit
8772332b85
@ -9,7 +9,7 @@
|
||||
}
|
||||
|
||||
.active {
|
||||
background: green;
|
||||
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -12,6 +12,9 @@ import { FaTiktok } from "react-icons/fa";
|
||||
import { RiCellphoneLine } from "react-icons/ri";
|
||||
import { FaPhone } from "react-icons/fa6";
|
||||
import StoreHours from "../StoreHours/StoreHours";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { IoLocationSharp } from "react-icons/io5";
|
||||
import { IoIosMail } from "react-icons/io";
|
||||
|
||||
const NavBar = () => {
|
||||
const currentPath = usePathname();
|
||||
@ -28,6 +31,8 @@ const NavBar = () => {
|
||||
{ label: "HOME", href: "/" },
|
||||
{ label: "MENU", href: "/menu" },
|
||||
{ label: "GALLERY", href: "/gallery" },
|
||||
{ label: "ABOUT", href: "/about-us" },
|
||||
{ label: "CONTACT", href: "/contact" },
|
||||
];
|
||||
// Create an array to hold the list items
|
||||
const links2 = [
|
||||
@ -41,7 +46,7 @@ const NavBar = () => {
|
||||
|
||||
const changeBackground = () => {
|
||||
// console.log(window.scrollY);
|
||||
if (window.scrollY >= 70) {
|
||||
if (window.scrollY >= 120) {
|
||||
setNavbar(true);
|
||||
} else {
|
||||
setNavbar(false);
|
||||
@ -58,31 +63,105 @@ const NavBar = () => {
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "flex fixed top-0 items-center bg-black justify-center xl:p-1 mx-auto md:p-4 z-10 w-full h-[60px]"
|
||||
: "flex items-center justify-center xl:p-1 bg-transparent mx-auto md:p-4 absolute z-10 w-full h-[120px]"
|
||||
? "flex fixed top-0 items-center bg-zinc-800 justify-center xl:p-1 mx-auto md:p-4 z-10 w-full h-[70px]"
|
||||
: "flex flex-col bg-transparent mx-auto absolute z-10 w-full h-[220px]"
|
||||
}
|
||||
>
|
||||
{/* Top Bar */}
|
||||
<div
|
||||
className={
|
||||
navbar ? "hidden" : "w-full text-white flex flex-col h-[7svh]"
|
||||
}
|
||||
>
|
||||
<div className="flex flex-row h-full">
|
||||
{/* left side */}
|
||||
<div className="flex w-1/2 gap-6 relative left-20">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<div className="text-xl brightness-90">
|
||||
<IoLocationSharp />
|
||||
</div>
|
||||
<span className="brightness-90 font-sans text-sm">
|
||||
24188 E Hwy 51, Broken Arrow, OK 74014
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center">
|
||||
<StoreHours />
|
||||
</div>
|
||||
</div>
|
||||
{/* right side */}
|
||||
<div className="flex w-1/2 relative right-20 justify-end gap-6">
|
||||
<div className="flex items-center gap-1">
|
||||
<div>
|
||||
<FaPhone />
|
||||
</div>
|
||||
<div className="text-sm brightness-90">
|
||||
<a href="tel:9188880844">(918)-888-0844</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="text-xl">
|
||||
<IoIosMail />
|
||||
</div>
|
||||
<div className="text-sm brightness-90">
|
||||
<a href="mailto:jefesmexicanba@gmail.com">
|
||||
jefesmexicanba@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full h-[1px] bg-white brightness-50"></div>
|
||||
</div>
|
||||
|
||||
{/* Phone Number */}
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute"
|
||||
? "hover:cursor-pointer hidden md:block xl:text-xl font-sans antialiased z-90 text-white left-10 absolute "
|
||||
: "hidden"
|
||||
}
|
||||
>
|
||||
<div className="flex flex-row items-center justify-center gap-4">
|
||||
<div className="flex items-center justify-center space-x-1.5">
|
||||
<FaPhone />
|
||||
<span>(918) 888-0844</span>
|
||||
</div>
|
||||
<StoreHours />
|
||||
<div className="flex items-center justify-center gap-1 font-sans">
|
||||
<FaPhone />
|
||||
<span className="text-base brightness-95">
|
||||
<a href="tel:9188880844">(918)-888-0844</a>
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-base">
|
||||
<StoreHours />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* logo */}
|
||||
<Link href="/" className="absolute left-32 pt-20">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "40%", height: "auto" }}
|
||||
alt="Logo"
|
||||
className={navbar ? "hidden" : "hidden xl:block logo brightness-75"}
|
||||
/>
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="50vw"
|
||||
style={{ width: "50%", height: "auto" }}
|
||||
alt="Logo"
|
||||
className="block md:hidden"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Pages */}
|
||||
<ul
|
||||
className={
|
||||
navbar
|
||||
? "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 z-90"
|
||||
: "hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased ml-8 pr-4"
|
||||
? "hover:cursor-pointer hidden md:flex space-x-4 xl:text-xl font-sans antialiased z-90 w-full absolute justify-center items-center brightness-95 font-sans"
|
||||
: "hover:cursor-pointer hidden relative md:flex gap-4 xl:text-xl font-sans antialiased w-full justify-center items-center text-center brightness-90 h-[18svh]"
|
||||
}
|
||||
>
|
||||
{links.map((link) => (
|
||||
@ -102,50 +181,24 @@ const NavBar = () => {
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
{/* logo */}
|
||||
<Link href="/" className="relative justify-center items-center">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
style={{ width: "40%", height: "auto" }}
|
||||
alt="Logo"
|
||||
className={navbar ? "hidden" : "hidden xl:block logo"}
|
||||
/>
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="50vw"
|
||||
style={{ width: "50%", height: "auto" }}
|
||||
alt="Logo"
|
||||
className="block md:hidden"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<ul className="hover:cursor-pointer hidden md:block space-x-4 xl:text-xl font-sans antialiased md:pl-3">
|
||||
{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
|
||||
className={classnames({
|
||||
"border-b-2 border-red-800 text-white":
|
||||
link.href === currentPath,
|
||||
"text-white": link.href !== currentPath,
|
||||
"hover:text-red-800": true,
|
||||
})}
|
||||
href={link.href}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Reservation button */}
|
||||
<div className="right-2 hidden md:block absolute overflow-hidden">
|
||||
<Reserve />
|
||||
<div
|
||||
className={
|
||||
navbar
|
||||
? "flex absolute top-0 items-center justify-end xl:p-1 mx-auto md:p-4 z-10 w-full h-[70px]"
|
||||
: "absolute hidden md:flex flex-wrap gap-1 w-full justify-end top-32"
|
||||
}
|
||||
>
|
||||
<div className="flex sticky right-2 gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs"
|
||||
>
|
||||
RESERVE NOW
|
||||
</Button>
|
||||
<Reserve />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -7,11 +7,11 @@ const Reserve = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="right-2 hidden md:block">
|
||||
<Button size='sm' className="xl:text-lg bg-red-800 hover:bg-slate-600 text-xs">
|
||||
<Button size='sm' className="xl:text-lg bg-red-800 hover:bg-slate-800 text-xs">
|
||||
<span className="flex flex-row">
|
||||
<span className="flex flex-row">ORDER ONLINE</span>
|
||||
</span>
|
||||
<Image
|
||||
{/* <Image
|
||||
src="/fork.svg"
|
||||
width={30}
|
||||
height={30}
|
||||
@ -24,7 +24,7 @@ const Reserve = () => {
|
||||
height={20}
|
||||
alt="fork"
|
||||
className="pl-2 xl:hidden block"
|
||||
/>
|
||||
/> */}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { getDay } from "date-fns";
|
||||
import React from "react";
|
||||
import { FaRegClock } from "react-icons/fa";
|
||||
import { FaClock } from "react-icons/fa6";
|
||||
|
||||
const StoreHours = () => {
|
||||
var week = [
|
||||
@ -38,11 +38,14 @@ const StoreHours = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row gap-1 items-center justify-center">
|
||||
<div className="flex">
|
||||
<FaRegClock />
|
||||
<div className="flex flex-row gap-2 items-center justify-center">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<FaClock />
|
||||
<span className="brightness-90 antialiased font-sans text-sm">
|
||||
Today
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex">{hours}</div>
|
||||
<div className="flex brightness-90 font-sans">{hours}</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -6,8 +6,8 @@ const MenuButton = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="right-2 hidden md:block">
|
||||
<Button className="xl:text-lg bg-zinc-900 hover:bg-slate-600">
|
||||
<span className="flex flex-row px-7">
|
||||
<Button size="sm" className="xl:text-lg bg-zinc-900 hover:bg-slate-600">
|
||||
<span className="flex flex-row px-3">
|
||||
<span className="flex flex-row">VIEW MENU</span>
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
@ -21,6 +21,7 @@ const buttonVariants = cva(
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
xs: "h-9 rounded-md px-1",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user