From 498837351b64fdce1e8c9416f788a1a05e3aedc0 Mon Sep 17 00:00:00 2001
From: RismanRJ <rismanshanker21@gmail.com>
Date: Wed, 16 Jul 2025 21:37:51 +0530
Subject: [PATCH 1/5] Feature: Added Responsive Sidebar Menu UI

---
 .../molecules/menus/side-menu/side-menu.tsx   | 101 ++++++++++--------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
index c7d580105..22e75964a 100644
--- a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
+++ b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
@@ -1,19 +1,24 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { MenuList, MenuItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
+import { makeStyles, useTheme } from '@material-ui/core/styles'
+import { MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useMediaQuery, Tooltip, IconButton } from '@material-ui/core'
 import logo from 'images/gitpay-logo.png'
+import responsiveLogo from 'images/logo-symbol.png'
 import {
   Logo,
   StyledButton
 } from '../../../organisms/layouts/topbar/TopbarStyles'
 import ReactPlaceholder from 'react-placeholder'
 import SideMenuPlaceholder from './side-menu.placeholder'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 const useStyles = makeStyles((theme) => ({
-  sidePaper: {
+  sidePaper: (props: { collapsed: boolean }) => ({
     backgroundColor: '#2c5c46',
-    height: '100%'
-  },
+    height: '100%',
+    width: props.collapsed && 70 ,
+    transition: 'width 0.3s ease',
+  }),
   row: {
     display: 'flex',
     justifyContent: 'center'
@@ -130,47 +135,49 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   completed,
   menuItems
 }) => {
-  const classes = useStyles()
   const [selected, setSelected] = useState(0)
+  const theme = useTheme()
+  const [collapsed, setCollapsed] = useState(false)
+  const classes = useStyles({collapsed});
 
   return (
     <div className={classes.sidePaper}>
-      <div>
-        <div className={classes.profile}>
-          <div style={{ display: 'flex', justifyContent: 'center', padding: 20, paddingBottom: 0 }}>
-            <StyledButton href="/">
-              <Logo src={logo} />
-            </StyledButton>
-          </div>
-          <div className={classes.row}>
-            <div style={{
-              display: 'flex',
-              flexDirection: 'column',
-              flex: 1,
-              padding: '5px 20px'
-            }}>
-              <ReactPlaceholder
-                ready={completed}
-                customPlaceholder={<SideMenuPlaceholder />}
-              >
+      <div className={classes.profile}>
+        <div style={{ display: 'flex', justifyContent: 'center', padding: 20, paddingBottom: 0 }}>
+          <StyledButton href="/" >
+            <Logo src={!collapsed?logo:responsiveLogo} style={{
+              width:collapsed&&'50px',
+            }}  />
+             
+          </StyledButton>
+        </div>
+        <div className={classes.row}>
+          <div style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '5px 20px', position:'relative', zIndex:1 }}>
+            <ReactPlaceholder ready={completed} customPlaceholder={<SideMenuPlaceholder />}>
+        
+            <IconButton onClick={() => setCollapsed(!collapsed)} style={{ color: 'white' , width:'30px',height:'30px', position:'absolute', right:0,top:-10, fontWeight:'bold',
+              fontSize:'15px',padding:'3px', zIndex:5,backgroundColor:"#d3d3d3"}}>
+              {!collapsed?<ChevronLeftIcon color='primary' /> : <ChevronRightIcon color='primary' />}
+            </IconButton>
+       
               <MenuList>
                 {menuItems.map((section, sectionIndex) => (
                   <div key={`section-${sectionIndex}`}>
-                    {section.category && (
-                    <Typography
-                      variant="caption"
-                      style={{
-                        color: "rgba(255, 255, 255, 0.5)",
-                        fontSize: "0.58rem",
-                        textTransform: "uppercase",
-                        fontWeight: 600,
-                        marginTop: sectionIndex === 0 ? 0 : 16,
-                        marginBottom: 16,
-                        paddingLeft: 16
-                      }}
-                    >
-                      {section.category}
-                    </Typography>
+                    {section.category  && (
+                      <Typography
+                        variant="caption"
+                        style={{
+                          color: "rgba(255, 255, 255, 0.5)",
+                          fontSize: "0.58rem",
+                          textTransform: "uppercase",
+                          fontWeight: 600,
+                          marginTop: sectionIndex === 0 ? 0 : 16,
+                          marginBottom: 16,
+                          paddingLeft: 16
+                        }}
+                      >
+                        {section.category}
+                      </Typography>
                     )}
                     {section.items.map((item, index) => (
                       item.include && (
@@ -180,16 +187,24 @@ export const SideMenu: React.FC<SideMenuProps> = ({
                           className={classes.menuItem}
                           selected={item.selected}
                         >
-                          <ListItemIcon className={classes.icon}><>{item.icon}</></ListItemIcon>
-                          <ListItemText classes={{ primary: classes.primary }} primary={item.label} />
+                          <Tooltip title={item.label} placement="right" disableHoverListener={!collapsed}>
+                          <ListItemIcon className={classes.icon}>
+                            <>{item.icon}</>
+                          </ListItemIcon>
+                          </Tooltip>
+                          {!collapsed && (
+                            <ListItemText
+                              classes={{ primary: classes.primary }}
+                              primary={item.label}
+                            />
+                          )}
                         </MenuItem>
                       )
                     ))}
                   </div>
                 ))}
               </MenuList>
-              </ReactPlaceholder>
-            </div>
+            </ReactPlaceholder>
           </div>
         </div>
       </div>

From 6a70324ed7e516c041d4eb68459a7be83eb4dbc4 Mon Sep 17 00:00:00 2001
From: RismanRJ <rismanshanker21@gmail.com>
Date: Wed, 16 Jul 2025 21:44:09 +0530
Subject: [PATCH 2/5] Feature: Added Responsive Sidebar Menu UI

---
 .../design-library/molecules/menus/side-menu/side-menu.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
index 22e75964a..4a1221d07 100644
--- a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
+++ b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
@@ -157,6 +157,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         
             <IconButton onClick={() => setCollapsed(!collapsed)} style={{ color: 'white' , width:'30px',height:'30px', position:'absolute', right:0,top:-10, fontWeight:'bold',
               fontSize:'15px',padding:'3px', zIndex:5,backgroundColor:"#d3d3d3"}}>
+                
               {!collapsed?<ChevronLeftIcon color='primary' /> : <ChevronRightIcon color='primary' />}
             </IconButton>
        

From 031dd2cf7836ee494dceefb41a37dc8eb84c70f0 Mon Sep 17 00:00:00 2001
From: RismanRJ <rismanshanker21@gmail.com>
Date: Wed, 16 Jul 2025 21:59:48 +0530
Subject: [PATCH 3/5] Removed unused variables

---
 .../molecules/menus/side-menu/side-menu.tsx            | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
index 4a1221d07..cf8ea4ac2 100644
--- a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
+++ b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { makeStyles, useTheme } from '@material-ui/core/styles'
-import { MenuList, MenuItem, ListItemIcon, ListItemText, Typography, useMediaQuery, Tooltip, IconButton } from '@material-ui/core'
+import { MenuList, MenuItem, ListItemIcon, ListItemText, Typography, Tooltip, IconButton } from '@material-ui/core'
 import logo from 'images/gitpay-logo.png'
 import responsiveLogo from 'images/logo-symbol.png'
 import {
@@ -17,7 +17,7 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: '#2c5c46',
     height: '100%',
     width: props.collapsed && 70 ,
-    transition: 'width 0.3s ease',
+    transition: 'width 0.3s ease'
   }),
   row: {
     display: 'flex',
@@ -135,8 +135,6 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   completed,
   menuItems
 }) => {
-  const [selected, setSelected] = useState(0)
-  const theme = useTheme()
   const [collapsed, setCollapsed] = useState(false)
   const classes = useStyles({collapsed});
 
@@ -146,7 +144,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         <div style={{ display: 'flex', justifyContent: 'center', padding: 20, paddingBottom: 0 }}>
           <StyledButton href="/" >
             <Logo src={!collapsed?logo:responsiveLogo} style={{
-              width:collapsed&&'50px',
+              width:collapsed&&'50px'
             }}  />
              
           </StyledButton>
@@ -158,7 +156,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
             <IconButton onClick={() => setCollapsed(!collapsed)} style={{ color: 'white' , width:'30px',height:'30px', position:'absolute', right:0,top:-10, fontWeight:'bold',
               fontSize:'15px',padding:'3px', zIndex:5,backgroundColor:"#d3d3d3"}}>
                 
-              {!collapsed?<ChevronLeftIcon color='primary' /> : <ChevronRightIcon color='primary' />}
+              {!collapsed?<ChevronLeftIcon color="primary" /> : <ChevronRightIcon color="primary" />}
             </IconButton>
        
               <MenuList>

From 84e3e8cb5fb3caa9297f70dfb6bcb1e6261261cf Mon Sep 17 00:00:00 2001
From: RismanRJ <rismanshanker21@gmail.com>
Date: Sun, 27 Jul 2025 10:58:35 +0530
Subject: [PATCH 4/5] Sync with master branch

---
 .../molecules/menus/side-menu/side-menu.tsx              | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
index 9049852e5..f9fa194a5 100644
--- a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
+++ b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
@@ -16,13 +16,12 @@ import ReactPlaceholder from 'react-placeholder'
 import SideMenuPlaceholder from './side-menu.placeholder'
 import SideMenuItems from './side-menu-items'
 
+
 const useStyles = makeStyles((theme) => ({
-  sidePaper: (props: { collapsed: boolean }) => ({
+  sidePaper: {
     backgroundColor: '#2c5c46',
-    height: '100%',
-    width: props.collapsed && 70 ,
-    transition: 'width 0.3s ease'
-  }),
+    height: '100%'
+    },
   row: {
     display: 'flex',
     justifyContent: 'center',

From 5e2948e60aaac9160d0a47b3d7bc3b276841b166 Mon Sep 17 00:00:00 2001
From: RismanRJ <rismanshanker21@gmail.com>
Date: Sun, 27 Jul 2025 11:03:11 +0530
Subject: [PATCH 5/5] Removed unused imports

---
 .../design-library/molecules/menus/side-menu/side-menu.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
index f9fa194a5..eeff62600 100644
--- a/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
+++ b/frontend/src/components/design-library/molecules/menus/side-menu/side-menu.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import logo from 'images/gitpay-logo.png'
-import responsiveLogo from 'images/logo-symbol.png'
 import {
   IconHamburger,
   LeftSide,