Mobile responsive navbar

README.md

@@ -115,3 +115,5 @@ $ npm run prisma:reset
 #### Final steps
 
 1. Add the backend .env file - get it from an existing person using the repo.
+
+## skyler :D

components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Heading, VStack, Link, Flex, Icon } from '@chakra-ui/react'
+import { Heading, Grid, GridItem, VStack, Link, Flex, Icon } from '@chakra-ui/react'
 import VenueMap from './VenueMap'
 import { FaInstagram, FaTelegram } from 'react-icons/fa'
 import { MdEmail } from 'react-icons/md'
@@ -36,7 +36,7 @@ const socialLinks: SocialLink[] = [
 ]
 
 const linkStyles = {
-  pl: 7,
+  // pl: 7,
   display: 'flex',
   alignItems: 'center',
 }
@@ -48,9 +48,13 @@ const iconStyles = {
 
 const Footer: React.FC = () => {
   return (
-    <VStack pt='1.5rem' pb='1rem' bg='#1f407b' color='white' justifyContent='space-between'>
-      <Flex w='100%' justify='space-around'>
-        <VStack alignItems='flex-start'>
+    <VStack p='1.5rem 1rem' bg='#1f407b' color='white' justifyContent='space-between'>
+      <Grid
+        gap={6}
+        templateColumns={{ base: 'repeat(1, 1fr)', sm: 'repeat(3, 1fr)' }}
+        justifyContent='center'
+      >
+        <GridItem justifyContent='center' px='1rem'>
           <Heading as='h4' size='md'>
             Navigate
           </Heading>
@@ -59,28 +63,34 @@ const Footer: React.FC = () => {
               {label}
             </Link>
           ))}
-        </VStack>
-        <VStack alignItems='flex-start'>
-          <Heading as='h4' size='md'>
-            For more updates, follow us on:
-          </Heading>
-          {socialLinks.map(({ href, iconComponent, label }) => (
-            <Link key={label} sx={linkStyles} href={href}>
-              <Icon sx={iconStyles} as={iconComponent} />
-              {label}
-            </Link>
-          ))}
-        </VStack>
-        <VStack alignItems='flex-start' position='relative' w='23rem' h='12rem'>
-          <Heading as='h4' size='md'>
-            Locate us:
-          </Heading>
-          <VenueMap />
-        </VStack>
+        </GridItem>
+        <GridItem justifyContent='center' px='1rem'>
+          <VStack alignItems='flex-start'>
+            <Heading as='h4' size='md'>
+              For more updates, follow us on:
+            </Heading>
+            {socialLinks.map(({ href, iconComponent, label }) => (
+              <Link key={label} sx={linkStyles} href={href}>
+                <Icon sx={iconStyles} as={iconComponent} />
+                {label}
+              </Link>
+            ))}
+          </VStack>
+        </GridItem>
+        <GridItem justifyContent='center' px='1rem' minH='20vh'>
+          <VStack alignItems='flex-start' position='relative' h='100%'>
+            <Heading as='h4' size='md'>
+              Locate us:
+            </Heading>
+            <VenueMap />
+          </VStack>
+        </GridItem>
+      </Grid>
+      <Flex justifyContent='center' alignContent='center' textAlign='center' px='1rem'>
+        <Heading as='h5' size='sm' pt='1rem' fontWeight='normal'>
+          Copyright © 2023 NUS College Cinnamon Student Life
+        </Heading>
       </Flex>
-      <Heading as='h5' size='sm' pt='3rem' fontWeight='normal'>
-        Copyright © 2023 NUS College Cinnamon Student Life
-      </Heading>
     </VStack>
   )
 }

components/NavMenu.tsx

@@ -1,14 +1,8 @@
 import React from 'react'
 import {
-  Box,
-  Container,
-  Flex,
-  HStack,
+  Box, Flex, HStack, Stack, Text,
   IconButton,
-  LinkBox,
-  LinkOverlay,
-  Stack,
-  Text,
+  LinkBox, LinkOverlay,
   useDisclosure,
 } from '@chakra-ui/react'
 import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
