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
# Changes made:
- Refactored code to interact with sidebar using `onClick` instead
`onHover`
# Files changed:
- **menu.tsx** (frontend/webapp/components/side.menu/menu/menu.tsx)
- **menu.styled.tsx**
(frontend/webapp/components/side.menu/menu/menu.styled.tsx)
- [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