import * as React from "react"
import { Box, List, ListItem, Typography } from "@mui/material"
import {
  HiLockClosed,
  HiOutlineTag,
  HiOutlineInboxIn,
  HiOutlineUserGroup,
  HiOutlineChartBar,
  HiPaperClip,
  HiMenuAlt4,
} from "react-icons/hi"
import { FiHome } from "react-icons/fi"
const SIDEBAR_WIDTH = 250
const ICON_SIZE = 18
const Logo = () => (
  <Box
    sx={{
      fontSize: "2xl",
      fontWeight: 800,
      textDecoration: "none",
      color: "primary.100",
    }}
  >
    ❍ UI Kit
  </Box>
)
function Sidebar() {
  return (
    <Box
      sx={{
        display: { xs: "none", sm: "flex" },
        flexDirection: "column",
        height: "100%",
        maxHeight: "100vh",
        width: SIDEBAR_WIDTH,
        bgcolor: "primary.600",
        borderRightWidth: 1,
        borderRightStyle: "solid",
        borderRightColor: "primary.400",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          position: "fixed",
          width: SIDEBAR_WIDTH,
          height: "100%",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            px: 1,
            pt: 0.5,
            mx: 1.5,
            my: 1,
          }}
        >
          <Logo />
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            flex: 1,
          }}
        >
          <List
            sx={{
              pt: 0.5,
              pb: 0,
              borderRightWidth: 1,
              borderRightStyle: "solid",
              borderRightColor: "primary.400",
            }}
          >
            <SidebarItem
              href={undefined}
              title="Home"
              icon={<FiHome size={ICON_SIZE} />}
              active={true}
            />
            <SidebarItem
              href={undefined}
              title="Products"
              icon={<HiOutlineTag size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Orders"
              icon={<HiOutlineInboxIn size={ICON_SIZE} />}
              rightAdornment={
                <Box
                  sx={{
                    fontSize: "xs",
                    color: "white",
                    bgcolor: "primary.500",
                    borderRadius: 999,
                    px: 0.75,
                  }}
                >
                  15
                </Box>
              }
            />
            <SidebarItem
              href={undefined}
              title="Customers"
              icon={<HiOutlineUserGroup size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Analytics"
              icon={<HiOutlineChartBar size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Files"
              icon={<HiPaperClip />}
            />
          </List>
        </Box>
      </Box>
    </Box>
  )
}
function SidebarItem({
  href,
  active,
  icon: Icon,
  rightAdornment: RightAdornment,
  title,
  deemphasized,
  sx,
  ...rest
}) {
  const itemIsActive = active
  return (
    <ListItem
      disableGutters
      sx={{
        display: "flex",
        py: 0,
        px: 1.5,
        mb: 0,
        "&:hover": {
          bgcolor: "primary.500",
          cursor: "pointer",
        },
        ...(itemIsActive && {
          bgcolor: "primary.500",
        }),
        ...sx,
      }}
      {...rest}
    >
      <Box
        href={href}
        component="a"
        color="info"
        sx={{
          textDecoration: "none",
          borderRadius: 2,
          alignItems: "center",
          justifyContent: "flex-start",
          letterSpacing: 0,
          py: 0.5,
          px: 1.25,
          textTransform: "none",
          display: "flex",
          width: "100%",
          color: "primary.100",
          ...(deemphasized && {
            color: "primary.400",
          }),
          "&:hover": {
            bgcolor: "transparent",
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "20px",
            height: "20px",
            mr: 1,
          }}
        >
          {Icon && Icon}
        </Box>
        <Box
          sx={{
            display: "flex",
            width: "100%",
            alignItems: "center",
            justifyContent: "space-between",
            textOverflow: "ellipsis",
            fontSize: "sm",
            fontWeight: itemIsActive ? "600" : "medium",
          }}
        >
          {title}
          {RightAdornment && RightAdornment}
        </Box>
        {deemphasized && (
          <Box
            component="span"
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "gray.300",
              height: 12,
            }}
          >
            <HiLockClosed size={12} />
          </Box>
        )}
      </Box>
    </ListItem>
  )
}
function MobileNav() {
  return (
    <Box
      component="nav"
      sx={{
        display: { xs: "flex", sm: "none" },
        position: "fixed",
        width: "100%",
        bottom: 0,
        zIndex: 5,
        bgcolor: "background.paper",
        borderTopColor: "gray.300",
        borderTopWidth: 1,
        borderTopStyle: "solid",
        paddingBottom: `env(safe-area-inset-bottom, 0.5rem)`,
        displayPrint: "none",
      }}
    >
      <Box
        component="ul"
        sx={{
          listStyle: "none",
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          marginBlock: 0,
          paddingInline: 0,
          width: "100%",
          "& > li:nth-child(n+2)": {
            borderLeftColor: "gray.300",
            borderLeftWidth: 1,
            borderLeftStyle: "solid",
          },
        }}
      >
        <MobileNavItem href={undefined}>
          <FiHome size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineTag size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineInboxIn size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineUserGroup size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiMenuAlt4 size={24} color="currentColor" />
        </MobileNavItem>
      </Box>
    </Box>
  )
}
function MobileNavItem({ active, href, children }) {
  return (
    <Box
      component="li"
      sx={{
        color: "gray.600",
        width: "100%",
      }}
    >
      <Box
        href={href}
        component="a"
        sx={{
          color: active ? "primary.600" : "gray.600",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
          height: "100%",
          py: 1,
        }}
      >
        {children}
      </Box>
    </Box>
  )
}
export default function Example() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", sm: `${SIDEBAR_WIDTH}px 1fr` },
        width: "100%",
        height: "100%",
        minHeight: "100vh",
      }}
    >
      <Sidebar />
      <MobileNav />
      <Box
        sx={{
          p: { xs: 2, sm: 4 },
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          gap: 2,
        }}
      >
        <Typography variant="h1">Dashboard</Typography>
        <Box
          sx={{
            borderWidth: 2,
            borderStyle: "dashed",
            borderRadius: 1,
            borderColor: "gray.200",
            height: "100%",
          }}
        />
      </Box>
    </Box>
  )
}


