@smitch/fluid/lib/navbar/NavLinks.js

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo } from 'react';
import Link from 'next/link';
import { twMerge } from 'tailwind-merge';
import { Button } from '..';
var placements = {
    top: 'top-full',
    bottom: 'bottom-full',
};
var NavLinks = function (_a) {
    var links = _a.links, _b = _a.linkStyles, linkStyles = _b === void 0 ? 'lg:text-dark dark:lg:text-light' : _b, btnBackground = _a.btnBackground, _c = _a.btnColor, btnColor = _c === void 0 ? 'light' : _c, _d = _a.btnLayout, btnLayout = _d === void 0 ? 'square' : _d, _e = _a.btnSize, btnSize = _e === void 0 ? 'md' : _e, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, onLinkClick = _a.onLinkClick, _g = _a.prefetch, prefetch = _g === void 0 ? false : _g;
    var _h = useState(false), isMobileMenuOpen = _h[0], setIsMobileMenuOpen = _h[1];
    var placementClasses = useMemo(function () { return placements[placement]; }, [placement]);
    var onblur = function () {
        setTimeout(function () {
            setIsMobileMenuOpen(false);
        }, 100);
    };
    return (_jsxs("div", { children: [_jsx(Button, { btnBackground: btnBackground, btnColor: btnColor, size: btnSize, layout: btnLayout, title: 'Menu', className: 'lg:hidden focus:outline-none', onClick: function () { return setIsMobileMenuOpen(function (prev) { return !prev; }); }, onBlur: function () { return onblur(); }, suppressHydrationWarning: true, children: _jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', className: 'w-[1em] h-[1em]', children: _jsx("path", { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2', d: isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16' }) }) }), _jsx("div", { className: twMerge('menu flex gap-4 lg:flex-row lg:static lg:top-auto lg:bg-transparent lg:w-auto lg:h-auto', isMobileMenuOpen
                    ? "absolute ".concat(placementClasses, " left-0 dark:bg-slate-200 bg-slate-600 w-full flex-col h-auto py-4")
                    : 'hidden lg:flex'), children: links.map(function (link) { return (_jsx(Link, { href: link.href, prefetch: prefetch, className: twMerge('navbar-link px-4 py-0 lg:px-2 lg:py-0 lg:text-xl text-light dark:text-dark', linkStyles), onClick: function () {
                        setIsMobileMenuOpen(false);
                        onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(link.name);
                    }, children: link.name }, link.name)); }) })] }));
};
export default NavLinks;
//# sourceMappingURL=NavLinks.js.map