[MUI] MUI로 사이드바 만들기

요구사항

Crepe 프로젝트를 진행하며 사이드바를 만들 일이 있었다.

만들어볼 사이드바의 UIUX는 아래와 같다!

 

완성본

완성본은 아래 영상에서 확인할 수 있다.

 

코드

src/index.tsc

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { ProSidebarProvider } from 'react-pro-sidebar';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ProSidebarProvider>
    <App />
    </ProSidebarProvider>
  </React.StrictMode>
);

 

src/componant/sidebar/sidebar.tsx

 

import { Box, Fade } from "@mui/material";
import React from "react";
import {
  Sidebar,
  Menu,
  MenuItem,
  useProSidebar,
  SubMenu,
} from "react-pro-sidebar";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import ArticleIcon from "@mui/icons-material/Article";
import FolderSharedIcon from "@mui/icons-material/FolderShared";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import PersonOutlineIcon from "@mui/icons-material/PersonOutline";

export default function Example() {
  const { collapseSidebar, collapsed } = useProSidebar();

  return (
    <Box sx={{ boxShadow: 1, textOverflow: 'ellipsis', backgroundColor: "#FBFBFB"}}>
      <Sidebar backgroundColor="#FBFBFB">
        <Menu>
          <MenuItem
            icon={<MenuOutlinedIcon />}
            onClick={() => {
              collapseSidebar();
            }}
          ></MenuItem>
          
          {!collapsed && (
            <Fade in={!collapsed} timeout={1200}>
              <Box
                sx={{
                  height: 170,
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Box
                  sx={{
                    width: 85,
                    height: 85,
                    borderRadius: 85,
                    bgcolor: "#000000",
                  }}
                ></Box>
                <Box
                  sx={{
                    color: "black",
                    mt: 2,
                  }}
                >
                  Ellie010707
                </Box>
                <Box
                  sx={{
                    color: "gray",
                    mt: 1,
                    fontSize: 12,
                  }}
                >
                  doris0707@naver.com
                </Box>
              </Box>
            </Fade>
          )}
          <MenuItem icon={<HomeOutlinedIcon />}>Home</MenuItem>
          <SubMenu icon={<FolderSharedIcon />} label="Projects">
            <MenuItem icon={<ArticleIcon />}> Project 1</MenuItem>
            <MenuItem icon={<ArticleIcon />}> Project-Project-Project</MenuItem>
            <MenuItem icon={<AddCircleOutlineIcon />}>Add Project</MenuItem>
          </SubMenu>
          <MenuItem icon={<PersonOutlineIcon />}>My Page</MenuItem>
        </Menu>
      </Sidebar>
    </Box>
  );
}

 

커스텀 내용

1. 유저 정보가 뜰 때 fade in을 해주어 자연스럽게 만들고자 했다.

<Fade in={!collapsed} timeout={1200}>

 

2. <Sidebar>의 기본 투명도를 없애기 위해 배경 색을 설정해주었다.

<Sidebar backgroundColor="#FBFBFB">

 

3. 프로젝트 명은 고정이 아니기 때문에 일정 길이가 되면 범위를 벗어날 수 있어, textOverflow: 'ellipsis' 를 설정해주었다.

    <Box sx={{ boxShadow: 1, textOverflow: 'ellipsis', backgroundColor: "#FBFBFB"}}>