sidebar position fixed

src/App.tsx

@@ -17,6 +17,7 @@ import {
   SidebarUserObj,
 } from "./components/sidebar/SidebarUser";
 import MeetingDetails from "./components/meeting-details/MeetingDetails";
+import { Box } from "@mui/material";
 
 const App: React.FC = () => {
   const [meetingInfoOpen, setMeetingInfoOpen] = useState(false);
@@ -49,8 +50,9 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={Theme}>
       <Router>
-        <Sidebar users={sidebarUsers} />
         <Navbar />
+        <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+          <Box sx={{ flexGrow: 1 }}>
             <Routes>
               <Route path="/" element={<Home />} />
               <Route
@@ -59,6 +61,11 @@ const App: React.FC = () => {
               />
               <Route path="/calendar" element={<Calendar />} />
             </Routes>
+          </Box>
+          <Box>
+            <Sidebar users={sidebarUsers} />
+          </Box>
+        </Box>
         <MeetingDetails open={meetingInfoOpen} setOpen={setMeetingInfoOpen} />
       </Router>
     </ThemeProvider>

src/components/contacts/contacts-components/body-components/UpperBody.tsx

@@ -5,7 +5,6 @@ import VideocamIcon from "@mui/icons-material/Videocam";
 import GroupsIcon from "@mui/icons-material/Groups";
 import ContactInfo from "../../ContactInfo";
 import AddIcon from "@mui/icons-material/Add";
-import { textAlign } from "@mui/system";
 
 interface Props {
   contactInfo: ContactInfo;

src/components/home/Meeting.tsx

@@ -1,6 +1,10 @@
-function Meeting(props: any) {
+interface Props {
-    return (
+  meetingName: string;
+  meetingTime: string;
+}
 
+function Meeting(props: Props) {
+  return (
     <div className="row meeting">
       <div className="col-12">
         <div className="row">
@@ -12,6 +16,6 @@ function Meeting(props: any) {
       </div>
     </div>
   );
-  };
+}
 
 export default Meeting;

src/components/home/ShortCuts.tsx

@@ -1,7 +1,7 @@
-import PeopleIcon from '@mui/icons-material/People';
+import PeopleIcon from "@mui/icons-material/People";
-import AddIcon from '@mui/icons-material/Add';
+import AddIcon from "@mui/icons-material/Add";
-import PhoneEnabledIcon from '@mui/icons-material/PhoneEnabled';
+import PhoneEnabledIcon from "@mui/icons-material/PhoneEnabled";
-import CircleIcon from '@mui/icons-material/Circle';
+import CircleIcon from "@mui/icons-material/Circle";
 import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
 

src/components/sidebar/Sidebar.tsx

@@ -1,13 +1,20 @@
-import { Divider, Drawer, List, ListItem, ListSubheader } from "@mui/material";
+import {
+  Divider,
+  Drawer,
+  List,
+  ListItem,
+  ListSubheader,
+  Toolbar,
+} from "@mui/material";
 import GroupSelect from "./GroupSelect";
 import SidebarUser, { SidebarUserObj } from "./SidebarUser";
 
 // TODO: toolbar on top of sidebar since it goes under the navbar
 
-const drawerWidth = 240;
+const drawerWidth = 200;
 
 interface Props {
-  users: SidebarUserObj[],
+  users: SidebarUserObj[];
 }
 
 const Sidebar: React.FC<Props> = ({ users }: Props) => {
@@ -15,15 +22,14 @@ const Sidebar: React.FC<Props> = ({ users }: Props) => {
     <Drawer
       sx={{
         width: drawerWidth,
-        flexShrink: 0,
         "& .MuiDrawer-paper": {
           width: drawerWidth,
-          boxSizing: "border-box",
         },
       }}
       variant="permanent"
       anchor="right"
     >
+      <Toolbar />
       <List disablePadding sx={{ height: "80%", overflow: "auto" }}>
         <ListSubheader disableGutters>
           <GroupSelect />