Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: sidebar interaction by onclick #751

Merged
merged 7 commits into from
Nov 12, 2023
Merged

refactor: sidebar interaction by onclick #751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c1c3fda
refactor: sidebar interaction by onclick
HeetVekariya Nov 9, 2023
302622d
refactor: prop name to isExpanded
HeetVekariya Nov 9, 2023
3e48340
refactor: pass the prop as docs
HeetVekariya Nov 9, 2023
0f826ff
refactor: remove condition on width
HeetVekariya Nov 12, 2023
d82d90d
refactor: remove duplicate code
HeetVekariya Nov 12, 2023
78b7412
refactor: add cursor pointer to logo
HeetVekariya Nov 12, 2023
d6bee51
Merge branch 'main' into feat/sidebar-on-click
alonkeyval Nov 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions frontend/webapp/components/side.menu/menu/menu.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
HeetVekariya marked this conversation as resolved.
Show resolved Hide resolved
`;

export const LogoWrapper = styled.div`
cursor: pointer;
padding: 24px 16px;
height: 48px;
HeetVekariya marked this conversation as resolved.
Show resolved Hide resolved
position: relative;
Expand Down
17 changes: 8 additions & 9 deletions frontend/webapp/components/side.menu/menu/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, []);
Expand All @@ -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>
Expand All @@ -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()}
Expand Down