css – Why Drawer from material Ui is taking the whole height and the background is also white

So I was trying to clone the Gmail using React and Material Ui I don’t know why for some reason Material Ui is taking the whole height of the screen and not the required that I wanted. I tried googling about the problem in which I got this link :- material-ui change the height of the drawer which does not help me in this case.
I also tried using debugging using developer tools there IDK for some reason there are coming two div blocks which I haven’t used in my code.

Below is the code :-
SideBar.js

import React from "react";
import { useLocalContext } from "../../context/context";
import SidebarNavBtn, { MeetBtns } from "./SideBarNavBtn";
import styles from "./SideBar.module.css";

import { Drawer, Badge, Avatar } from "@mui/material";

// https://towardsdev.com/use-your-makestyles-7d347f9a3e96
import { makeStyles } from "@material-ui/core/styles";

// Importing Icons from @material-ui/icons
import ChatIcon from "@mui/icons-material/Chat";
import PersonIcon from "@mui/icons-material/Person";

// https://stackoverflow.com/questions/57557271/how-to-use-clsx-in-react
import clsx from "clsx";

const useStyles = makeStyles((theme) => ({
  root: { display: "flex" },

  drawerOpen: {
    width: 256,
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },

  drawerClose: {
    transition: theme.transitions.create("width", {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: "hidden",
    width: theme.spacing(7) + 1,
    [theme.breakpoints.up("sm")]: { width: "70px" },
  },
}));

const Sidebar = ({ children }) => {
  const classes = useStyles();
  const { drawerOpen, currentUser, setComposeOpen } = useLocalContext();
  return (
    <div className={styles.drawerBox}>
      <div className={classes.root}>
        <Drawer
          variant="permanent"
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: drawerOpen,
            [classes.drawerClose]: !drawerOpen,
            backgroundColor: "#red",
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: drawerOpen,
              [classes.drawerClose]: !drawerOpen,
            }),
          }}
        >
          <div
            onClick={() => setComposeOpen(true)}
            className={`${styles.sidebar__compose} ${
              !drawerOpen && "styles.sidebar__composeClose"
            }`}
          >
            <img
              className={styles.sidebar__addIMG}
              src="/assets/PlusImage.png"
              alt="add"
            />
            <p>Compose</p>
          </div>
          <SidebarNavBtn />
          <MeetBtns />

          <div className={styles.sidebar__hangoutsOptions}>
            <div className={styles.sidebar__hangoutsWrapper}>
              <p className={styles.navbar__meetTitle}>Hangouts</p>
              <div className={styles.sidebar__Hangoutsbadge}>
                <Badge
                  anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
                  overlap="circular"
                  color="error"
                  variant="dot"
                >
                  <Avatar className={styles.sidebar__avatarSmall} />
                </Badge>
                <p>{currentUser?.displayName}</p>
              </div>
            </div>
          </div>

          <div className={styles.sidebar__hangoutChats}>
            <div className={styles.sidebar__hangoutImg}></div>
            <p>No recent chats</p>
            <p>Start a new one</p>
          </div>

          <div className={styles.sidebar__footer}>
            <PersonIcon />
            <ChatIcon />
          </div>
        </Drawer>
        {children}
      </div>
    </div>
  );
};

export default Sidebar;

Below is the SideNavBar.js

import React, { useState } from "react";
import { useMailContext } from "../../context/MailContext";
import { useLocalContext } from "../../context/context";
import styles from "./SideBar.module.css";

import Badge from "@mui/material/Badge";

// Importing Icons from @material-ui/icons
import InboxIcon from "@mui/icons-material/Inbox";
import KeyboardIcon from "@mui/icons-material/Keyboard";
import VideocamIcon from "@mui/icons-material/Videocam";

