MUIのDrawerについて聞ける人を募集

【教えてもらいたいこと】
プログラミング/フロントエンド

【具体的な相談内容】
現在、React,Tailwindでフロントの作成をしています。
LeftNavigationBarを作成しているのですが、それをMUIを使ってボタンや画面幅を使って開閉できるようにしたいです。
その際に真ん中のところが横に押し出されるようにしたりとか、真ん中のところが薄暗くならないようにしたいです。

そこの部分について詳しい方がおられましたらビデオ通話にて教えていただきたいです。

一時間５０００円でお願いできればと思います。何卒宜しくお願い致します。

サイト
https://enterprizegai.netlify.app/

コード一部


import { FunctionComponent, useState, useEffect } from "react";
import Header from "../components/Header";
import Leftbar from "../components/Leftbar";
import Center from "../components/Center";
import Rightbar from "../components/Rightbar";
import Subheader from "../components/Subheader";
import { useTheme } from "@mui/material/styles";
import { Drawer, useMediaQuery } from "@mui/material";

const drawerWidth = 240;

const Desktop: FunctionComponent = () => {
const [selectedText, setSelectedText] = useState("");
const [isLeftbarOpen, setIsLeftbarOpen] = useState<boolean>(true);
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down("md"));

const handleDrawerToggle = () => {
setIsLeftbarOpen(!isLeftbarOpen);
};

return (
<div className="overflow-hidden h-[100vh] w-full relative bg-white flex flex-col items-start justify-start">
<Header />
<div className="self-stretch flex flex-row items-start justify-between">
<Drawer
variant="persistent"
open={isLeftbarOpen}
sx={{
width: drawerWidth,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: drawerWidth,
},
}}
ModalProps={{
keepMounted: true,
BackdropProps: {
style: {
backgroundColor: "transparent",
},
},
}}
>
<Leftbar
setSelectedText={setSelectedText}
setIsLeftbarOpen={setIsLeftbarOpen}
/>
</Drawer>
<div
className={`self-stretch grow flex-col transition-margin duration-300 ease-in-out ${
isLeftbarOpen ? "ml-[240px]" : "ml-0"
}`}
>
<Subheader />
<Center
selectedText={selectedText}
setSelectedText={setSelectedText}
setIsLeftbarOpen={setIsLeftbarOpen}
isLeftbarOpen={isLeftbarOpen}
/>
</div>
<Rightbar />
</div>
</div>
);
};

export default Desktop;
【目安予算】
10000円