feat: expanding menu bar

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<string | null>(null);
+
+  const toggleMenu = () => setExpanded(!expanded);
+
+  // TODO: add navigation by passing in path prop
+  const handleClick = (item: string) => {
+    setActiveItem(item);
+  };
+
+  return (
+    <MenuContainer $expanded={expanded}>
+      <ToggleButton onClick={toggleMenu}>
+        <MenuIconWrapper $expanded={expanded}>
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="currentColor" />
+          </svg>
+        </MenuIconWrapper>
+      </ToggleButton>
+      {expanded && (
+        <>
+          <MenuItem 
+            $expanded={expanded} 
+            onClick={() => handleClick('availabilities')}
+          >
+            <Icon src={Availability} alt="Availabilities icon" />
+            <MenuLabel 
+              $expanded={expanded}
+              $active={activeItem === 'availabilities'}
+            >
+              Availabilities
+              </MenuLabel>
+          </MenuItem>
+          <MenuItem 
+            $expanded={expanded} 
+            onClick={() => handleClick('events')}
+          >
+            <Icon src={Events} alt="Events icon" />
+            <MenuLabel 
+              $expanded={expanded}
+              $active={activeItem === 'events'}
+            >
+              Upcoming Events
+            </MenuLabel>
+          </MenuItem>
+          <MenuItem 
+            $expanded={expanded} 
+            onClick={() => handleClick('settings')}
+          >
+            <Icon src={Settings} alt="Settings icon" />
+            <MenuLabel 
+              $expanded={expanded}
+              $active={activeItem === 'settings'}
+            >
+              Profile & Settings
+            </MenuLabel>
+          </MenuItem>
+        </>
+      )}
+    </MenuContainer>
+  );
+};
+
+export default ExpandingMenu;

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;
+`;

styles/colors.ts

@@ -37,6 +37,8 @@ const COLORS = {
   gray10: '#6D6D6D',
   gray11: '#515151',
   gray12: '#202020',
+
+  pomegranate: '#342A2F'
 };
 
 export default COLORS;

styles/text.ts

@@ -51,7 +51,7 @@ export const H6 = styled.h6<TextProps>`
 export const P = styled.p<TextProps>`
   ${TextStyles}
   font-size: 1rem;
-  font-weight: 400;
+  // font-weight: 400;
 `;
 
 export const SMALL = styled.p<TextProps>`