const SidebarNavBtn = () => {
  const { drawerOpen } = useLocalContext();
  const { setMailsType, inboxUnreadNo } = useMailContext();

  const [active, setActive] = useState("inbox");

  const updatePrimaryActive = () => {
    setMailsType("Primary");
    setActive("inbox");
  };
  const sentActive = () => {
    setMailsType("Sent");
    setActive("sent");
  };

  return (
    <div className={styles.sidebar__btns}>
      <div
        className={`${styles.sidebar__btn} ${styles.sidebar__topBtn}  ${
          !drawerOpen && "styles.sidebar__btnClose"
        } ${active === "inbox" && "styles.sidebar__active"}`}
        onClick={updatePrimaryActive}
      >
        <div
          className={`${styles.sidebar__btnLeft} ${
            !drawerOpen && "styles.sidebar__btnLeftClose"
          }`}
        >
          {drawerOpen ? (
            <>
              <InboxIcon className={styles.sidebar__icon} />
              <p>Inbox</p>
            </>
          ) : (
            <Badge badgeContent={0} color="error">
              <InboxIcon className={styles.sidebar__icon} />
            </Badge>
          )}
        </div>
        <div
          className={`${styles.sidebar__unread} ${
            !drawerOpen && "styles.sidebar__unreadClose"
          }`}
        >
          <p>{inboxUnreadNo}</p>
        </div>
      </div>

      <div
        onClick={sentActive}
        className={`${styles.sidebar__btn} ${styles.sidebar__topBtn}  ${
          !drawerOpen && "styles.sidebar__btnClose"
        }  ${active === "sent" && "styles.sidebar__active"}`}
      >
        <div
          className={`${styles.sidebar__btnLeft} ${
            !drawerOpen && "styles.sidebar__btnLeftClose"
          }`}
        >
          {drawerOpen ? (
            <>
              <InboxIcon className={styles.sidebar__icon} />
              <p>Sent</p>
            </>
          ) : (
            <Badge badgeContent={0} color="error">
              <InboxIcon className={styles.sidebar__icon} />
            </Badge>
          )}
        </div>
      </div>

      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
      <SideDummyButtons />
    </div>
  );
};

export default SidebarNavBtn;

const SideDummyButtons = () => {
  const { drawerOpen } = useLocalContext();

  return (
    <div
      className={`${styles.sidebar__btn} ${styles.sidebar__topBtn}  ${
        !drawerOpen && "styles.sidebar__btnClose"
      }`}
    >
      <div
        className={`${styles.sidebar__btnLeft} ${
          !drawerOpen && "styles.sidebar__btnLeftClose"
        }`}
      >
        {drawerOpen ? (
          <>
            <InboxIcon className={styles.sidebar__icon} />
            <p>Inbox</p>
          </>
        ) : (
          <Badge badgeContent={0} color="error">
            <InboxIcon className={styles.sidebar__icon} />
          </Badge>
        )}
      </div>
    </div>
  );
};

export function MeetBtns() {
  const { drawerOpen } = useLocalContext();
  return (
    <div className={styles.navabr__meetOptions}>
      <p className={styles.navbar__meetTitle}>Meet</p>
      <div
        className={`${styles.sidebar__btn} ${styles.sidebar__topBtn}  ${
          !drawerOpen && "styles.sidebar__btnClose"
        }`}
      >
        <div
          className={`${styles.sidebar__btnLeft} ${
            !drawerOpen && "styles.sidebar__btnLeftClose"
          }`}
        >
          {drawerOpen ? (
            <>
              <VideocamIcon className={styles.sidebar__icon} />
              <p>New Meeting</p>
            </>
          ) : (
            <VideocamIcon className={styles.sidebar__icon} />
          )}
        </div>
      </div>

      <div
        className={`${styles.sidebar__btn} ${styles.sidebar__topBtn}  ${
          !drawerOpen && "styles.sidebar__btnClose"
        }`}
      >
        <div
          className={`${styles.sidebar__btnLeft} ${
            !drawerOpen && "styles.sidebar__btnLeftClose"
          }`}
        >
          {drawerOpen ? (
            <>
              <KeyboardIcon className={styles.sidebar__icon} />
              <p>Join a meeting</p>
            </>
          ) : (
            <KeyboardIcon className={styles.sidebar__icon} />
          )}
        </div>
      </div>
    </div>
  );
}

