Improve Function For Left Menu Button

shaikhyakubhossain · Oct 6, 2023 · 1262736 · 1262736
1 parent d79e14a
commit 1262736
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/src/components/LeftMenu/left-menu.component.jsx b/src/components/LeftMenu/left-menu.component.jsx
@@ -9,13 +9,12 @@ function LeftMenu(props) {
   const mainSection = useRef(null)
 
   const [btnStyle, setBtnStyle] = useState({
-
     background: "rgb(0,0,0)",
     width: "100%",
     // height: "40px",
     justifyContent: "left",
     borderRadius: "10px",
-    padding: "16px 0 14px"
+    padding: "0"
   });
   const [previousElemInBtnList, setPreviousElemInBtnList] = useState(null);
 
@@ -37,18 +36,35 @@ function LeftMenu(props) {
       mainSection.current.className = styles.mainSectionExpand;
       leftMenuMainSectionRow1.forEach((item, index) => {
         mainSection.current.children[0].children[0].children[index].children[0].className = styles.btnContainerMainMax;
+        mainSection.current.children[0].children[0].children[index].children[0].children[0].className = styles.btnIconContainerMax;
+
       });
 
+      // setBtnStyle({
+      //   ...setBtnStyle,
+      //   padding: "0 0 0 12px"
+      // });
+
       console.log(mainSection.current.className);
     }
     if(props.isMaximized){
       mainSection.current.className = styles.mainSectionMinimize;
       leftMenuMainSectionRow1.forEach((item, index) => {
         mainSection.current.children[0].children[0].children[index].children[0].className = styles.btnContainerMainMin;
+        mainSection.current.children[0].children[0].children[index].children[0].children[0].className = styles.btnIconContainerMin;
+
       });
       console.log(mainSection.current.className);
+
+      // setBtnStyle({
+      //   ...setBtnStyle,
+      //   padding: "16px 0 14px 0"
+      // });
+
     }
     console.log(mainSection.current.children[0].children[0].children[2].children[0]);
+
+
   }
 
   // console.log(props.isMaximized);
@@ -67,7 +83,7 @@ function LeftMenu(props) {
                   onClick={(e) => toggleActiveLeftMenuBtn(e)}
                 >
                   <div className={styles.btnContainerMainMax}>
-                    <div className={styles.btnIconContainer}>{item.logo}</div>
+                    <div className={styles.btnIconContainerMax}>{item.logo}</div>
 
                     <div className={styles.btnFontContainer}>
                       <div className={styles.btnFont}>{item.name}</div>

diff --git a/src/components/LeftMenu/left-menu.module.css b/src/components/LeftMenu/left-menu.module.css
@@ -4,7 +4,7 @@
     right: 915.200px;
     bottom: 0;
     left: 0;
-    padding: 1px 5px;
+    padding: 12px;
     width: 224px;
 }
 
@@ -14,12 +14,12 @@
     right: 915.200px;
     bottom: 0;
     left: 0;
-    padding: 1px 5px;
+    padding: 0 4px 0 4px;
     width: 64px;
 }
 
 .btnContainer {
-    padding: 16px 0 14px 11px; 
+    /* padding: 16px 0 14px 11px;  */
 }
 
 .btnContainerMainMax > div{
@@ -28,11 +28,13 @@
 
 .btnContainerMainMax {
     display: flex;
+    height: 40px;
     /* flex-direction: column;  */
     color: white;
     font-family: "Roboto","Arial",sans-serif;
     /* width:100%; */
     /* font-size: 5px; */
+    padding: 0 12px 0 12px;
 }
 
 .btnContainerMainMin {
@@ -43,17 +45,28 @@
     width:100%;
     font-size: 10px;
     /* line-height: 2rem; */
-    /* padding-left: 12px; */
+    padding: 16px 0 14px;
 }
 
-.btnIconContainer{
+.btnIconContainerMin{
     width: 24px;
     height: 24px;
     /* position: absolute;
   top: 50%;
   left: 12%;
   transform: translate(-50%, -42%); */
     margin: auto;
+    /* padding-right: 12px; */
+}
+
+.btnIconContainerMax{
+    width: 24px;
+    height: 24px;
+    /* position: absolute;
+  top: 50%;
+  left: 12%;
+  transform: translate(-50%, -42%); */
+    margin: 0 24px 0 0;
     padding-right: 12px;
 }
 

diff --git a/src/components/Nav/nav.component.jsx b/src/components/Nav/nav.component.jsx
@@ -31,8 +31,8 @@ const Nav = (props) => {
   return (
     <div className={`${styles.mainContainer} ${styles.allContainers}`}>
       <div className={`${styles.leftContainer} ${styles.allContainers}`}>
-        <IconButton>
-          <MenuIcon onClick={props.toggleMinMax} />
+        <IconButton onClick={props.toggleMinMax}>
+          <MenuIcon />
         </IconButton>
         <div className={`${styles.youtubeLogoIcon} ${styles.allContainers}`}>
           <YouTubeIcon fontSize="large" sx={{ color: "red" }} />