From 817c5999a267f075f7c4bdd786c40a369de247c4 Mon Sep 17 00:00:00 2001
From: HeetVekariya <91054457+HeetVekariya@users.noreply.github.com>
Date: Sun, 12 Nov 2023 15:04:23 +0530
Subject: [PATCH] refactor: sidebar interaction by onclick (#751)

# Fixes Issue:
- Issue: #748
- Change Side Menu Behavior to Open on Click Instead of on Hover

<br>

# Changes made:
- Refactored code to interact with sidebar using `onClick` instead
`onHover`

<br>

# Files changed:
- **menu.tsx** (frontend/webapp/components/side.menu/menu/menu.tsx)
- **menu.styled.tsx**
(frontend/webapp/components/side.menu/menu/menu.styled.tsx)

<br>

- [x] Tested the code

---------

Co-authored-by: Alon Braymok <138359965+alonkeyval@users.noreply.github.com>
---
 .../components/side.menu/menu/menu.styled.tsx   |  9 ++++-----
 .../webapp/components/side.menu/menu/menu.tsx   | 17 ++++++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/frontend/webapp/components/side.menu/menu/menu.styled.tsx b/frontend/webapp/components/side.menu/menu/menu.styled.tsx
index e33ea7fba..95ef7ca46 100644
--- a/frontend/webapp/components/side.menu/menu/menu.styled.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.styled.tsx
@@ -1,16 +1,15 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div`
-  width: 70px;
+export const MenuContainer = styled.div<{ $isExpanded?: boolean; }>`
   transition: width 0.1s;
   height: 100%;
   border-right: 1px solid rgba(255, 255, 255, 0.04);
   background: ${({ theme }) => theme.colors.dark_blue};
-  &:hover {
-    width: 234px;
-  }
+  width: ${({$isExpanded}) => $isExpanded ? 234 : 70}px;
 `;
+
 export const LogoWrapper = styled.div`
+  cursor: pointer;
   padding: 24px 16px;
   height: 48px;
   position: relative;
diff --git a/frontend/webapp/components/side.menu/menu/menu.tsx b/frontend/webapp/components/side.menu/menu/menu.tsx
index 30b55a1f0..5566789a7 100644
--- a/frontend/webapp/components/side.menu/menu/menu.tsx
+++ b/frontend/webapp/components/side.menu/menu/menu.tsx
@@ -27,7 +27,7 @@ export function Menu() {
   const [currentMenuItem, setCurrentMenuItem] = useState<MenuItem>(
     MENU_ITEMS[0]
   );
-  const [isHovered, setIsHovered] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const router = useRouter();
 
   useEffect(onLoad, []);
@@ -54,15 +54,17 @@ export function Menu() {
         onClick={() => handleMenuItemClick(item)}
         focused={currentMenuItem?.id === item.id}
         item={item}
-        expand={isHovered}
+        expand={isExpanded}
       />
     ));
   }
 
   function renderMenuLogo() {
     return (
-      <LogoWrapper>
-        {isHovered ? (
+      <LogoWrapper 
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {isExpanded ? (
           <KeyvalText size={32} weight={700}>
             {OVERVIEW.ODIGOS}
           </KeyvalText>
@@ -76,16 +78,13 @@ export function Menu() {
   function renderContactUsButton() {
     return (
       <ContactUsWrapper>
-        <ContactUsButton expand={isHovered} />
+        <ContactUsButton expand={isExpanded} />
       </ContactUsWrapper>
     );
   }
 
   return (
-    <MenuContainer
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+    <MenuContainer $isExpanded={isExpanded} >
       {renderMenuLogo()}
       <MenuItemsWrapper>{renderMenuItemsList()}</MenuItemsWrapper>
       {renderContactUsButton()}