top-overlay-navbar
Version:
This is a modern, customizable overlay navbar built with React and Framer Motion.
55 lines • 5.21 kB
JavaScript
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { FaTimes, FaShoppingCart } from "react-icons/fa";
import { FaBarsStaggered } from "react-icons/fa6";
import { Link } from "react-router-dom";
var OverlayNavbar = function (_a) {
var _b = _a.brandName, brandName = _b === void 0 ? "BrandName" : _b, _c = _a.menuLinks, menuLinks = _c === void 0 ? [] : _c, _d = _a.cartCount, cartCount = _d === void 0 ? 3 : _d, _e = _a.CartButton, CartButton = _e === void 0 ? function (_a) {
var cartCount = _a.cartCount;
return (React.createElement("div", { className: "relative text-2xl cursor-pointer hover:text-gray-500 transition-all", "aria-label": "Cart with ".concat(cartCount, " items") },
React.createElement(FaShoppingCart, null),
cartCount > 0 && (React.createElement("span", { className: "absolute -top-2 -right-2 bg-red-600 text-white text-sm w-5 h-5 flex items-center justify-center rounded-full" }, cartCount))));
} : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "#1F2937" : _f, _g = _a.onMenuItemClick, onMenuItemClick = _g === void 0 ? function () { } : _g, _h = _a.sliceVariants, sliceVariants = _h === void 0 ? {
hidden: { x: "-100%" },
visible: function (i) { return ({
x: 0,
transition: { duration: 0.6, delay: i * 0.1, ease: "easeOut" },
}); },
exit: { x: "-100%", transition: { duration: 0.5, ease: "easeIn" } },
} : _h, _j = _a.contentVariants, contentVariants = _j === void 0 ? {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0, transition: { delay: 0.5, ease: "easeOut" } },
exit: { opacity: 0, y: 20, transition: { duration: 0.3 } },
} : _j, _k = _a.toggleButtonClassName, toggleButtonClassName = _k === void 0 ? "text-xl p-3 text-white bg-[#1F2937] hover:text-gray-300 focus:outline-none rounded-full fixed top-6 left-6 z-50 transition-all" : _k, _l = _a.menuContainerClassName, menuContainerClassName = _l === void 0 ? "absolute inset-0 flex flex-col sm:flex-row items-center justify-center sm:justify-between px-8 py-6 text-white text-lg" : _l, _m = _a.menuItemClassName, menuItemClassName = _m === void 0 ? "cursor-pointer hover:text-gray-400 transition-all" : _m, _o = _a.cartButtonClassName, cartButtonClassName = _o === void 0 ? "relative p-10 cursor-pointer" : _o;
var _p = useState(false), isOpen = _p[0], setIsOpen = _p[1];
var toggleNavbar = function () { return setIsOpen(!isOpen); };
return (React.createElement("div", { className: "relative" },
React.createElement("button", { onClick: toggleNavbar, "aria-expanded": isOpen, "aria-controls": "overlay-menu", className: toggleButtonClassName }, isOpen ? React.createElement(FaTimes, null) : React.createElement(FaBarsStaggered, null)),
React.createElement(AnimatePresence, null, isOpen && (React.createElement(motion.div, { className: "fixed inset-0 z-40", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: 0.3 } } },
__spreadArray([], Array(menuLinks.length), true).map(function (_, i) { return (React.createElement(motion.div, { key: i, custom: i, initial: "hidden", animate: "visible", exit: "exit", variants: sliceVariants, className: "absolute w-full", style: {
height: "".concat(100 / menuLinks.length, "%"),
top: "".concat((100 / menuLinks.length) * i, "%"),
backgroundColor: backgroundColor,
} })); }),
React.createElement(motion.div, { initial: "hidden", animate: "visible", exit: "exit", variants: contentVariants, className: menuContainerClassName },
React.createElement(motion.div, { variants: contentVariants, className: "text-3xl font-semibold cursor-pointer hover:text-gray-400 transition-all" },
React.createElement(Link, { to: "/", onClick: toggleNavbar }, brandName)),
React.createElement(motion.ul, { className: "flex flex-col sm:flex-row items-center space-x-0 sm:space-x-8 sm:space-y-0 space-y-4 sm:ml-0 ml-4", variants: contentVariants }, menuLinks.map(function (link, index) { return (React.createElement(motion.li, { key: index, whileHover: { scale: 1.1 }, className: menuItemClassName, onClick: function () {
onMenuItemClick(link.label);
toggleNavbar();
} },
React.createElement(Link, { to: link.route }, link.label))); })),
React.createElement(motion.div, { variants: contentVariants, className: cartButtonClassName },
React.createElement(CartButton, { cartCount: cartCount }))))))));
};
export default OverlayNavbar;
//# sourceMappingURL=TopOverlayNavbar.js.map