adjusted design for mobile first development

spencer-rafada · Dec 28, 2023 · 36f0d85 · 36f0d85
1 parent 0223ba3
commit 36f0d85
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 8 deletions.
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
@@ -7,7 +7,6 @@ import Link from 'next/link'
 import CTAButton from './CTAButton'
 
 const links = [
-  { to: '/', text: 'Home' },
   { to: '/about', text: 'About Us' },
   { to: '/contact', text: 'Contact' },
   { to: '/projects', text: 'Our Projects' },
@@ -21,7 +20,7 @@ export default function Navbar() {
   return (
     <Flex
       alignItems='center'
-      p={6}
+      p={{ base: 4, md: 6 }}
       justifyContent='space-between'
       border='1px'
       borderColor='gray.200'
@@ -32,7 +31,7 @@ export default function Navbar() {
       <Box>
         <Link href='/'>
           <Text
-            fontSize='1.5rem'
+            fontSize={{ base: '1rem', md: '1.5rem' }}
             fontWeight={700}
             textTransform='uppercase'
             color='brand.300'

diff --git a/src/app/components/NavbarLinks.tsx b/src/app/components/NavbarLinks.tsx
@@ -27,7 +27,7 @@ export default function NavbarLinks({
   return (
     <>
       <Box display={{ base: 'none', md: 'block' }}>
-        <Stack direction={{ base: 'column', md: 'row' }} spacing='1.5rem'>
+        <Stack direction={{ base: 'column', md: 'row' }}>
           {links.map((link) => {
             return <NavbarLink key={link.to} to={link.to} text={link.text} />
           })}
@@ -44,10 +44,7 @@ export default function NavbarLinks({
           <DrawerCloseButton />
           <DrawerHeader>Menu</DrawerHeader>
           <DrawerBody>
-            <Stack
-              spacing='1.5rem'
-              divider={<StackDivider borderColor='gray.200' />}
-            >
+            <Stack divider={<StackDivider borderColor='gray.200' />}>
               {links.map((link) => {
                 return (
                   <NavbarLink key={link.to} to={link.to} text={link.text} />