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,8 +100,10 @@ export function Menubar({
     <>
       <header className="menubar">
         <div className="left-menu">
+          <div className="menu-items">
             <MainTitle />
-
+          </div>
+          <div className="menu-items">
             <div className="navigation-controls">
               <ButtonGroup variant="outlined" size="small">
                 <Button onClick={() => handleNavigation("prev")}>
@@ -113,7 +115,8 @@ export function Menubar({
                 </Button>
               </ButtonGroup>
             </div>
-
+          </div>
+          <div className="menu-items">
             <div className="current-date-time">
               <Typography variant="h6" component="div">
                 {currentDate.toLocaleDateString("en-US", {
@@ -123,8 +126,9 @@ export function Menubar({
               </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(