Implement responsive header (orcasound#61)

* migrate from bootstrap to MUIv5 * remove Nav.module.css file * Update src/pages/about.jsx Co-authored-by: Paul Cretu <[email protected]> * remove @types/node * Implemented Header MobileUI * add useIsMobile.ts * implemented drawer sliding below header Co-authored-by: Paul Cretu <[email protected]>
evanjscallan · Mar 2, 2022 · c46ae9a · c46ae9a
1 parent d19bf0e
commit c46ae9a
Show file tree

Hide file tree

Showing 5 changed files with 259 additions and 204 deletions.
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -5,9 +5,10 @@ import NotificationsIcon from '@mui/icons-material/Notifications'
 import TwitterIcon from '@mui/icons-material/Twitter'
 import YouTubeIcon from '@mui/icons-material/YouTube'
 import { AppBar, Box, Button, styled, Toolbar, Typography } from '@mui/material'
+import { ThemeProvider, useTheme } from '@mui/material/styles'
 import Link from 'next/link'
 
-import useCheckMobileScreen from '../utils/useCheckMobileScreen'
+import useIsMobile from '../utils/useIsMobile'
 
 const StyledTypography = styled(Typography)({
   color: 'white',
@@ -28,52 +29,55 @@ const IconLink = styled('a')({
   },
 })
 
-export default function Footer() {
-  const isMobile = useCheckMobileScreen()
+const iconContainer = (
+  <Box sx={{ marginRight: '32px' }}>
+    <IconLink href="https://www.facebook.com/OrcasoundApp/">
+      <FacebookIcon fontSize="large" />
+    </IconLink>
+    <IconLink href="https://www.linkedin.com/company/75491849/admin/">
+      <LinkedInIcon fontSize="large" />
+    </IconLink>
+    <IconLink href="https://www.youtube.com/channel/UC7b3tOVQg8_fzaZBj4NoAEg">
+      <YouTubeIcon fontSize="large" />
+    </IconLink>
+    <IconLink href="https://twitter.com/OrcasoundApp">
+      <TwitterIcon fontSize="large" />
+    </IconLink>
+    <IconLink href="https://www.instagram.com/orcasoundapp/">
+      <InstagramIcon fontSize="large" />
+    </IconLink>
+  </Box>
+)
 
-  const iconContainer = (
-    <Box sx={{ marginRight: '32px' }}>
-      <IconLink href="https://www.facebook.com/OrcasoundApp/">
-        <FacebookIcon fontSize="large" />
-      </IconLink>
-      <IconLink href="https://www.linkedin.com/company/75491849/admin/">
-        <LinkedInIcon fontSize="large" />
-      </IconLink>
-      <IconLink href="https://www.youtube.com/channel/UC7b3tOVQg8_fzaZBj4NoAEg">
-        <YouTubeIcon fontSize="large" />
-      </IconLink>
-      <IconLink href="https://twitter.com/OrcasoundApp">
-        <TwitterIcon fontSize="large" />
-      </IconLink>
-      <IconLink href="https://www.instagram.com/orcasoundapp/">
-        <InstagramIcon fontSize="large" />
-      </IconLink>
-    </Box>
-  )
+const sendFeedbackLink = (
+  <Link href="/" passHref>
+    <StyledTypography variant="h6" component="a">
+      Send Feedback
+    </StyledTypography>
+  </Link>
+)
 
-  const sendFeedbackLink = (
-    <Link href="/" passHref>
-      <StyledTypography variant="h6" component="a">
-        Send Feedback
-      </StyledTypography>
-    </Link>
-  )
+const blogLink = (
+  <Link href="/" passHref>
+    <StyledTypography variant="h6" component="a">
+      Blog
+    </StyledTypography>
+  </Link>
+)
 
-  const blogLink = (
-    <Link href="/" passHref>
-      <StyledTypography variant="h6" component="a">
-        Blog
-      </StyledTypography>
-    </Link>
-  )
+export default function Footer() {
+  const isMobile = useIsMobile()
 
-  if (isMobile)
-    return (
+  return <Box>{isMobile ? <Mobile /> : <Desktop />}</Box>
+}
+
+function Mobile() {
+  const theme = useTheme()
+
+  return (
+    <ThemeProvider theme={theme}>
       <Box sx={{ flexGrow: 1 }}>
-        <AppBar
-          position="static"
-          sx={{ backgroundColor: '#080d26', padding: '20px' }}
-        >
+        <AppBar position="static" sx={{ padding: '20px' }}>
           <div>{sendFeedbackLink}</div>
           <div>{blogLink}</div>
           <div>
@@ -86,29 +90,41 @@ export default function Footer() {
           {iconContainer}
         </AppBar>
       </Box>
-    )
+    </ThemeProvider>
+  )
+}
+
+function Desktop() {
+  const theme = useTheme()
+
   return (
-    <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={{ backgroundColor: '#080d26' }}>
-        <Toolbar>
-          <Box sx={{ flexGrow: 1 }}></Box>
-          {sendFeedbackLink}
-          {blogLink}
-          {iconContainer}
-          <Button
-            variant="contained"
-            sx={{
-              color: 'black',
-              backgroundColor: 'white',
-              borderRadius: '100px',
-              '&:hover': { color: 'black', backgroundColor: 'white' },
-            }}
-            startIcon={<NotificationsIcon sx={{ color: '#F79234' }} />}
-          >
-            Donate
-          </Button>
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <ThemeProvider theme={theme}>
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static">
+          <Toolbar>
+            <Box sx={{ flexGrow: 1 }}></Box>
+            {sendFeedbackLink}
+            {blogLink}
+            {iconContainer}
+            <Button
+              variant="contained"
+              sx={{
+                color: 'black',
+                backgroundColor: 'white',
+                borderRadius: '100px',
+                '&:hover': { color: 'black', backgroundColor: 'white' },
+              }}
+              startIcon={
+                <NotificationsIcon
+                  sx={{ color: `${theme.palette.secondary.main}` }}
+                />
+              }
+            >
+              Donate
+            </Button>
+          </Toolbar>
+        </AppBar>
+      </Box>
+    </ThemeProvider>
   )
 }