@numl-react/navigation-bar/dist/index.es.js

The navigationbar component is used to display the primary navigation in the sidebar. Navigation Bar includes a list of links that wants to move between page.

var e=Object.defineProperty,t=Object.prototype.hasOwnProperty,n=Object.getOwnPropertySymbols,r=Object.prototype.propertyIsEnumerable,l=(t,n,r)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,o=(e,o)=>{for(var c in o||(o={}))t.call(o,c)&&l(e,c,o[c]);if(n)for(var c of n(o))r.call(o,c)&&l(e,c,o[c]);return e},c=(e,l)=>{var o={};for(var c in e)t.call(e,c)&&l.indexOf(c)<0&&(o[c]=e[c]);if(null!=e&&n)for(var c of n(e))l.indexOf(c)<0&&r.call(e,c)&&(o[c]=e[c]);return o};import*as a from"@numl-react/elements";import i,{useRef as m,useEffect as u}from"react";import{El as f}from"@numl-react/core";function d(e){const{children:t,fill:n="bg"}=e,r=c(e,["children","fill"]);return i.createElement(f.Menu,o({width:"min 15",fill:n},r),t)}function s(e){const{height:t="100%",children:n,footer:r}=e;return i.createElement(d,{flex:!0,height:t,flow:"column",content:"space-between",width:"min 256px"},i.createElement(a.Block,{overflow:"auto"},i.createElement(a.Grid,{content:"space-between stretch",xl:"1fr",lg:"1fr",md:"1fr",sm:"1fr",xs:"1fr"},n)),i.createElement(a.Footer,null,i.createElement(a.Block,{border:"top"},i.Children.toArray(r))))}d.Item=function(e){const t=m(),{children:n,fill:r="bg",icon:l,onClick:a}=e,d=c(e,["children","fill","icon","onClick"]);return u((()=>{t.current&&a&&t.current.addEventListener("click",(e=>a(e)))}),[]),i.createElement(f.Menuitem,o({ref:t,fill:r},d),l?i.createElement(i.Fragment,null,l&&"string"==typeof l?i.createElement(f.Icon,{name:l}):l):null,n)},s.Item=e=>{const{label:t,icon:n,children:r,dropdown:l=!1}=e,m=c(e,["label","icon","children","dropdown"]);return i.createElement(a.Menuitem,o({gap:"2x",flex:!0,width:"100%",content:"space-between"},m),i.createElement(a.Flex,{gap:"2x"},n&&"string"==typeof n?i.createElement(a.Icon,{name:n}):n,i.createElement(a.BaseElement,null,t||r)),l||1==l?i.createElement(a.DropdownIcon,{theme:"default"}):null)};const p=function({item:e}){const[t,n]=i.useState(!0);return i.useEffect((()=>{}),[t]),i.createElement(i.Fragment,null,i.createElement(s.Item,{icon:e.icon,label:e.label,to:e.to,beforeClick:()=>(n(!t),e.beforeClick),dropdown:!!e.subNavigationItems,onClick:e.onClick}),e.subNavigationItems?i.createElement(a.Block,{padding:"left 2.5rem",hide:t?"y":"n"},i.Children.toArray(e.subNavigationItems.length>0&&e.subNavigationItems.map((e=>{const{icon:t}=e,n=c(e,["icon"]);return i.createElement(p,{item:n})})))):null)};s.Section=function({items:e,title:t=null}){return i.createElement(i.Fragment,null,t?i.createElement(a.BaseElement,{padding:"top 2x"},i.createElement(a.Label,{padding:"1x"},t)):null,i.Children.toArray(e&&e.map((e=>i.createElement(i.Fragment,null,i.createElement(p,{item:e}))))))},s.displayName="NavigationBar";export{s as NavigationBar};