retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 2.26 kB
JavaScript
"use strict";var a=require("../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),r=require("react"),n=require("../../utils/classNames.js"),i=require("../../constants/commonClassNames.js"),s=require("./Navbar.styled.js");const t=r.forwardRef(((t,l)=>{var{variant:o="default",children:d,className:v,id:m}=t,N=a.__rest(t,["variant","children","className","id"]);const[u,b]=r.useState(!1),j=()=>{b(!u)},h=r.Children.toArray(d).find((a=>a.type===c)),p=r.Children.toArray(d).filter((a=>a.type!==c));return e.jsxs(s.NavbarContainer,Object.assign({$variant:o,ref:l,id:m,className:n.classNames("navbar-root",v,i.default)},N,{children:[h,p.length>0&&e.jsx(s.HamburgerMenu,{onClick:j,className:"navbar-hamburger",$open:u,$variant:o,"aria-controls":"navbar-menu","aria-expanded":u},void 0),e.jsx(s.NavbarItemsContainer,Object.assign({$variant:o,$open:u,className:"navbar-items",id:"navbar-menu",role:"menu"},{children:r.Children.map(p,((a,n)=>e.jsx(s.NavbarItemWrapper,{children:r.cloneElement(a,{_internalVariant:o,_internalOnClick:j})},`navbar-item-${n}`)))}),void 0)]}),void 0)}));t.displayName="Navbar";const l=r=>{var{children:i,className:t,_internalVariant:l="default",_internalOnClick:c,onClick:o,id:d}=r,v=a.__rest(r,["children","className","_internalVariant","_internalOnClick","onClick","id"]);return e.jsx(s.NavItem,Object.assign({id:d,className:n.classNames("navbar-item",t),$variant:l,onClick:()=>{c&&c(),o&&o()},role:"menuitem"},v,{children:i}),void 0)};l.displayName="NavItem";const c=a=>{let{children:r}=a;return e.jsx(s.NavbarLogoContainer,Object.assign({id:"retro-navbar-logo"},{children:r}),void 0)};c.displayName="NavLogo";const o=i=>{var{label:t,children:l,className:c,_internalVariant:o="default"}=i,d=a.__rest(i,["label","children","className","_internalVariant"]);const[v,m]=r.useState(!1);return e.jsxs(s.NavMenuContainer,Object.assign({className:n.classNames("nav-menu",c),onMouseLeave:()=>{m(!1)}},d,{children:[e.jsx(s.NavMenuTrigger,Object.assign({$variant:o,$isOpen:v,onClick:()=>{m(!v)},onMouseEnter:()=>"menu-bar"===o&&m(!0)},{children:t}),void 0),v&&e.jsx(s.NavMenuDropdown,Object.assign({$variant:o},{children:l}),void 0)]}),void 0)};o.displayName="NavMenu",exports.NavItem=l,exports.NavLogo=c,exports.NavMenu=o,exports.Navbar=t;