hh-ui-components
Version:
50 lines • 7.66 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.Drawer = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("../../icons/icons");
var DrawerCollapse_1 = tslib_1.__importDefault(require("./DrawerCollapse"));
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 = (0, react_1.useState)(false), state = _c[0], setState = _c[1];
var _d = (0, react_1.useState)(0), index = _d[0], setIndex = _d[1];
return (react_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].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_1["default"].createElement("div", { className: "h-[4rem] md:h-[8.333vw] items-center px-20 md:px-20-md grid grid-cols-3" },
react_1["default"].createElement("nav", { className: "flex w-full items-center" },
react_1["default"].createElement("button", { onClick: function () { return setDrawer(false); }, className: "flex rounded-full outline-none hover:bg-black/10", "aria-label": "Close button" },
react_1["default"].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_1.icons.close))),
react_1["default"].createElement("div", { className: "aa flex h-full justify-center items-center" },
react_1["default"].createElement("a", { className: "block", "aria-label": "Logo", role: "img", onClick: onClick },
react_1["default"].createElement("div", null, " Mobile Logo here Gobi"))),
react_1["default"].createElement("div", { className: "qq flex justify-end items-center h-full " },
react_1["default"].createElement("button", { onClick: onClick, className: " m-[0.5rem] md:m-[1.042vw]", "aria-label": "Search button" },
react_1["default"].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_1.icons.search)),
react_1["default"].createElement("label", { className: "rr relative py-[8px] md:py-[0.938vw] block cursor-pointer lg:hidden", "aria-label": "Bag Button" },
react_1["default"].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_1.icons.bag),
lineItemsCount > 0 ? (react_1["default"].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_1["default"].createElement("div", { className: "h-full overflow-y-scroll " }, state === false ? (react_1["default"].createElement("ul", { className: "pb-[1.5rem] md:pb-[3.125vw]" },
Menu.map(function (menu, index) { return (react_1["default"].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_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].createElement("a", { className: " text-[24px] leading-[120%] font-normal text-lnk" }, menu.NavItemLabel),
react_1["default"].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_1.icons.arrowRight))) : (react_1["default"].createElement("a", { className: " text-[24px] leading-[120%] font-normal text-lnk", onClick: onClick }, menu.NavItemLabel)))); }),
react_1["default"].createElement("li", { className: " rounded-xl " }, token ? (react_1["default"].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_1["default"].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_1["default"].createElement("li", { className: " rounded-xl " },
react_1["default"].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_1["default"].createElement(react_1["default"].Fragment, null,
react_1["default"].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_1["default"].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_1["default"].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_1.icons.arrow)),
react_1["default"].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_1["default"].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_1["default"].createElement(react_1["default"].Fragment, { key: index },
react_1["default"].createElement(DrawerCollapse_1["default"], { columnItem: column, key: index, onClick: onClick }))); }))))))));
};
exports.Drawer = Drawer;
exports["default"] = exports.Drawer;
//# sourceMappingURL=Drawer.js.map