@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 1.2 kB
JavaScript
import{jsx as r,jsxs as o}from"react/jsx-runtime";import t,{useMemo as e}from"react";import i from"@mui/material/IconButton";import a from"@mui/material/AppBar";import l from"@mui/material/Typography";import m from"@mui/material/Toolbar";import n from"clsx";import{styles as s}from"./DrawerHeader.styles.js";const c="NexusDrawerHeader",p=p=>{const{label:d,icon:u,onIconClick:f,divider:b=!0,sx:x,onClick:y,...$}=p,h=e((()=>[b?{}:{borderBottom:0},y?{cursor:"pointer"}:{},s.rootStyle,...Array.isArray(x)?x:[x]]),[b,y,x]);return r(a,{className:`${c}-root`,sx:h,color:"inherit",position:"sticky",onClick:y,...$,children:o(m,{className:`${c}-toolbar`,children:[u&&f&&r(i,{sx:{mr:"3px"},size:"small",edge:"start",color:"inherit",onClick:r=>{r.stopPropagation(),f()},className:n(`${c}-iconButton`,`${c}-icon-button`),"data-testid":`${c}-icon-button`,"aria-label":"Drawer Header Action",children:t.cloneElement(u,{fontSize:"1.125rem",className:`${c}-icon`})}),u&&!f&&t.cloneElement(u,{fontSize:"1.125rem",className:`${c}-icon`,sx:{mr:"3px"}}),"string"==typeof d?r(l,{variant:"body2",noWrap:!0,className:`${c}-label`,"data-testid":`${c}-label`,children:d}):d]})})};export{p as DrawerHeaderComponent,c as prefix};