@artibet/react-sidebar-layout
Version:
React sidebar layout component
2 lines (1 loc) • 22.5 kB
JavaScript
import e,{useEffect as o}from"react";import{Box as t,Divider as r,MenuItem as n,ListItemIcon as i,ListItemText as a,Typography as l,Tooltip as c,IconButton as u,Menu as p,AppBar as d,Toolbar as m,ListItemButton as s,Collapse as b,List as C,Drawer as g,useTheme as x,useMediaQuery as f}from"@mui/material";import v from"@mui/icons-material/Menu";import h from"@mui/icons-material/KeyboardArrowDown";import E from"@mui/icons-material/ExpandLess";import k from"@mui/icons-material/ExpandMore";function I(e,o){(null==o||o>e.length)&&(o=e.length);for(var t=0,r=Array(o);t<o;t++)r[t]=e[t];return r}function B(e,o,t){return(o=function(e){var o=function(e,o){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,o||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===o?String:Number)(e)}(e,"string");return"symbol"==typeof o?o:o+""}(o))in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function S(e,o){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);o&&(r=r.filter((function(o){return Object.getOwnPropertyDescriptor(e,o).enumerable}))),t.push.apply(t,r)}return t}function z(e){for(var o=1;o<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{};o%2?S(Object(t),!0).forEach((function(o){B(e,o,t[o])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):S(Object(t)).forEach((function(o){Object.defineProperty(e,o,Object.getOwnPropertyDescriptor(t,o))}))}return e}function y(e,o){return function(e){if(Array.isArray(e))return e}(e)||function(e,o){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,n,i,a,l=[],c=!0,u=!1;try{if(i=(t=t.call(e)).next,0===o);else for(;!(c=(r=i.call(t)).done)&&(l.push(r.value),l.length!==o);c=!0);}catch(e){u=!0,n=e}finally{try{if(!c&&null!=t.return&&(a=t.return(),Object(a)!==a))return}finally{if(u)throw n}}return l}}(e,o)||function(e,o){if(e){if("string"==typeof e)return I(e,o);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?I(e,o):void 0}}(e,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var A=function(){var o=e.useContext(V),r=o.theme,n=o.topbarLogo,i=o.isAboveBreakpoint,a="function"==typeof n?n({textColor:r.topbar.textColor,textSize:r.topbar.textSize,backgroundColor:r.topbar.backgroundColor,iconColor:r.topbar.iconColor,iconSize:r.topbar.iconSize}):n;return e.createElement(e.Fragment,null,(r.topbar.logoAlwaysVisible||!i)&&e.createElement(t,null,a))},M=function(o){var t=o.menuItem,c=o.closeMenu,u=e.useContext(V).theme;return("function"==typeof t.hidden?t.hidden():Boolean(t.hidden))?null:t.divider?e.createElement(r,{sx:{backgroundColor:u.popupMenu.dividerColor}}):e.createElement(n,{sx:{"&:hover":{backgroundColor:u.popupMenu.hoverColor}},onClick:function(e){c(e),t.onClick()}},t.icon&&e.createElement(i,{sx:{color:u.popupMenu.iconColor,fontSize:"".concat(u.popupMenu.iconSize,"px")}},t.icon),e.createElement(a,{disableTypography:!0,primary:e.createElement(l,{sx:{color:u.popupMenu.textColor,fontSize:"".concat(u.popupMenu.textSize,"px")}},t.label)}))},F=function(o){var r=o.menu,l=e.useContext(V).theme,d=y(e.useState(null),2),m=d[0],s=d[1],b=function(e){s(e.currentTarget)},C=function(e){s(null)};return("function"==typeof r.hidden?r.hidden():Boolean(r.hidden))?null:e.createElement(t,null,e.createElement(c,{title:r.tooltip?r.tooltip:"",placement:"bottom-end"},e.createElement(t,null,r.icon&&r.label?e.createElement(n,{onClick:b},e.createElement(t,{sx:{display:"flex",alignItems:"center"}},e.createElement(i,{sx:{fontSize:"".concat(l.topbar.iconSize,"px"),color:l.topbar.iconColor}},r.icon),e.createElement(a,null,e.createElement(t,{sx:{color:l.topbar.textColor,fontSize:"".concat(l.topbar.textSize,"px")}},r.label)),r.dropdownArrow&&e.createElement(h,{size:l.topbar.iconSize}))):r.label?e.createElement(n,{onClick:b},e.createElement(t,{sx:{color:l.topbar.textColor,fontSize:"".concat(l.topbar.textSize,"px")}},r.label),r.dropdownArrow&&e.createElement(h,{size:l.topbar.iconSize})):e.createElement(u,{sx:{fontSize:"".concat(l.topbar.iconSize,"px"),color:l.topbar.iconColor},onClick:b},r.icon))),e.createElement(p,{anchorEl:m,transformOrigin:{horizontal:"right",vertical:"top"},anchorOrigin:{horizontal:"right",vertical:"bottom"},open:Boolean(m),onClose:C,PaperProps:{elevation:0,sx:{backgroundColor:l.popupMenu.backgroundColor,color:l.popupMenu.textColor,overflow:"visible",filter:"drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",mt:1.5,"& .MuiAvatar-root":{width:32,height:32,ml:-.5,mr:1},"&:before":{content:'""',display:"block",position:"absolute",top:0,right:14,width:10,height:10,bgcolor:l.popupMenu.backgroundColor,transform:"translateY(-50%) rotate(45deg)",zIndex:0}}}},r.group.map((function(o,t){return e.createElement(M,{menuItem:o,key:t,closeMenu:C})}))))},w=function(o){var r=o.menuItem,l=e.useContext(V).theme;return("function"==typeof r.hidden?r.hidden():Boolean(r.hidden))?null:e.createElement(c,{title:r.tooltip?r.tooltip:""},e.createElement(t,null,r.icon&&r.label?e.createElement(n,{onClick:r.onClick},e.createElement(t,{sx:{display:"flex",alignItems:"center"}},e.createElement(i,{sx:{fontSize:"".concat(l.topbar.iconSize,"px"),color:l.topbar.iconColor}},r.icon),e.createElement(a,null,e.createElement(t,{sx:{color:l.topbar.textColor,fontSize:"".concat(l.topbar.textSize,"px")}},r.label)))):r.label?e.createElement(n,{onClick:r.onClick},e.createElement(t,{sx:{color:l.topbar.textColor,fontSize:"".concat(l.topbar.textSize,"px")}},r.label)):e.createElement(u,{sx:{fontSize:"".concat(l.topbar.iconSize,"px"),color:l.topbar.iconColor},onClick:r.onClick},r.icon)))},H=function(){var o=e.useContext(V),r=o.theme,n=o.topbarLogo,i=o.toggleSidebar,a=o.isAboveBreakpoint,l=o.topbarMenuItems;o.showTopbar;var c={toolbar:{marginLeft:a?"".concat(r.sidebar.width,"px"):"0px",backgroundColor:r.topbar.backgroundColor},menuIcon:{color:r.topbar.iconColor,marginLeft:"-15px",display:a?"none":"block"}};return e.createElement(t,null,e.createElement(d,{position:"fixed",elevation:1},e.createElement(m,{sx:c.toolbar},e.createElement(t,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%"}},e.createElement(t,{sx:{display:"flex",alignItems:"center"}},e.createElement(u,{sx:c.menuIcon,onClick:i},e.createElement(v,{size:r.topbar.iconSize})),null!==n?e.createElement(A,null):null),e.createElement(t,{sx:{display:"flex",justifyContent:"right",alignItems:"center"}},l.map((function(o,r){return e.createElement(t,{key:r},"group"in o?e.createElement(F,{menu:o}):e.createElement(w,{menuItem:o}))})))))))},T=function(o){var r,n,l,c,u,p=o.menuItem,d=o.inGroup,m=void 0!==d&&d,b=y(e.useState(!1),2),C=b[0],g=b[1],x=e.useMemo((function(){return"function"==typeof p.active?p.active():Boolean(p.active)}),[p]),f=e.useMemo((function(){return"function"==typeof p.hidden?p.hidden():Boolean(p.hidden)}),[p]),v=e.useContext(V).theme;if(f)return null;var h={listItemButton:{borderBottom:v.sidebar.menuItemBorderBottom,pl:m?4:"",backgroundColor:C?"".concat(v.sidebar.menuItemHoverBackgroundColor," !important"):x?"".concat(v.sidebar.menuItemActiveBackgroundColor," !important"):""},listItemIcon:{color:C?v.sidebar.iconHoverColor:x?v.sidebar.iconActiveColor:v.sidebar.iconColor,fontSize:"".concat(v.sidebar.iconSize,"px"),minWidth:"".concat(v.sidebar.iconMinWidth,"px")},listItemText:{color:C?v.sidebar.menuItemHoverColor:x?v.sidebar.menuItemActiveTextColor:"",fontSize:"".concat(v.sidebar.textSize,"px"),fontWeight:v.sidebar.textWeight},section:{marginLeft:(null===(r=v.section)||void 0===r?void 0:r.marginLeft)||"5px",color:(null===(n=v.section)||void 0===n?void 0:n.textColor)||v.sidebar.textColor,backgroundColor:(null===(l=v.section)||void 0===l?void 0:l.backgroundColor)||v.sidebar.backgroundColor,fontSize:(null===(c=v.section)||void 0===c?void 0:c.textSize)||v.sidebar.textSize,fontWeight:(null===(u=v.section)||void 0===u?void 0:u.fontWeight)||"bold"}};return p.section?e.createElement(a,{slotProps:{primary:h.section},primary:p.label}):e.createElement(t,{onMouseEnter:function(){return g(!0)},onMouseLeave:function(){return g(!1)},sx:{marginBottom:v.sidebar.menuItemGap}},e.createElement(s,{sx:h.listItemButton,onClick:p.onClick},e.createElement(i,{sx:h.listItemIcon},p.icon),e.createElement(a,{slotProps:{primary:h.listItemText},primary:p.label})))},O=function(o){var r=o.menuGroup,n=e.useContext(V),l=n.activeGroup,c=n.setActiveGroup,u=n.theme,p=n.singleGroupOpen,d=y(e.useState(!1),2),m=d[0],g=d[1],x=y(e.useState(!1),2),f=x[0],v=x[1],h=e.useMemo((function(){return"function"==typeof r.hidden?r.hidden():Boolean(r.hidden)}),[r]);e.useEffect((function(){Array.isArray(r.group)&&(r.open?(v(r.open),p&&c(r)):r.group.forEach((function(e){if("function"==typeof e.active?e.active():Boolean(e.active))return v(!0),void(p&&c(r))})))}),[]),e.useEffect((function(){p&&v(l===r)}),[l]);var I={listItemButton:{backgroundColor:m?"".concat(u.sidebar.groupItemHoverBackgroundColor," !important"):f?"".concat(u.sidebar.groupItemActiveBackgroundColor," !important"):"",borderBottom:u.sidebar.groupItemBorderBottom},listItemIcon:{color:"".concat(m?u.sidebar.iconHoverColor:f?u.sidebar.iconActiveColor:u.sidebar.iconColor," !important"),fontSize:"".concat(u.sidebar.iconSize,"px"),minWidth:"".concat(u.sidebar.iconMinWidth,"px")},listItemText:{color:m?"".concat(u.sidebar.groupItemHoverColor," !important"):f?"".concat(u.sidebar.groupItemActiveTextColor," !important"):"",fontSize:"".concat(u.sidebar.textSize,"px"),fontWeight:u.sidebar.textWeight},groupItems:{backgroundColor:"".concat(u.sidebar.groupBackgroundColor," !important")}};return Array.isArray(r.group)?h?null:e.createElement(t,{onMouseEnter:function(){return g(!0)},onMouseLeave:function(){return g(!1)},sx:{marginBottom:u.sidebar.menuItemGap}},e.createElement(s,{sx:I.listItemButton,onClick:function(e){e.stopPropagation();var o=!f;v(o),p&&c(o?r:null)}},e.createElement(i,{sx:I.listItemIcon},r.icon),e.createElement(a,{slotProps:{primary:I.listItemText},primary:r.label}),f?e.createElement(E,{size:"".concat(u.sidebar.iconSize,"px")}):e.createElement(k,{size:"".concat(u.sidebar.iconSize,"px")})),e.createElement(t,{sx:I.groupItems},e.createElement(b,{in:f,timeout:"auto",unmountOnExit:!0},e.createElement(C,{component:"div",disablePadding:!0},r.group.map((function(o,t){return e.createElement(T,{menuItem:o,inGroup:!0,key:t})})))))):null},W=function(){var o=e.useContext(V),r=o.theme,n=o.sidebarLogo,i={logo:{borderBottom:r.sidebar.logoBorderBottom}},a="function"==typeof n?n({sidebarWidth:r.sidebar.width,textColor:r.sidebar.textColor,backgroundColor:r.sidebar.backgroundColor,iconColor:r.sidebar.iconColor,iconSize:r.sidebar.iconSize}):n;return e.createElement(t,{sx:i.logo},a)},P=function(){var o=e.useContext(V);o.theme;var r=o.sidebarLogo;o.muiTheme;var n=o.sidebarMenuItems,i=o.sidebarFooter;return e.createElement(t,{sx:{display:"flex",flexDirection:"column",justifyContent:"space-between",height:"100%"}},e.createElement(t,{sx:{"&::MsOverflowStyle":"none",scrollbarWidth:"none",overflowY:"scroll","&::-webkit-scrollbar":{display:"none"}}},null!==r?e.createElement(W,null):null,e.createElement(C,null,n.map((function(o,r){return e.createElement(t,{key:r},"group"in o?e.createElement(O,{menuGroup:o}):e.createElement(T,{menuItem:o}))})))),i&&e.createElement(t,null,i))},L=function(){var o=e.useContext(V),r=o.theme,n=o.isSidebarOpen,i=o.toggleSidebar,a=o.isAboveBreakpoint,l={root:{display:"flex",width:a?"".concat(r.sidebar.width,"px"):"0px"},drawerPaper:{width:"".concat(r.sidebar.width,"px"),color:r.sidebar.textColor,backgroundColor:r.sidebar.backgroundColor}};return e.createElement(t,{sx:l.root},a?e.createElement(g,{variant:"permanent",open:!0,anchor:"left",PaperProps:{sx:l.drawerPaper}},e.createElement(P,null)):null,e.createElement(g,{variant:"temporary",open:n,anchor:"left",PaperProps:{sx:l.drawerPaper},onClick:i},e.createElement(P,null)))},j={sidebar:{width:250,textColor:"#E2E4E8",textSize:16,textWeight:"normal",backgroundColor:"#323639",logoBorderBottom:"1px solid gray",menuItemBorderBottom:"1px solid gray",menuItemHoverColor:"#5F6368",menuItemHoverBackgroundColor:"",menuItemActiveBackgroundColor:"#2E89FF",menuItemActiveTextColor:"#E4E6EB",menuItemGap:"0px",iconColor:"#E4E6EB",iconHoverColor:"#FFFFFF",iconActiveColor:"#FFFFFF",iconSize:22,iconMinWidth:30,breakpoint:"sm",groupItemBorderBottom:"1px solid gray",groupItemHoverColor:"#5F6368",groupItemHoverBackgroundColor:"",groupItemActiveBackgroundColor:"#2E89FF",groupItemActiveTextColor:"#E4E6EB",groupBackgroundColor:"#323639"},topbar:{textColor:"#E4E6EB",textSize:16,backgroundColor:"#323639",menuItemHoverColor:"#5F6368",iconColor:"#E4E6EB",iconSize:22,logoAlwaysVisible:!1},popupMenu:{backgroundColor:"#2D2E31",textColor:"#E2E4E8",textSize:16,iconColor:"#D0D2D6",iconSize:18,dividerColor:"gray",hoverColor:"#5F6368",activeColor:"",selectedColor:""},mainContent:{textColor:"#E4E6EB",backgroundColor:"#525659",padding:20},footer:{height:56,padding:0,textColor:"#E4E6EB",textSize:24,backgroundColor:"#323639"},section:{marginLeft:"5px",textColor:"#E2E4E8",textSize:16,backgroundColor:"#323639",fontWeight:"bold"}},D={sidebar:{width:250,textColor:"#F9FBFE",textSize:16,textWeight:"normal",backgroundColor:"#1976D2",logoBorderBottom:"1px solid #999999",menuItemBorderBottom:"1px solid #999999",menuItemHoverColor:"#1871CA",menuItemHoverBackgroundColor:"",menuItemActiveBackgroundColor:"#DD5701",menuItemActiveTextColor:"#F9FBFE",menuItemGap:"0px",iconColor:"#F9FBFE",iconHoverColor:"#FFFFFF",iconActiveColor:"#FFFFFF",iconSize:22,iconMinWidth:30,breakpoint:"sm",groupItemBorderBottom:"1px solid #999999",groupItemHoverColor:"#1871CA",groupItemHoverBackgroundColor:"",groupItemActiveBackgroundColor:"#DD5701",groupItemActiveTextColor:"#F9FBFE",groupBackgroundColor:"#1976D2"},topbar:{textColor:"#FFFFFF",textSize:16,backgroundColor:"#1976D2",menuItemHoverColor:"#1871CA",iconColor:"#E4E6EB",iconSize:22,logoAlwaysVisible:!1},popupMenu:{backgroundColor:"#F5F5F5",textColor:"#1A1A1A",textSize:16,iconColor:"#1A1A1A",iconSize:18,dividerColor:"#FAFAFA",hoverColor:"#EBEBEB",activeColor:"",selectedColor:""},mainContent:{textColor:"black",backgroundColor:"white",padding:20},footer:{height:56,padding:0,textColor:"#FFFFFF",textSize:16,backgroundColor:"#1976D2"},section:{marginLeft:"5px",textColor:"#F9FBFE",textSize:16,backgroundColor:"#1976D2",fontWeight:"bold"}},G=function(){var o=e.useContext(V),r=o.footer,n=o.theme,i={footer:{height:"".concat(n.footer.height,"px"),backgroundColor:n.footer.backgroundColor,color:n.footer.textColor,fontSize:"".concat(n.footer.textSize,"px"),padding:"".concat(n.footer.padding,"px")}},a="function"==typeof r?r({height:n.footer.height,padding:n.footer.padding,textColor:n.footer.textColor,textSize:n.footer.textSize,backgroundColor:n.footer.backgroundColor}):r;return e.createElement(t,{sx:i.footer},a)},V=e.createContext(),N=function(r){var n=r.children,i=r.theme,a=void 0===i?"dark":i,l=r.singleGroupOpen,c=void 0===l||l,u=r.sidebarLogo,p=r.showTopbar,d=void 0===p||p,m=r.topbarLogo,s=r.sidebarMenuItems,b=void 0===s?[]:s,C=r.topbarMenuItems,g=void 0===C?[]:C,v=r.footer,h=r.sidebarFooter,E=r.customize,k=y(e.useState(),2),I=k[0],B=k[1],S=y(e.useState(!1),2),A=S[0],M=S[1],F=y(e.useState(null),2),w=F[0],T=F[1],O="string"==typeof a?"dark"===a?j:D:a,W=x();o((function(){document.body.style.margin="0px 0px 0px 0px";var e=function(){if(d){var e=Array.from(document.getElementsByClassName("MuiToolbar-root"))[0];B(e.clientHeight)}else B(0)};e(),window.addEventListener("resize",e)}),[]);var P={sidebarMenuItems:b,topbarMenuItems:g,topbarHeight:I,isSidebarOpen:A,toggleSidebar:function(){M(!A)},muiTheme:W,sidebarLogo:u,showTopbar:d,topbarLogo:m,footer:v,sidebarFooter:h,singleGroupOpen:c,activeGroup:w,setActiveGroup:T,theme:{sidebar:Boolean(E)&&"sidebar"in E?{width:"width"in E.sidebar?E.sidebar.width:O.sidebar.width,textColor:"textColor"in E.sidebar?E.sidebar.textColor:O.sidebar.textColor,textSize:"textSize"in E.sidebar?E.sidebar.textSize:O.sidebar.textSize,textWeight:"textWeight"in E.sidebar?E.sidebar.textWeight:O.sidebar.textWeight,backgroundColor:"backgroundColor"in E.sidebar?E.sidebar.backgroundColor:O.sidebar.backgroundColor,logoBorderBottom:"logoBorderBottom"in E.sidebar?E.sidebar.logoBorderBottom:O.sidebar.logoBorderBottom,menuItemBorderBottom:"menuItemBorderBottom"in E.sidebar?E.sidebar.menuItemBorderBottom:O.sidebar.menuItemBorderBottom,menuItemHoverColor:"menuItemHoverColor"in E.sidebar?E.sidebar.menuItemHoverColor:O.sidebar.menuItemHoverColor,menuItemHoverBackgroundColor:"menuItemHoverBackgroundColor"in E.sidebar?E.sidebar.menuItemHoverBackgroundColor:O.sidebar.menuItemHoverBackgroundColor,menuItemActiveBackgroundColor:"menuItemActiveBackgroundColor"in E.sidebar?E.sidebar.menuItemActiveBackgroundColor:O.sidebar.menuItemActiveBackgroundColor,menuItemActiveTextColor:"menuItemActiveTextColor"in E.sidebar?E.sidebar.menuItemActiveTextColor:O.sidebar.menuItemActiveTextColor,menuItemGap:"menuItemGap"in E.sidebar?E.sidebar.menuItemGap:O.sidebar.menuItemGap,iconColor:"iconColor"in E.sidebar?E.sidebar.iconColor:O.sidebar.iconColor,iconHoverColor:"iconHoverColor"in E.sidebar?E.sidebar.iconHoverColor:O.sidebar.iconHoverColor,iconActiveColor:"iconActiveColor"in E.sidebar?E.sidebar.iconActiveColor:O.sidebar.iconActiveColor,iconSize:"iconSize"in E.sidebar?E.sidebar.iconSize:O.sidebar.iconSize,iconMinWidth:"iconMinWidth"in E.sidebar?E.sidebar.iconMinWidth:O.sidebar.iconMinWidth,breakpoint:"breakpoint"in E.sidebar?E.sidebar.breakpoint:O.sidebar.breakpoint,groupItemBorderBottom:"groupItemBorderBottom"in E.sidebar?E.sidebar.groupItemBorderBottom:O.sidebar.groupItemBorderBottom,groupItemHoverColor:"groupItemHoverColor"in E.sidebar?E.sidebar.groupItemHoverColor:O.sidebar.groupItemHoverColor,groupItemHoverBackgroundColor:"groupItemHoverBackgroundColor"in E.sidebar?E.sidebar.groupItemHoverBackgroundColor:O.sidebar.groupItemHoverBackgroundColor,groupItemActiveBackgroundColor:"groupItemActiveBackgroundColor"in E.sidebar?E.sidebar.groupItemActiveBackgroundColor:O.sidebar.groupItemActiveBackgroundColor,groupItemActiveTextColor:"groupItemActiveTextColor"in E.sidebar?E.sidebar.groupItemActiveTextColor:O.sidebar.groupItemActiveTextColor,groupBackgroundColor:"groupBackgroundColor"in E.sidebar?E.sidebar.groupBackgroundColor:O.sidebar.groupBackgroundColor}:O.sidebar,topbar:Boolean(E)&&"topbar"in E?{textColor:"textColor"in E.topbar?E.topbar.textColor:O.topbar.textColor,textSize:"textSize"in E.topbar?E.topbar.textSize:O.topbar.textSize,backgroundColor:"backgroundColor"in E.topbar?E.topbar.backgroundColor:O.topbar.backgroundColor,menuItemHoverColor:"menuItemHoverColor"in E.topbar?E.topbar.menuItemHoverColor:O.topbar.menuItemHoverColor,iconColor:"iconColor"in E.topbar?E.topbar.iconColor:O.topbar.iconColor,iconSize:"iconSize"in E.topbar?E.topbar.iconSize:O.topbar.iconSize,logoAlwaysVisible:"logoAlwaysVisible"in E.topbar?E.topbar.logoAlwaysVisible:O.topbar.logoAlwaysVisible}:O.topbar,popupMenu:Boolean(E)&&"popupMenu"in E?{backgroundColor:"backgroundColor"in E.popupMenu?E.popupMenu.backgroundColor:O.popupMenuTheme.backgroundColor,textColor:"textColor"in E.popupMenu?E.popupMenu.textColor:O.popupMenuTheme.textColor,textSize:"textSize"in E.popupMenu?E.popupMenu.textSize:O.popupMenuTheme.textSize,iconColor:"iconColor"in E.popupMenu?E.popupMenu.iconColor:O.popupMenuTheme.iconColor,iconSize:"iconSize"in E.popupMenu?E.popupMenu.iconSize:O.popupMenuTheme.iconSize,dividerColor:"dividerColor"in E.popupMenu?E.popupMenu.dividerColor:O.popupMenuTheme.dividerColor,hoverColor:"hoverColor"in E.popupMenu?E.popupMenu.hoverColor:O.popupMenuTheme.hoverColor,activeColor:"activeColor"in E.popupMenu?E.popupMenu.activeColor:O.popupMenuTheme.activeColor,selectedColor:"selectedColor"in E.popupMenu?E.popupMenu.selectedColor:O.popupMenuTheme.selectedColor}:O.popupMenu,mainContent:Boolean(E)&&"mainContent"in E?{textColor:"textColor"in E.mainContent?E.mainContent.textColor:O.mainContent.textColor,backgroundColor:"backgroundColor"in E.mainContent?E.mainContent.backgroundColor:O.mainContent.backgroundColor,padding:"padding"in E.mainContent?E.mainContent.padding:O.mainContent.padding}:O.mainContent,footer:Boolean(E)&&"footer"in E?{height:"height"in E.footer?E.footer.height:O.footer.height,padding:"padding"in E.footer?E.footer.padding:O.footer.padding,textColor:"textColor"in E.footer?E.footer.textColor:O.footer.textColor,textSize:"textSize"in E.footer?E.footer.textSize:O.footer.textSize,backgroundColor:"backgroundColor"in E.footer?E.footer.backgroundColor:O.footer.backgroundColor}:O.footer,section:Boolean(E)&&"section"in E?{marginLeft:"marginLeft"in E.section?E.section.marginLeft:O.section.marginLeft,color:"textColor"in E.section?E.section.textColor:O.section.textColor,textSize:"textSize"in E.section?E.section.textSize:O.section.textSize,backgroundColor:"backgroundColor"in E.section?E.section.backgroundColor:O.section.backgroundColor,fontWeight:"fontWeight"in E.section?E.section.fontWeight:O.section.fontWeight}:O.section}},N=f(W.breakpoints.up(P.theme.sidebar.breakpoint)),Y={mainContent:{marginTop:"".concat(I,"px"),marginLeft:N?"".concat(P.theme.sidebar.width,"px"):"0px",minHeight:"calc(100vh - ".concat(I,"px)"),minWidth:N?"calc(100vw - ".concat(P.theme.sidebar.width,"px - (100vw - 100%))"):"calc(100vw - (100vw - 100%))",color:P.theme.mainContent.textColor,backgroundColor:P.theme.mainContent.backgroundColor,padding:0,display:"flex",flexDirection:"column",justifyContent:"space-between"},page:{padding:"".concat(P.theme.mainContent.padding,"px")}};return e.createElement(V.Provider,{value:z({isAboveBreakpoint:N},P)},e.createElement(t,{sx:{display:"flex"}},e.createElement(L,null),d&&e.createElement(H,null),e.createElement(t,{sx:Y.mainContent},e.createElement(t,{sx:Y.page},n),v&&e.createElement(G,null))))},Y=function(){var o=e.useContext(V);return{theme:o.theme,muiTheme:o.muiTheme,topbarHeight:o.topbarHeight,isSidebarOpen:o.isSidebarOpen,isAboveBreakpoint:f(o.muiTheme.breakpoints.up(o.theme.sidebar.breakpoint))}};export{N as SidebarLayout,V as SidebarLayoutContext,j as defaultDarkTheme,D as defaultLightTheme,Y as useSidebarLayoutContext};