import * as React from "react"
import { Box, List, ListItem, Typography } from "@mui/material"
import {
  HiLockClosed,
  HiOutlineTag,
  HiOutlineInboxIn,
  HiOutlineUserGroup,
  HiOutlineChartBar,
  HiPaperClip,
  HiMenuAlt4,
} from "react-icons/hi"
import { FiHome } from "react-icons/fi"
const SIDEBAR_WIDTH = 250
const ICON_SIZE = 18
const Logo = () => (
  <Box
    sx={{
      fontSize: "2xl",
      fontWeight: 800,
      textDecoration: "none",
      color: "primary.100",
    }}
  >
    ❍ UI Kit
  </Box>
)

function Sidebar() {
  return (
    <Box
      sx={{
        display: { xs: "none", sm: "flex" },
        flexDirection: "column",
        height: "100%",
        maxHeight: "100vh",
        width: SIDEBAR_WIDTH,
        bgcolor: "primary.600",
        borderRightWidth: 1,
        borderRightStyle: "solid",
        borderRightColor: "primary.400",
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          position: "fixed",
          width: SIDEBAR_WIDTH,
          height: "100%",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 1,
            px: 1,
            pt: 0.5,
            mx: 1.5,
            my: 1,
          }}
        >
          <Logo />
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            flex: 1,
          }}
        >
          <List
            sx={{
              pt: 0.5,
              pb: 0,
              borderRightWidth: 1,
              borderRightStyle: "solid",
              borderRightColor: "primary.400",
            }}
          >
            <SidebarItem
              href={undefined}
              title="Home"
              icon={<FiHome size={ICON_SIZE} />}
              active={true}
            />
            <SidebarItem
              href={undefined}
              title="Products"
              icon={<HiOutlineTag size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Orders"
              icon={<HiOutlineInboxIn size={ICON_SIZE} />}
              rightAdornment={
                <Box
                  sx={{
                    fontSize: "xs",
                    color: "white",
                    bgcolor: "primary.500",
                    borderRadius: 999,
                    px: 0.75,
                  }}
                >
                  15
                </Box>
              }
            />
            <SidebarItem
              href={undefined}
              title="Customers"
              icon={<HiOutlineUserGroup size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Analytics"
              icon={<HiOutlineChartBar size={ICON_SIZE} />}
            />
            <SidebarItem
              href={undefined}
              title="Files"
              icon={<HiPaperClip />}
            />
          </List>
        </Box>
      </Box>
    </Box>
  )
}

