From 327bbc4da3baab04138a276944db0ccf548b8c82 Mon Sep 17 00:00:00 2001 From: Celine Choi Date: Sun, 27 Oct 2024 02:19:54 -0700 Subject: [PATCH] feat: expanding menu bar --- components/ExpandingMenu/ExpandingMenu.tsx | 77 ++++++++++++++++++++++ components/ExpandingMenu/styles.ts | 65 ++++++++++++++++++ public/images/availabilities.svg | 3 + public/images/menu.svg | 3 + public/images/settings.svg | 3 + public/images/upcoming-events.svg | 3 + styles/colors.ts | 2 + styles/text.ts | 2 +- 8 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 components/ExpandingMenu/ExpandingMenu.tsx create mode 100644 components/ExpandingMenu/styles.ts create mode 100644 public/images/availabilities.svg create mode 100644 public/images/menu.svg create mode 100644 public/images/settings.svg create mode 100644 public/images/upcoming-events.svg diff --git a/components/ExpandingMenu/ExpandingMenu.tsx b/components/ExpandingMenu/ExpandingMenu.tsx new file mode 100644 index 0000000..8a4d32b --- /dev/null +++ b/components/ExpandingMenu/ExpandingMenu.tsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; +import Availability from '@/public/images/availabilities.svg'; +import Events from '@/public/images/upcoming-events.svg'; +import Settings from '@/public/images/settings.svg'; +import { MenuContainer, ToggleButton, MenuItem, MenuLabel, MenuIconWrapper, Icon } from './styles'; + +const ExpandingMenu: React.FC = () => { + const [expanded, setExpanded] = useState(false); + const [activeItem, setActiveItem] = useState(null); + + const toggleMenu = () => setExpanded(!expanded); + + // TODO: add navigation by passing in path prop + const handleClick = (item: string) => { + setActiveItem(item); + }; + + return ( + + + + + + + + + {expanded && ( + <> + handleClick('availabilities')} + > + + + Availabilities + + + handleClick('events')} + > + + + Upcoming Events + + + handleClick('settings')} + > + + + Profile & Settings + + + + )} + + ); +}; + +export default ExpandingMenu; \ No newline at end of file diff --git a/components/ExpandingMenu/styles.ts b/components/ExpandingMenu/styles.ts new file mode 100644 index 0000000..6368f10 --- /dev/null +++ b/components/ExpandingMenu/styles.ts @@ -0,0 +1,65 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import Image from 'next/image'; +import { Sans } from '@/styles/fonts'; +import { P } from '@/styles/text'; + +export const MenuContainer = styled.div<{ $expanded: boolean }>` + height: 100vh; + background-color: ${({ $expanded }) => ($expanded ? COLORS.pomegranate : 'transparent')}; + display: flex; + flex-direction: column; + padding-left: 1.25rem; + gap: 1.5rem; + transition: width 0.3s ease, background-color 0.3s ease; + position: fixed; + + width: ${({ $expanded }) => ($expanded ? '20%' : '0')}; + + @media (max-width: 768px) { + width: ${({ $expanded }) => ($expanded ? '75%' : '0')}; + } +`; + +export const ToggleButton = styled.button` + background-color: transparent; + border: none; + cursor: pointer; + display: flex; + padding: 1rem 0; +`; + +export const MenuItem = styled.button<{ $expanded: boolean }>` + width: 100%; + background-color: transparent; + border-style: solid; + border-color: transparent; + color: ${COLORS.gray3}; + display: flex; + align-items: center; + justify-content: ${({ $expanded }) => ($expanded ? 'flex-start' : 'center')}; + cursor: pointer; +`; + +export const MenuIconWrapper = styled.div<{ $expanded: boolean }>` + width: 20px; + height: 20px; + + & svg path { + fill: ${({ $expanded }) => ($expanded ? COLORS.gray3 : COLORS.pomegranate)}; + } +`; + +export const Icon = styled(Image)` + width: 20px; + height: 20px; + margin-right: 0.625rem; +`; + +export const MenuLabel = styled(P)<{ $expanded: boolean; $active: boolean }>` + ${Sans.style} + color: ${COLORS.gray3}; + display: ${({ $expanded }) => ($expanded ? 'flex' : 'none')}; + font-weight: ${({ $active }) => ($active ? '600' : '400')}; + transition: font-weight 0.03s ease-in-out; +`; diff --git a/public/images/availabilities.svg b/public/images/availabilities.svg new file mode 100644 index 0000000..b3edc80 --- /dev/null +++ b/public/images/availabilities.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/menu.svg b/public/images/menu.svg new file mode 100644 index 0000000..02a24dd --- /dev/null +++ b/public/images/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/settings.svg b/public/images/settings.svg new file mode 100644 index 0000000..3f08fa3 --- /dev/null +++ b/public/images/settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/upcoming-events.svg b/public/images/upcoming-events.svg new file mode 100644 index 0000000..6532db1 --- /dev/null +++ b/public/images/upcoming-events.svg @@ -0,0 +1,3 @@ + + + diff --git a/styles/colors.ts b/styles/colors.ts index 95ed867..8d8107d 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -37,6 +37,8 @@ const COLORS = { gray10: '#6D6D6D', gray11: '#515151', gray12: '#202020', + + pomegranate: '#342A2F' }; export default COLORS; diff --git a/styles/text.ts b/styles/text.ts index a353fa9..eb7ee6c 100644 --- a/styles/text.ts +++ b/styles/text.ts @@ -51,7 +51,7 @@ export const H6 = styled.h6` export const P = styled.p` ${TextStyles} font-size: 1rem; - font-weight: 400; + // font-weight: 400; `; export const SMALL = styled.p`