hh-ui-components
Version:
45 lines • 6.9 kB
JavaScript
import React, { useState } from "react";
import { icons } from "../../icons/icons";
import DrawerCollapse from "./DrawerCollapse";
export var Drawer = function (_a) {
var _b;
var open = _a.open, setDrawer = _a.setDrawer, lineItemsCount = _a.lineItemsCount, Menu = _a.Menu, token = _a.token, WishlistTitle = _a.WishlistTitle, LoggedInName = _a.LoggedInName, LoginTitle = _a.LoginTitle, onClick = _a.onClick;
var _c = useState(false), state = _c[0], setState = _c[1];
var _d = useState(0), index = _d[0], setIndex = _d[1];
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: "w-full h-full lg:hidden bg-primary fixed inset-y-0 z-50 right-0 transition-[0.3s] ".concat(open ? "translate-x-0" : "translate-x-full") },
React.createElement("div", { className: "h-[4rem] md:h-[8.333vw] items-center px-20 md:px-20-md grid grid-cols-3" },
React.createElement("nav", { className: "flex w-full items-center" },
React.createElement("button", { onClick: function () { return setDrawer(false); }, className: "flex rounded-full outline-none hover:bg-black/10", "aria-label": "Close button" },
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-[1.125rem] w-[1.125rem] md:h-[2.344vw] md:w-[2.344vw] lg:h-[1.125rem] lg:w-[1.125rem] 2xl:h-[1.250vw] 2xl:w-[1.250vw]", width: "100%", height: "100%", viewBox: "0 0 25 24", fill: "none", role: "img" }, icons.close))),
React.createElement("div", { className: "aa flex h-full justify-center items-center" },
React.createElement("a", { className: "block", "aria-label": "Logo", role: "img", onClick: onClick },
React.createElement("div", null, " Mobile Logo here Gobi"))),
React.createElement("div", { className: "qq flex justify-end items-center h-full " },
React.createElement("button", { onClick: onClick, className: " m-[0.5rem] md:m-[1.042vw]", "aria-label": "Search button" },
React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "cursor-pointer w-[1.5rem] h-[1.5rem] md:w-[3.125vw] md:h-[3.125vw]", width: "24", height: "24", viewBox: "0 0 25 24", fill: "none", role: "img" }, icons.search)),
React.createElement("label", { className: "rr relative py-[8px] md:py-[0.938vw] block cursor-pointer lg:hidden", "aria-label": "Bag Button" },
React.createElement("svg", { className: "h-[1.125rem] w-[1.125rem] md:h-[2.344vw] md:w-[2.344vw] 2xl:h-[1.250vw] 2xl:w-[1.250vw]", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 17 18", fill: "none", role: "img" }, icons.bag),
lineItemsCount > 0 ? (React.createElement("span", { className: "absolute top-0 right-0 w-[18px] h-[18px] bg-quaternary text-body-text rounded-full text-graphite flex items-center justify-center" }, "".concat(lineItemsCount > 0 ? lineItemsCount : 0))) : null))),
React.createElement("div", { className: "h-full overflow-y-scroll " }, state === false ? (React.createElement("ul", { className: "pb-[1.5rem] md:pb-[3.125vw]" },
Menu.map(function (menu, index) { return (React.createElement("li", { className: "flex cursor-pointer items-center justify-between rounded-xl py-[0.938rem] md:py-[1.953vw] md:px-[2.604vw] px-20 md:text[3.125vw] text-[1.5rem] text-graphite font-normal transition-colors duration-150 ", key: index, onClick: function () {
return menu.NavDropdownItems || menu.subMenu
? (setState(true), setIndex(index))
: setDrawer(false);
} }, menu.NavDropdownItems || menu.subMenu ? (React.createElement(React.Fragment, null,
React.createElement("a", { className: " text-[24px] leading-[120%] font-normal text-lnk" }, menu.NavItemLabel),
React.createElement("svg", { className: "w-[0.875rem] h-[0.875rem] md:w-[1.823vw] md:h-[1.823vw]", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 8 15", fill: "none", role: "img", "aria-label": "Right Arrow" }, icons.arrowRight))) : (React.createElement("a", { className: " text-[24px] leading-[120%] font-normal text-lnk", onClick: onClick }, menu.NavItemLabel)))); }),
React.createElement("li", { className: " rounded-xl " }, token ? (React.createElement("a", { className: "flex cursor-pointer items-center justify-between text-[0.875rem] py-[0.875rem] md:py-[1.823vw] px-20 md:px-[2.604vw] md:text-[1.823vw] text-graphite font-normal transition-colors duration-150", onClick: onClick }, LoggedInName)) : (React.createElement("a", { className: "flex cursor-pointer items-center justify-between text-[0.875rem] py-[0.875rem] md:py-[1.823vw] px-20 md:px-[2.604vw] md:text-[1.823vw] text-graphite font-normal transition-colors duration-150", onClick: onClick }, LoginTitle))),
React.createElement("li", { className: " rounded-xl " },
React.createElement("a", { className: "flex cursor-pointer items-center justify-between text-[0.875rem] py-[0.875rem] md:py-[1.823vw] px-20 md:px-[2.604vw] md:text-[1.823vw] text-graphite font-normal transition-colors duration-150", onClick: onClick }, WishlistTitle)))) : (React.createElement(React.Fragment, null,
React.createElement("div", { className: "fixed mt-[-1px] bg-primary w-full flex pl-20 md:pl-[2.604vw] pr-[2.125rem] md:pr-[4.427vw] py-[0.938rem] md:py-[1.953vw]" },
React.createElement("button", { onClick: function () { return setState(false); }, className: "flex items-center py-[0.875rem] md:py-[1.823vw] text-left ", "aria-label": "Back Button" },
React.createElement("svg", { className: "w-[0.875rem] h-[0.875rem] md:w-[1.823vw] md:h-[1.823vw]", xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 8 15", fill: "none",
// aria-labelledby="ArrowBackIcon"
role: "img" }, icons.arrow)),
React.createElement("a", { className: "text-[1.5rem] md:text-[3.125vw] mx-auto px-[2.125rem] md:px-[4.427vw] text-center items-center font-normal text-graphite not-italic" }, Menu[index].NavItemLabel)),
React.createElement("div", { className: "overflow-y-scroll h-full mt-[75px] pb-[6.5rem] md:pb-[14.125vw] " }, (_b = Menu[index].NavDropdownItems) === null || _b === void 0 ? void 0 : _b.map(function (column, index) { return (React.createElement(React.Fragment, { key: index },
React.createElement(DrawerCollapse, { columnItem: column, key: index, onClick: onClick }))); }))))))));
};
export default Drawer;
//# sourceMappingURL=Drawer.js.map