These are the two div blocks that I think may cause the problem which i don’t know from where they are coming :- picture

In case if someone needs the css file also then below is the css file:-

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans&family=Roboto:wght@500&display=swap");

.drawerBox {
  margin-top: 30px !important;
}

.MuiDrawer-paperAnchorDockedLeft {
  margin-top: 70px !important;
  background: transparent !important;
  border: none !important;
}

.sidebar__compose {
  display: flex;
  align-items: center;
  background-color: white;
  margin: 20px;
  margin-left: 12px;
  margin-top: 12px;
  border-radius: 30px;
  padding: 5px !important;
  width: 135px !important;
  height: 40px !important;
  cursor: pointer;
}

.sidebar__addIMG {
  margin-right: 15px;
  margin-left: 5px;
}

.sidebar__compose > p {
  font-family: "Roboto";
  font-weight: 500 !important;
  letter-spacing: 1px;
}

.sidebar__composeClose {
  width: 45px !important;
  height: 45px !important;
}

.sidebar__btns {
  max-height: 350px;
  height: 150px;
  min-height: 100px;
  overflow: auto;
}

.sidebar__btn {
  display: flex;
  align-items: center;
  width: 90%;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  height: 30px;
  justify-content: space-between;
  cursor: pointer;
  margin-top: 0px !important;
}

.sidebar__topBtn {
  margin-top: 7px;
}

.sidebar__btnClose {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  margin-left: 20px;
  margin-top: -5px;
  width: 30px;
  height: 30px;
}

.sidebar__icon {
  color: #cdd1d5;
}

.sidebar__btnLeft {
  display: flex;
  margin-left: 20px;
  align-items: center;
  justify-content: space-between;
}

.sidebar__btnLeft > p {
  margin-left: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}

.sidebar__active {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.sidebar__unread {
  margin-right: 10px;
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 0.75rem;
}

.sidebar__btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.sidebar__btns::-webkit-scrollbar {
  width: 10px;
}

.sidebar__btns::-webkit-scrollbar-thumb {
  background: #637589;
  display: none;
}

.sidebar__btns::-webkit-scrollbar-thumb:hover {
  background: #d9dde2 !important;
}

.sidebar__btns:hover::-webkit-scrollbar-thumb {
  background: #637589;
  display: block;
}

.navabr__meetOptions {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin-bottom: 10px;
}

.navbar__meetTitle {
  font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.25px;
  border-radius: 0;
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  line-height: 32px;
  max-height: 32px;
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sidebar__hangoutsOptions {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sidebar__Hangoutsbadge {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: 20px;
}

.sidebar__Hangoutsbadge > p {
  margin-left: 5px;
  color: white;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
}

.MuiBadge-dot {
  top: 17px;
  background-color: #35ab19 !important;
}

.sidebar__avatarSmall {
  width: 28px !important;
  height: 28px !important;
}

.sidebar__hangoutChats {
  width: 216px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sidebar__hangoutImg {
  background: no-repeat
  url("http://ssl.gstatic.com/chat/babble/sprites/common-517bca7f07a37c64c3263a1411e266a5.png") -649px -108px;
  width: 72px;
  height: 72px;
  margin-top: 20px;
  color: #eee;
  text-shadow: rgba(0, 0, 0, 0.4) 0 0 4px;
}

.sidebar__hangoutChats > p {
  color: #eee;
  text-shadow: rgba(0, 0, 0, 0.4) 0 0 4px;
  text-align: center;
  font-size: 13px;
  margin-top: 10px;
}

.sidebar__footer {
  position: absolute;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  bottom: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 5px;
}

.sidebar__footer > * {
  color: white;
  margin-right: 10px;
  cursor: pointer;
}

.sidebar__btnLeftClose {
  margin-left: 4px;
  padding: 1px !important;
}
.sidebar__btnLeftClose > p {
  display: none;
}
.sidebar__unreadClose {
  display: none;
}

Especially they second one because when I delete the class names of second div I got my output.
Any help will be appreciated.

Leave a Comment Cancel reply