In React js, I have a Header component and a SideBar (Mini variant drawer) component in different files, and only the SideBar drawer is from MUI 5 in dashboard page.
How can I make Header on top of the SideBar or shift the logo to the right in the header when the drawer is opened?

the solutions I found are when the header and sidebar are both from MUI, but I didn’t use MUI in my header, just CSS.

———

How it looks, when closed and opened:

enter image description here

How I wanted it to look:

enter image description here

———

Header css:

.navbar {
  background-color: #e0edbf;
}
.navbar-container {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  background-color: #e0edbf;
  margin: 0 5.5rem;
}
.nav-logo {
  width: 11rem;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 18px;
  font-weight: 300;
}
.nav-menu li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
}

Header:

const Header = () => {
  const theme = useTheme()
  const isMatch = useMediaQuery(theme.breakpoints.down("md"))

  const dispatch: AppDispatch = useDispatch()

  const { isLoggedIn, userData } = useUsersState()
  const { cartItems } = useCartState()

  const handleLogout = () => {
    dispatch(logoutUser())
  }

  return (
    <nav className="navbar">
      <div className="navbar-container">
        <div className="nav-logo">
          <Link to="/">
            <img src={logo} alt="logo" />
          </Link>
        </div>
        {isMatch ? (
          <>
            <div className="nav-xs-cart">
              <div className="nav-login-cart">
                {isLoggedIn && (
                  <>
                    {/* <ul>
                      <li>
                        <Link
                          className="nav__link"
                          to={`/dashboard/${
                            userData && userData.role == "admin" ? "admin" : "user"
                          }`}
                        >
                          {userData && userData.role == "admin" ? "Admin Dashboard" : "My Account"}
                        </Link>
                      </li>
                    </ul> */}
                    <Link className="nav__link" to="/" onClick={handleLogout}>
                      <button>Logout</button>
                    </Link>
                  </>
                )}
                {!isLoggedIn && (
                  <>
                    <Link className="nav__link" to="/login">
                      <button>Login</button>
                    </Link>
                  </>
                )}

                <Link to="/cart">
                  <CartIcon value={cartItems && cartItems.length > 0 ? cartItems.length : 0} />
                </Link>
              </div>

              <DrawerNav />
            </div>
          </>
        ) : (
          <>
            <ul className="nav-menu">
              <li>
                <Link className="nav__link" to="/">
                  Home
                </Link>
              </li>
              <li>
                <Link className="nav__link" to="/products">
                  Products
                </Link>
              </li>
              <li>
                <Link className="nav__link" to="/about">
                  About
                </Link>
              </li>
            </ul>
            <div className="nav-login-cart">
              {isLoggedIn && (
                <>
                  <ul>
                    <li>
                      <Link
                        className="nav__link"
                        to={`/dashboard/${userData && userData.role == "admin" ? "admin" : "user"}`}
                      >
                        {userData && userData.role == "admin" ? "Admin Dashboard" : "My Account"}
                      </Link>
                    </li>
                  </ul>
                  <Link className="nav__link" to="/" onClick={handleLogout}>
                    <button>Logout</button>
                  </Link>
                </>
              )}
              {!isLoggedIn && (
                <>
                  <Link className="nav__link" to="/login">
                    <button>Login</button>
                  </Link>
                </>
              )}

              <Link to="/cart" className="nav-login-cart__cart">
                <CartIcon value={cartItems && cartItems.length > 0 ? cartItems.length : 0} />
              </Link>
            </div>
          </>
        )}
      </div>
    </nav>
  )
}

export default Header

const Index = () => {
  return (
    <BrowserRouter>
      <Header />
      <main>
        <Routes>
          <Route path="/" element={<Home />} />

          <Route path="/dashboard" element={<ProtectedRoute />}>
            <Route path="user" element={<UserDashboard />} />
          </Route>

        </Routes>
      </main>
      <Footer />
    </BrowserRouter>
  )
}

export default Index

user dashboard:

export const UserDashboard = () => {

  return (
    <div className="user-container">
      <UserSidebar />
      <div className="xs main-container">Hello</div>
    </div>
  )
}

sidebar:

const openedMixin = (theme: Theme): CSSObject => ({
  width: drawerWidth,
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.enteringScreen
  }),
  overflowX: "hidden"
})

const closedMixin = (theme: Theme): CSSObject => ({
  transition: theme.transitions.create("width", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen
  }),
  overflowX: "hidden",
  width: `calc(${theme.spacing(7)} + 1px)`,
  [theme.breakpoints.up("sm")]: {
    width: `calc(${theme.spacing(8)} + 1px)`
  }
})

const DrawerHeader = styled("div")(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "flex-end",
  padding: theme.spacing(0, 1),
  // necessary for content to be below app bar
  ...theme.mixins.toolbar
}))

const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(
  ({ theme, open }) => ({
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: "nowrap",
    boxSizing: "border-box",
    ...(open && {
      ...openedMixin(theme),
      "& .MuiDrawer-paper": openedMixin(theme)
    }),
    ...(!open && {
      ...closedMixin(theme),
      "& .MuiDrawer-paper": closedMixin(theme)
    })
  })
)

const UserSidebar = () => {
  const theme = useTheme()
  const [open, setOpen] = React.useState(false)

  return (
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <Drawer variant="permanent" open={open}>
          <DrawerHeader>
            <IconButton onClick={() => setOpen(!open)}>
              {theme.direction === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </DrawerHeader>

          <Divider />

          <List>
            <Link to="/dashboard/user">
              <ListItem disablePadding sx={{ display: "block" }}>
                <ListItemButton
                  sx={{
                    minHeight: 48,
                    justifyContent: open ? "initial" : "center",
                    px: 2.5
                  }}
                >
                  <ListItemIcon
                    sx={{
                      minWidth: 0,
                      mr: open ? 3 : "auto",
                      justifyContent: "center"
                    }}
                  >
                    <DashboardIcon />
                  </ListItemIcon>
                  <ListItemText primary="Dashboard" sx={{ opacity: open ? 1 : 0 }} />
                </ListItemButton>
              </ListItem>
            </Link>
         </List>
        </Drawer>
      </Box>
  )
}
export default UserSidebar