first commit

src/component/Frame/NavBar/SideNavItem.tsx

@@ -0,0 +1,77 @@
+import { Box, ButtonBase, darken, lighten, styled } from "@mui/material";
+import * as React from "react";
+import { NoWrapTypography } from "../../Common/StyledComponents.tsx";
+
+const StyledButtonBase = styled(ButtonBase)<{
+  active?: boolean;
+}>(({ theme, active }) => ({
+  borderRadius: "90px",
+  display: "flex",
+  justifyContent: "left",
+  alignItems: "initial",
+  width: "100%",
+  backgroundColor: active
+    ? `${
+        theme.palette.mode == "light"
+          ? lighten(theme.palette.primary.main, 0.7)
+          : darken(theme.palette.primary.main, 0.7)
+      }!important`
+    : "initial",
+  transition:
+    "background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+}));
+
+export interface SideNavItemBaseProps {
+  active?: boolean;
+  [key: string]: any;
+}
+export const SideNavItemBase = React.forwardRef(
+  ({ active, ...rest }: SideNavItemBaseProps, ref: React.Ref<HTMLElement>) => {
+    return <StyledButtonBase active={active} {...rest} ref={ref} />;
+  },
+);
+
+const StyledSideNavItem = styled(SideNavItemBase)<{ level?: number }>(({ theme, level }) => ({
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover,
+  },
+  padding: "4px",
+  paddingLeft: `${28 + (level ?? 0) * 16}px`,
+  height: "32px",
+  display: "flex",
+  alignItems: "center",
+}));
+
+export interface SideNavItemProps extends SideNavItemBaseProps {
+  icon?: React.ReactNode;
+  label?: string | React.ReactNode;
+  level?: number;
+  [key: string]: any;
+}
+
+const SideNavItem = React.forwardRef(
+  ({ icon, label, level, sx, ...rest }: SideNavItemProps, ref: React.Ref<HTMLElement>) => {
+    return (
+      <StyledSideNavItem
+        level={level}
+        sx={{
+          ...sx,
+        }}
+        {...rest}
+        ref={ref}
+      >
+        <Box
+          sx={{
+            width: 20,
+            mr: "14px",
+          }}
+        >
+          {icon}
+        </Box>
+        <NoWrapTypography variant={"body2"}>{label}</NoWrapTypography>
+      </StyledSideNavItem>
+    );
+  },
+);
+
+export default SideNavItem;