feat: added pomegranate color and expanding menu component

calblueprint · Oct 27, 2024 · a211806 · a211806
1 parent 327bbc4
commit a211806
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git a/components/ExpandingMenu/ExpandingMenu.tsx b/components/ExpandingMenu/ExpandingMenu.tsx
@@ -1,8 +1,15 @@
 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';
+import Events from '@/public/images/upcoming-events.svg';
+import {
+  Icon,
+  MenuContainer,
+  MenuIconWrapper,
+  MenuItem,
+  MenuLabel,
+  ToggleButton,
+} from './styles';
 
 const ExpandingMenu: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
@@ -26,45 +33,39 @@ const ExpandingMenu: React.FC = () => {
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z" fill="currentColor" />
+            <path
+              d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"
+              fill="currentColor"
+            />
           </svg>
         </MenuIconWrapper>
       </ToggleButton>
       {expanded && (
         <>
-          <MenuItem 
-            $expanded={expanded} 
+          <MenuItem
+            $expanded={expanded}
             onClick={() => handleClick('availabilities')}
           >
             <Icon src={Availability} alt="Availabilities icon" />
-            <MenuLabel 
+            <MenuLabel
               $expanded={expanded}
               $active={activeItem === 'availabilities'}
             >
               Availabilities
-              </MenuLabel>
+            </MenuLabel>
           </MenuItem>
-          <MenuItem 
-            $expanded={expanded} 
-            onClick={() => handleClick('events')}
-          >
+          <MenuItem $expanded={expanded} onClick={() => handleClick('events')}>
             <Icon src={Events} alt="Events icon" />
-            <MenuLabel 
-              $expanded={expanded}
-              $active={activeItem === 'events'}
-            >
+            <MenuLabel $expanded={expanded} $active={activeItem === 'events'}>
               Upcoming Events
             </MenuLabel>
           </MenuItem>
-          <MenuItem 
-            $expanded={expanded} 
+          <MenuItem
+            $expanded={expanded}
             onClick={() => handleClick('settings')}
           >
             <Icon src={Settings} alt="Settings icon" />
-            <MenuLabel 
-              $expanded={expanded}
-              $active={activeItem === 'settings'}
-            >
+            <MenuLabel $expanded={expanded} $active={activeItem === 'settings'}>
               Profile & Settings
             </MenuLabel>
           </MenuItem>
@@ -74,4 +75,4 @@ const ExpandingMenu: React.FC = () => {
   );
 };
 
-export default ExpandingMenu;
+export default ExpandingMenu;
diff --git a/components/ExpandingMenu/styles.ts b/components/ExpandingMenu/styles.ts
@@ -1,22 +1,25 @@
+import Image from 'next/image';
 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')};
+  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;
+  transition:
+    width 0.3s ease,
+    background-color 0.3s ease;
   position: fixed;
 
   width: ${({ $expanded }) => ($expanded ? '20%' : '0')};
 
-  @media (max-width: 768px) { 
+  @media (max-width: 768px) {
     width: ${({ $expanded }) => ($expanded ? '75%' : '0')};
   }
 `;

diff --git a/styles/colors.ts b/styles/colors.ts
@@ -38,7 +38,7 @@ const COLORS = {
   gray11: '#515151',
   gray12: '#202020',
 
-  pomegranate: '#342A2F'
+  pomegranate: '#342A2F',
 };
 
 export default COLORS;