@@ -18,12 +12,9 @@ import { CldImage } from 'next-cloudinary'
 
 const NavLink: React.FC<NavigationLink> = (props) => (
   <LinkBox
-    px={2}
-    py={1}
+    px={2} py={1}
     boxShadow={'inset 0 0 0 0 white'}
     color='white'
-    margin='0 -.25rem'
-    padding='0.25rem'
     transition='color .3s ease-in-out, box-shadow .3s ease-in-out'
     _hover={{
       color: '#ff9900',
@@ -53,47 +44,49 @@ const NavMenu = () => {
 
   return (
     <>
-      <LinkBox>
-        <Box display={'flex'} justifyContent={'center'} padding='0.5rem'>
-          {/*<Heading as='h1' size='2xl' color='#1f407b' fontFamily={'Blender-Medium'}>*/}
-          {/*  NUS{' '}*/}
-          {/*  <Text as='span' color='#ef7c00'>*/}
-          {/*    College*/}
-          {/*  </Text>{' '}*/}
-          {/*  Club*/}
-          {/*</Heading>*/}
-          <CldImage src={'nusc-logo'} alt={'NUS College'} height={420} width={190} />
-          <LinkOverlay href={'/'} />
-        </Box>
-      </LinkBox>
-      <Box px={4} bg='#1f407b'>
-        <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
-          <IconButton
+    <Box bg='#1f407b'padding='1.5vh'>
+      <Flex justifyContent={'center'} alignItems={'center'} position={'relative'} h={'10vh'}>
+        <IconButton
             size={'md'}
             icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
             aria-label={'Open Menu'}
             display={{ md: 'none' }}
+            position={'absolute'}
+            top={'50%'} left={'0'} transform={'translateY(-50%)'}
             onClick={isOpen ? onClose : onOpen}
           />
-          <Container centerContent>
-            {/* Links to various pages in the Nav bar (IGs, NOW, etc.) */}
-            <HStack as={'nav'} spacing={36} display={{ base: 'none', md: 'flex' }}>
-              <NavLinks />
-            </HStack>
-          </Container>
-          <Flex alignItems={'center'}>
-            <Auth />
-          </Flex>
-        </Flex>
+        <LinkBox display={'flex'} justifyContent={'center'} borderRadius={10} overflow={'hidden'}>
+            <CldImage src={'nusc-logo'} alt={'NUS College'} height={420} width={190} />
+            <LinkOverlay href={'/'} />
+        </LinkBox>
+        {/* TODO: CHANGE ICON */}
+        <Box position={'absolute'} top={'50%'} right={'0'} transform={'translateY(-50%)'}>
+          <Auth />
+        </Box>
+      </Flex>
+      {/* Links to various pages in the Nav bar (IGs, NOW, etc.) */}
+      <HStack as={'nav'} w={'80%'} display={{ base: 'none', md: 'flex'}}
+        justifyContent={'space-between'} margin={'auto'} paddingTop='1rem'>
+        <NavLinks />
+      </HStack>
+    </Box>
 
-        {isOpen ? (
-          <Box pb={4} display={{ md: 'none' }}>
-            <Stack as={'nav'} spacing={4}>
-              <NavLinks />
-            </Stack>
-          </Box>
-        ) : null}
+    {isOpen ? (
+      <Box bg='#1f407b' w={'fit-content'} h={'100vh'} p={'1.5vh'}
+        position={'fixed'} top={'0'} zIndex={'100'}>
+        <Flex h={'10vh'} alignItems={'center'}>
+          <IconButton
+              size={'md'}
+              icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+              aria-label={'Open Menu'}
+              onClick={isOpen ? onClose : onOpen}
+            />
+        </Flex>
+        <Stack as={'nav'} spacing={4}>
+          <NavLinks />
+        </Stack>
       </Box>
+    ) : null}
     </>
   )
 }

components/VenueMap.tsx

@@ -188,7 +188,7 @@ const VenueMap: React.FC = () => {
   return (
     <>
       {!isSsr && (
-        <Map width='2' height='1' center={DEFAULT_CENTER} zoom={17}>
+        <Map width='100%' height='100%' center={DEFAULT_CENTER} zoom={17}>
           {(
             { TileLayer, Polygon, Polyline }: VenueMapProps,
             TempIcon: typeof Icon,

components/map/DynamicMap.tsx

@@ -9,11 +9,9 @@ import { Marker, Popup } from 'react-leaflet'
 
 import { CustomMarkerProps, LeafletComponents } from './index'
 
-// FIXME need to fix this for mobile, original values for width and height were 100% and providing these values is a
-//  must for leaflet to work. But with 100%  the map is not visible because parent container has no height(?)
 const style: CSSProperties = {
-  height: '20vh',
-  width: '20vw',
+  width: '100%',
+  height: '100%',
 }
 
 interface DynamicMapProps {

components/map/index.tsx

@@ -1,3 +1,4 @@
+import { he } from 'date-fns/locale'
 import { Icon, LatLngExpression } from 'leaflet'
 import dynamic from 'next/dynamic'
 import { ComponentType, CSSProperties, FC } from 'react'
@@ -42,7 +43,9 @@ const DEFAULT_HEIGHT = '100'
 const Map = (props: MapProps) => {
   const { width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT } = props
   const style: CSSProperties = {
-    aspectRatio: (parseInt(width) / parseInt(height)).toString(),
+    aspectRatio: 2 / 1,
+    width: width,
+    height: height,
   }
   return (
     <div style={style}>