746 lines
28 KiB
JavaScript
746 lines
28 KiB
JavaScript
"use client";
|
|
import { wellfoodUtility } from "@/utility";
|
|
import useClickOutside from "@/utility/useClickOutside";
|
|
import Link from "next/link";
|
|
import { Fragment, useEffect, useState } from "react";
|
|
|
|
const Sidebar = () => {
|
|
return (
|
|
<Fragment>
|
|
{/*Form Back Drop*/}
|
|
<div
|
|
className="form-back-drop"
|
|
onClick={() =>
|
|
document
|
|
.querySelector("body")
|
|
.classList.remove("side-content-visible")
|
|
}
|
|
/>
|
|
{/* Hidden Sidebar */}
|
|
<section className="hidden-bar">
|
|
<div className="inner-box text-center">
|
|
<div
|
|
className="cross-icon"
|
|
onClick={() =>
|
|
document
|
|
.querySelector("body")
|
|
.classList.remove("side-content-visible")
|
|
}
|
|
>
|
|
<span className="fa fa-times" />
|
|
</div>
|
|
<div className="title">
|
|
<h4>Get Appointment</h4>
|
|
</div>
|
|
{/*Appointment Form*/}
|
|
<div className="appointment-form">
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
document
|
|
.querySelector("body")
|
|
.classList.remove("side-content-visible");
|
|
}}
|
|
>
|
|
<div className="form-group">
|
|
<input
|
|
type="text"
|
|
name="text"
|
|
defaultValue=""
|
|
placeholder="Name"
|
|
required=""
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
defaultValue=""
|
|
placeholder="Email Address"
|
|
required=""
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<textarea placeholder="Message" rows={5} defaultValue={""} />
|
|
</div>
|
|
<div className="form-group">
|
|
<button type="submit" className="theme-btn style-two">
|
|
Submit now
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{/*Social Icons*/}
|
|
<div className="social-style-one">
|
|
<Link href="https://www.facebook.com/shivasdosa/">
|
|
<i className="fab fa-facebook-f" />
|
|
</Link>
|
|
<Link href="#">
|
|
<i className="fab fa-twitter" />
|
|
</Link>
|
|
<Link href="#">
|
|
<i className="fab fa-linkedin-in" />
|
|
</Link>
|
|
<Link href="https://www.instagram.com/shivasdosa/">
|
|
<i className="fab fa-instagram" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/*End Hidden Sidebar */}
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const SearchBtn = () => {
|
|
const [toggleSearch, setToggleSearch] = useState(false);
|
|
|
|
let domNode = useClickOutside(() => {
|
|
setToggleSearch(false);
|
|
});
|
|
return (
|
|
<div className="nav-search py-10" ref={domNode}>
|
|
<button
|
|
className="far fa-search"
|
|
onClick={() => setToggleSearch(!toggleSearch)}
|
|
/>
|
|
<form
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
setToggleSearch(false);
|
|
}}
|
|
className={toggleSearch ? "" : "hide"}
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="searchbox"
|
|
required=""
|
|
/>
|
|
<button type="submit" className="searchbutton far fa-search" />
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const MobileMenu = () => {
|
|
const [toggle, setToggle] = useState(false);
|
|
const [activeMenu, setActiveMenu] = useState("");
|
|
const activeMenuSet = (value) =>
|
|
setActiveMenu(activeMenu === value ? "" : value),
|
|
activeLi = (value) =>
|
|
value === activeMenu ? { display: "block" } : { display: "none" };
|
|
return (
|
|
<Fragment>
|
|
<header className="main-header white-menu menu-absolute d-block d-xl-none">
|
|
{/*Header-Upper*/}
|
|
<div className="header-upper">
|
|
<div className="container-fluid clearfix">
|
|
<div className="header-inner rel d-flex align-items-center justify-content-between">
|
|
<div className="logo-outer">
|
|
<div className="logo">
|
|
<Link href="/">
|
|
<img
|
|
src="/assets/images/logo.webp"
|
|
alt="Logo"
|
|
title="Logo"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="nav-outer ms-lg-5 ps-xxl-4 clearfix">
|
|
{/* Main Menu */}
|
|
<nav className="main-menu navbar-expand-lg">
|
|
<div className="navbar-header py-10">
|
|
<div className="mobile-logo">
|
|
<Link href="/">
|
|
<img
|
|
src="/assets/images/logo.webp"
|
|
alt="Logo"
|
|
title="Logo"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
{/* Toggle Button */}
|
|
<button
|
|
type="button"
|
|
className="navbar-toggle"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target=".navbar-collapse"
|
|
onClick={() => setToggle(!toggle)}
|
|
>
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
</button>
|
|
</div>
|
|
<div
|
|
className={`navbar-collapse collapse clearfix ${toggle ? "show" : ""
|
|
}`}
|
|
>
|
|
<ul className="navigation clearfix ">
|
|
{/* <li className="dropdown">
|
|
<a href="#">Home</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="/">Home Restauran</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index2">Home Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index3">Home Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index4">Home Chiken</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index5">Juice & Drinks</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index6">Home Grill</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
|
|
<li>
|
|
<Link href="/">Home</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/about">About Us</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/menu">Food Menu</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/blog">Blog</Link>
|
|
</li>
|
|
|
|
{/* <li className="dropdown">
|
|
<a href="#">Menu</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="menu-restaurant">Menu Restaurant</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-pizza">Menu Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-grill">Menu Gril</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-burger">Menu Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-sea-food">Menu Sea Food</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-chicken">Menu Chicken</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">pages</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="about">About Us</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="history">Our History</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="faq">faqs</Link>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">chefs</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="chefs">Our chefs</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="chef-details">chef Details</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<Link href="gallery">Gallery</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">blog</a>
|
|
<ul style={activeLi("blog")}>
|
|
<li>
|
|
<Link href="blog">blog standard</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="blog-details">blog details</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("blog")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">shop</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="shop">Products</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="product-details">Product Details</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="cart">Shopping Cart</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="checkout">Checkout Page</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
<li>
|
|
<Link href="/contact">Contact</Link>
|
|
</li>
|
|
</ul>
|
|
{/* <ul className="navigation clearfix">
|
|
<li className="dropdown" style={activeLi("home")}>
|
|
<a href="#">Home</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="/">Home Restauran</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index2">Home Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index3">Home Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index4">Home Chiken</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index5">Juice & Drinks</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index6">Home Grill</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("home")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">Menu</a>
|
|
<ul style={activeLi("Menu")}>
|
|
<li>
|
|
<Link href="menu-restaurant">Menu Restaurant</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-pizza">Menu Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-grill">Menu Gril</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-burger">Menu Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-sea-food">Menu Sea Food</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-chicken">Menu Chicken</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("Menu")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">pages</a>
|
|
<ul style={activeLi("pages")}>
|
|
<li>
|
|
<Link href="about">About Us</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="history">Our History</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="faq">faqs</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="chefs">Our chefs</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="chef-details">chef Details</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="gallery">Gallery</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("pages")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">blog</a>
|
|
<ul style={activeLi("blog")}>
|
|
<li>
|
|
<Link href="blog">blog standard</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="blog-details">blog details</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("blog")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">shop</a>
|
|
<ul style={activeLi("shop")}>
|
|
<li>
|
|
<Link href="shop">Products</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="product-details">Product Details</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="product-details">Product Details</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="cart">Shopping Cart</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="checkout">Checkout Page</Link>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
className="dropdown-btn"
|
|
onClick={() => activeMenuSet("shop")}
|
|
>
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<Link href="contact">Contact</Link>
|
|
</li>
|
|
</ul> */}
|
|
</div>
|
|
</nav>
|
|
{/* Main Menu End*/}
|
|
</div>
|
|
{/* <div className="header-number">
|
|
<i className="far fa-phone" />
|
|
Call : <a href="callto:+88012345688">+880 123 456 88</a>
|
|
</div>
|
|
<SearchBtn />
|
|
<div className="menu-btns">
|
|
<button>
|
|
<i className="far fa-shopping-cart" /> <span>2</span>
|
|
</button>
|
|
<Link href="contact" className="theme-btn">
|
|
Book now <i className="far fa-arrow-alt-right" />
|
|
</Link>
|
|
<div className="menu-sidebar">
|
|
<button
|
|
className="bg-transparent"
|
|
onClick={() =>
|
|
document
|
|
.querySelector("body")
|
|
.classList.add("side-content-visible")
|
|
}
|
|
/>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
<div className="bg-lines">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</div>
|
|
</div>
|
|
{/*End Header Upper*/}
|
|
</header>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const Header = () => {
|
|
useEffect(() => {
|
|
wellfoodUtility.fixedHeader();
|
|
}, []);
|
|
|
|
return (
|
|
<Fragment>
|
|
<header className="main-header white-menu menu-absolute d-none d-xl-block">
|
|
{/*Header-Upper*/}
|
|
<div className="header-upper">
|
|
<div className="container clearfix">
|
|
<div className="header-inner rel d-flex align-items-center justify-content-between">
|
|
<div className="logo-outer">
|
|
<div className="logo">
|
|
<Link href="/">
|
|
<img
|
|
src="/assets/images/logo.webp"
|
|
alt="Logo"
|
|
title="Logo"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="nav-outer ms-lg-5 ps-xxl-4 clearfix">
|
|
{/* Main Menu */}
|
|
<nav className="main-menu navbar-expand-lg">
|
|
<div className="navbar-header py-10">
|
|
<div className="mobile-logo">
|
|
<Link href="/">
|
|
<img
|
|
src="/assets/images/logo.webp"
|
|
alt="Logo"
|
|
title="Logo"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
{/* Toggle Button */}
|
|
<button
|
|
type="button"
|
|
className="navbar-toggle"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target=".navbar-collapse"
|
|
>
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
<span className="icon-bar" />
|
|
</button>
|
|
</div>
|
|
<div className="navbar-collapse collapse clearfix">
|
|
<ul className="navigation clearfix ">
|
|
{/* <li className="dropdown">
|
|
<a href="#">Home</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="/">Home Restauran</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index2">Home Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index3">Home Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index4">Home Chiken</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index5">Juice & Drinks</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="index6">Home Grill</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
|
|
<li>
|
|
<Link href="/">Home</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/about">About Us</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/menu">Food Menu</Link>
|
|
</li>
|
|
|
|
<li>
|
|
<Link href="/blog">Blog</Link>
|
|
</li>
|
|
|
|
{/* <li className="dropdown">
|
|
<a href="#">Menu</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="menu-restaurant">Menu Restaurant</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-pizza">Menu Pizza</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-grill">Menu Gril</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-burger">Menu Burger</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-sea-food">Menu Sea Food</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="menu-chicken">Menu Chicken</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">pages</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="about">About Us</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="history">Our History</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="faq">faqs</Link>
|
|
</li>
|
|
<li className="dropdown">
|
|
<a href="#">chefs</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="chefs">Our chefs</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="chef-details">chef Details</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<Link href="gallery">Gallery</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">blog</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="blog">blog standard</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="blog-details">blog details</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
{/* <li className="dropdown">
|
|
<a href="#">shop</a>
|
|
<ul>
|
|
<li>
|
|
<Link href="shop">Products</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="product-details">Product Details</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="cart">Shopping Cart</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="checkout">Checkout Page</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="dropdown-btn">
|
|
<span className="far fa-angle-down" />
|
|
</div>
|
|
</li> */}
|
|
<li>
|
|
<Link href="/contact">Contact</Link>
|
|
</li>
|
|
</ul>
|
|
<div className="menu-btns" style={{ paddingLeft: "30px" }}>
|
|
<Link href="/contact" className="theme-btn">
|
|
Book now <i className="far fa-arrow-alt-right" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{/* Main Menu End*/}
|
|
</div>
|
|
{/* <div className="header-number">
|
|
<i className="far fa-phone" />
|
|
Call : <a href="callto:+88012345688">+880 123 456 88</a>
|
|
</div> */}
|
|
{/* Nav Search */}
|
|
{/* <SearchBtn /> */}
|
|
{/* Menu Button */}
|
|
{/* <div className="menu-btns">
|
|
<button>
|
|
<i className="far fa-shopping-cart" /> <span>2</span>
|
|
</button>
|
|
<Link href="contact" className="theme-btn">
|
|
Book now <i className="far fa-arrow-alt-right" />
|
|
</Link>
|
|
|
|
<div className="menu-sidebar">
|
|
<button
|
|
className="bg-transparent"
|
|
onClick={() =>
|
|
document
|
|
.querySelector("body")
|
|
.classList.add("side-content-visible")
|
|
}
|
|
/>
|
|
</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
<div className="bg-lines">
|
|
<span />
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</div>
|
|
</div>
|
|
{/*End Header Upper*/}
|
|
</header>
|
|
<MobileMenu />
|
|
{/* <Sidebar /> */}
|
|
</Fragment>
|
|
);
|
|
};
|
|
export default Header;
|