UI: adjust main layout

src/components/Calendar/Calendar.css

@@ -25,7 +25,7 @@
 }
 .sidebar {
   border-right: 2px solid #f3f4f6;
-  width: 20vw;
+  width: 330px;
   padding: 16px 25px;
   height: 90vh;
   flex-direction: column;

src/components/Menubar/Menubar.css

@@ -49,6 +49,7 @@
 .menubar-item {
   display: flex;
   align-items: center;
+  width: calc(330px - .5rem);
 }
 
 .logo {
@@ -97,4 +98,10 @@
 .left-menu {
   display: flex;
   align-items: center;
+  justify-content: flex-start;
+}
+.right-menu {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }

src/components/Menubar/Menubar.tsx

@@ -100,31 +100,35 @@ export function Menubar({
     <>
       <header className="menubar">
         <div className="left-menu">
-          <MainTitle />
+          <div className="menu-items">
-
+            <MainTitle />
-          <div className="navigation-controls">
-            <ButtonGroup variant="outlined" size="small">
-              <Button onClick={() => handleNavigation("prev")}>
-                <ChevronLeftIcon />
-              </Button>
-              <Button onClick={() => handleNavigation("today")}>Today</Button>
-              <Button onClick={() => handleNavigation("next")}>
-                <ChevronRightIcon />
-              </Button>
-            </ButtonGroup>
           </div>
-
+          <div className="menu-items">
-          <div className="current-date-time">
+            <div className="navigation-controls">
-            <Typography variant="h6" component="div">
+              <ButtonGroup variant="outlined" size="small">
-              {currentDate.toLocaleDateString("en-US", {
+                <Button onClick={() => handleNavigation("prev")}>
-                month: "long",
+                  <ChevronLeftIcon />
-                year: "numeric",
+                </Button>
-              })}
+                <Button onClick={() => handleNavigation("today")}>Today</Button>
-            </Typography>
+                <Button onClick={() => handleNavigation("next")}>
+                  <ChevronRightIcon />
+                </Button>
+              </ButtonGroup>
+            </div>
+          </div>
+          <div className="menu-items">
+            <div className="current-date-time">
+              <Typography variant="h6" component="div">
+                {currentDate.toLocaleDateString("en-US", {
+                  month: "long",
+                  year: "numeric",
+                })}
+              </Typography>
+            </div>
           </div>
         </div>
         <div className="right-menu">
-          <div className="menubar-item">
+          <div className="menu-items">
             <FormControl size="small" sx={{ minWidth: 120, mr: 2 }}>
               <Select
                 value={currentView}
@@ -136,13 +140,15 @@ export function Menubar({
                 <MenuItem value="timeGridDay">Day</MenuItem>
               </Select>
             </FormControl>
-
+          </div>
+          <div className="menu-items">
             {applist.length > 0 && (
               <IconButton onClick={handleOpen} sx={{ mr: 1 }}>
                 <AppsIcon />
               </IconButton>
             )}
-
+          </div>
+          <div className="menu-items">
             <Avatar
               sx={{
                 bgcolor: stringToColor(