function SidebarItem({
  href,
  active,
  icon: Icon,
  rightAdornment: RightAdornment,
  title,
  deemphasized,
  sx,
  ...rest
}: {
  href?: string
  active?: boolean
  title: string
  icon?: React.ReactNode
  rightAdornment?: React.ReactNode
  deemphasized?: boolean
  sx?: any
}) {
  const itemIsActive = active

  return (
    <ListItem
      disableGutters
      sx={{
        display: "flex",
        py: 0,
        px: 1.5,
        mb: 0,
        "&:hover": {
          bgcolor: "primary.500",
          cursor: "pointer",
        },
        ...(itemIsActive && {
          bgcolor: "primary.500",
        }),
        ...sx,
      }}
      {...rest}
    >
      <Box
        href={href}
        component="a"
        color="info"
        sx={{
          textDecoration: "none",
          borderRadius: 2,
          alignItems: "center",
          justifyContent: "flex-start",
          letterSpacing: 0,
          py: 0.5,
          px: 1.25,
          textTransform: "none",
          display: "flex",
          width: "100%",
          color: "primary.100",
          ...(deemphasized && {
            color: "primary.400",
          }),
          "&:hover": {
            bgcolor: "transparent",
          },
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            width: "20px",
            height: "20px",
            mr: 1,
          }}
        >
          {Icon && Icon}
        </Box>
        <Box
          sx={{
            display: "flex",
            width: "100%",
            alignItems: "center",
            justifyContent: "space-between",
            textOverflow: "ellipsis",
            fontSize: "sm",
            fontWeight: itemIsActive ? "600" : "medium",
          }}
        >
          {title}
          {RightAdornment && RightAdornment}
        </Box>
        {deemphasized && (
          <Box
            component="span"
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "gray.300",
              height: 12,
            }}
          >
            <HiLockClosed size={12} />
          </Box>
        )}
      </Box>
    </ListItem>
  )
}

function MobileNav() {
  return (
    <Box
      component="nav"
      sx={{
        display: { xs: "flex", sm: "none" },
        position: "fixed",
        width: "100%",
        bottom: 0,
        zIndex: 5,
        bgcolor: "background.paper",
        borderTopColor: "gray.300",
        borderTopWidth: 1,
        borderTopStyle: "solid",
        paddingBottom: `env(safe-area-inset-bottom, 0.5rem)`,
        displayPrint: "none",
      }}
    >
      <Box
        component="ul"
        sx={{
          listStyle: "none",
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          marginBlock: 0,
          paddingInline: 0,
          width: "100%",
          "& > li:nth-child(n+2)": {
            borderLeftColor: "gray.300",
            borderLeftWidth: 1,
            borderLeftStyle: "solid",
          },
        }}
      >
        <MobileNavItem href={undefined}>
          <FiHome size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineTag size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineInboxIn size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiOutlineUserGroup size={24} color="currentColor" />
        </MobileNavItem>
        <MobileNavItem href={undefined}>
          <HiMenuAlt4 size={24} color="currentColor" />
        </MobileNavItem>
      </Box>
    </Box>
  )
}

function MobileNavItem({
  active,
  href,
  children,
}: {
  active?: boolean
  href?: string
  children: React.ReactNode
}) {
  return (
    <Box
      component="li"
      sx={{
        color: "gray.600",
        width: "100%",
      }}
    >
      <Box
        href={href}
        component="a"
        sx={{
          color: active ? "primary.600" : "gray.600",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          width: "100%",
          height: "100%",
          py: 1,
        }}
      >
        {children}
      </Box>
    </Box>
  )
}

export default function Example() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateColumns: { xs: "1fr", sm: `${SIDEBAR_WIDTH}px 1fr` },
        width: "100%",
        height: "100%",
        minHeight: "100vh",
      }}
    >
      <Sidebar />
      <MobileNav />
      <Box
        sx={{
          p: { xs: 2, sm: 4 },
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          gap: 2,
        }}
      >
        <Typography variant="h1">Dashboard</Typography>
        <Box
          sx={{
            borderWidth: 2,
            borderStyle: "dashed",
            borderRadius: 1,
            borderColor: "gray.200",
            height: "100%",
          }}
        />
      </Box>
    </Box>
  )
}


Sidebar Layouts

Colored sidebar

Grouped sidebar

Floating content section

Sidebar with profile and header

Complex sidebar combining features