components.layout.dashboard.DashboardLayout.js Maven / Gradle / Ivy

Go to download
import DashboardBanner from './DashboardBanner';
import SidebarLayout from 'components/layout/common/SidebarLayout';
import { Box, useTheme } from '@mui/material';
import { useLayoutContext } from 'hooks/layout';
import Logo from "components/common/Logo"
import { DashboardSidebarFooter, DashboardSidebarItems } from 'components/layout/dashboard/DashboardSidebar';
import { Outlet } from 'react-router';

const DashboardLayout = () => {
  const theme = useTheme()

  console.debug("Dashboard loading")
  return (
    }
      sidebarBody={}
      sidebarBodyFooter={}
      contentBanner={}
      bannerProps={{
        height: theme.components?.banner?.height,
        shortcut: "Backslash"
      }}
      sidebarProps={{
        shortcut: "BracketLeft"
      }}
    >
      
    
  )
};

const SidebarBanner = () => {
  const { sidebarState, bannerState, props: { transitionTime } } = useLayoutContext()

  return (
    
      
    
  )
}

const BannerLogo = (props) => {
  const {sidebarState, props: {transitionTime}} = useLayoutContext()

  const theme     = useTheme()
  const href      = theme.components.logo.href || window.location.origin
  const src       = theme.components.logo.src

  const hasSmall  = !!theme.components.logoSmall
  const srcSmall  = theme.components.logoSmall?.src
  const hrefSmall = theme.components.logoSmall?.href || href
  
  const onClick = (e, href) => {
    e?.stopPropagation()
    e?.preventDefault()
    window.location.href = href
  }
  
  return (
    <>
      { hasSmall
        ?
         onClick(e, hrefSmall)}
            src={srcSmall}
            style={{
              cursor: "pointer",
              opacity: sidebarState.expandState != "expanded" ? 1 : 0,
              objectFit: 'contain',
              transition: `all ${transitionTime} ease, opacity 1s linear`, 
              maxWidth: sidebarState.expandState != "expanded" ? "42px" : "0px",
              height: "100%",
              width: "auto"
            }}
          />
        : null
      }
       onClick(e, href)}
        src={src}
        style={{
          cursor: "pointer",
          opacity: !hasSmall || sidebarState.expandState == "expanded" ? 1 : 0,
          objectFit: 'contain',
          maxWidth: !hasSmall || sidebarState.expandState == "expanded" ? "100%" : "0%",
          transition: `all ${transitionTime} ease, opacity 1s linear`, 
          height: "100%",
          width: "auto"
        }}
      />
    
  )
}

const SidebarBody = () => {
  return (
    
  )
}


const ContentBanner = () => {
  const theme                           = useTheme()
  const {height, ...bannerSx}           = theme.components.banner

  const color = bannerSx.backgroundColor || bannerSx.background
  return (
    
       setMobileNavOpen(true)} />
    
  )
}

export default DashboardLayout;