navbar
This commit is contained in:
Dex404
parent
f821088271
commit
692d73f97a
2 changed files with 151 additions and 55 deletions
|
|
@ -36,7 +36,7 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
|
|||
"border-solid",
|
||||
"border-2",
|
||||
"border-slate-100",
|
||||
"flex",
|
||||
|
||||
"mx-auto",
|
||||
],
|
||||
hero1: [
|
||||
|
|
@ -67,7 +67,6 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
|
|||
"hover:border-white",
|
||||
"rounded",
|
||||
"flex",
|
||||
,
|
||||
"my-1",
|
||||
"w-[50%]",
|
||||
"max-md:w-full",
|
||||
|
|
@ -77,6 +76,7 @@ const button = cva(["inline-flex", "items-center", "rounded-xl", "text-center",
|
|||
sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
|
||||
lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
|
||||
hero1: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-5", "py-2"],
|
||||
hero2: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-2", "py-0"],
|
||||
},
|
||||
underline: { true: ["underline"], false: [] },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -33,65 +33,161 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
|
|||
transition: "transform .2s", // Optional: Smooth transition
|
||||
}
|
||||
|
||||
const [isNavOpen, setIsNavOpen] = useState(false)
|
||||
|
||||
const mobileNavStyle = {
|
||||
display: isNavOpen ? "block" : "none",
|
||||
}
|
||||
|
||||
const desktopNavStyle = {
|
||||
display: isNavOpen ? "none" : "block",
|
||||
}
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`${
|
||||
showBackground ? "backdrop-blur" : "bg-transparent"
|
||||
} fixed left-0 top-0 z-50 flex h-20 w-full items-center justify-between px-4 text-white`}
|
||||
} fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
|
||||
>
|
||||
<a href="/">
|
||||
<img src={logoSrc} alt="VizoleLabs" className="h-5 text-white" />
|
||||
</a>
|
||||
<ul className="hidden space-x-4 text-lg font-medium md:flex">
|
||||
<li>
|
||||
<a href="/" className="hover:text-vizoleG2">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/services" className="hover:text-vizoleG2">
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/portfolio" className="hover:text-vizoleG2">
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about-us" className="hover:text-vizoleG2">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact-us" className="hover:text-vizoleG2">
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
||||
intent="navSignIn"
|
||||
size="hero1"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
<Button
|
||||
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
||||
intent="navSignUp"
|
||||
size="hero1"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
Sign Up
|
||||
<div className="ml-2">
|
||||
<span>
|
||||
<FaArrowRight style={imgStyle} className="text-white" />
|
||||
</span>
|
||||
<section className="MOBILE-MENU flex hidden" style={mobileNavStyle}>
|
||||
<div>
|
||||
{" "}
|
||||
<div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
|
||||
<button onClick={() => setIsNavOpen(!isNavOpen)}>
|
||||
<svg
|
||||
className="h-8 w-8 text-gray-600"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white backdrop-blur">
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/about">Home</a>
|
||||
</li>
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/portfolio">Services</a>
|
||||
</li>
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/contact">Portfolio</a>
|
||||
</li>
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/contact">About</a>
|
||||
</li>
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/contact">Sign In</a>
|
||||
</li>
|
||||
<li className="my-2 border-b border-gray-400 uppercase">
|
||||
<a href="/contact">Sign Up</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section style={desktopNavStyle}>
|
||||
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4">
|
||||
<a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src={logoSrc} className="h-8" alt="Vizolelabs Logo" />
|
||||
</a>
|
||||
<div className="flex space-x-3 rtl:space-x-reverse md:order-3 md:space-x-0">
|
||||
<li className="hidden md:block">
|
||||
<Button
|
||||
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
||||
intent="navSignIn"
|
||||
size="hero1"
|
||||
>
|
||||
Sign In
|
||||
</Button>
|
||||
</li>
|
||||
<li className="hidden lg:block">
|
||||
<Button
|
||||
href="https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise"
|
||||
intent="navSignUp"
|
||||
size="hero2"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
Sign Up
|
||||
<div className="ml-2">
|
||||
<span>
|
||||
<FaArrowRight style={imgStyle} className="text-white" />
|
||||
</span>
|
||||
</div>
|
||||
</Button>
|
||||
</li>
|
||||
<button
|
||||
onClick={() => setIsNavOpen(!isNavOpen)}
|
||||
data-collapse-toggle="navbar-sticky"
|
||||
type="button"
|
||||
className="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 lg:hidden"
|
||||
aria-controls="navbar-sticky"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
<svg
|
||||
className="h-5 w-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M1 1h15M1 7h15M1 13h15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="hidden w-full items-center justify-between md:order-1 md:flex md:w-auto" id="navbar-sticky">
|
||||
<ul className="mt-4 flex flex-col rounded-lg border border-gray-100 bg-transparent p-4 font-medium rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-transparent md:p-0 md:dark:bg-gray-900">
|
||||
<div className="mt-2 flex flex-col rounded-lg border border-gray-100 bg-transparent font-medium rtl:space-x-reverse dark:border-gray-700 dark:bg-gray-800 md:mt-2 md:flex-row md:space-x-8 md:border-0 md:bg-transparent md:p-0 md:dark:bg-gray-900">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block rounded px-3 py-2 text-white hover:text-vizoleG2 md:p-0"
|
||||
aria-current="page"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
|
||||
>
|
||||
Services
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
|
||||
>
|
||||
Portfolio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="block rounded px-3 py-2 text-white hover:bg-gray-100 hover:text-vizoleG2 dark:border-gray-700 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:p-0 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:bg-transparent md:dark:hover:text-blue-500"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue