Update Mobile Navigation (#1034)

* Update mobile navigation - initial commit

* Update campaigns menu and about us menu

* Extract Auth links component

* Apply UI changes, fix spacings

* Update donate button

* Fix build issue

src/components/brand/PodkrepiLogo.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { styled } from '@mui/material/styles'
 
-import theme from 'common/theme'
 import SVGLogoBetaBG from './podkrepi-logo-beta-bg'
 import SVGLogoBetaEN from './podkrepi-logo-beta-en'
 

src/components/layout/nav/AuthLinks.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { useTranslation } from 'next-i18next'
+import { Grid, Button, Theme } from '@mui/material'
+import { isAdmin } from 'common/util/roles'
+import { routes } from 'common/routes'
+import LinkButton from 'components/common/LinkButton'
+import { useSession } from 'next-auth/react'
+import { createStyles, makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    authLinksWrapper: {
+      display: 'flex',
+      borderTop: '2px solid lightgrey',
+      marginLeft: theme.spacing(0.25),
+      minHeight: theme.spacing(8),
+    },
+    authLink: {
+      color: theme.palette.common.black,
+    },
+    slashSymbol: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  }),
+)
+
+export const AuthLinks = () => {
+  const { data: session, status } = useSession()
+  const { t } = useTranslation()
+  const classes = useStyles()
+
+  if (session) {
+    return (
+      <>
+        <Grid item>
+          <LinkButton fullWidth variant="outlined" href={routes.profile.index}>
+            {t('nav.profile')}
+          </LinkButton>
+        </Grid>
+        {status === 'authenticated' && isAdmin(session) && (
+          <Grid item>
+            <Button fullWidth variant="outlined" href={routes.admin.index}>
+              {t('nav.admin.index')}
+            </Button>
+          </Grid>
+        )}
+        <Grid item>
+          <LinkButton fullWidth variant="outlined" href={routes.logout}>
+            {t('nav.logout')}
+          </LinkButton>
+        </Grid>
+      </>
+    )
+  }
+  return (
+    <>
+      <Grid item className={classes.authLinksWrapper}>
+        <LinkButton href={routes.login} className={classes.authLink}>
+          {t('nav.login')}
+        </LinkButton>
+        <span className={classes.slashSymbol}>/</span>
+        <LinkButton href={routes.register} className={classes.authLink}>
+          {t('nav.register')}
+        </LinkButton>
+      </Grid>
+    </>
+  )
+}

src/components/layout/nav/DonationMenuMobile.tsx

@@ -5,8 +5,8 @@ import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import LinkButton from 'components/common/LinkButton'
-import { routes } from 'common/routes'
 import { useTranslation } from 'next-i18next'
+import { navItems } from './DonationMenu'
 
 const PREFIX = 'DonationMenuMobile'
 
@@ -19,27 +19,23 @@ const classes = {
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
   [`&.${classes.accordionWrapper}`]: {
     boxShadow: 'none',
-    border: '2px solid rgba(50, 169, 254, 0.5)',
-    borderRadius: '25px !important',
-    color: theme.palette.primary.dark,
-    textAlign: 'center',
+    borderTop: '2px solid lightgrey',
+    borderRadius: 0,
   },
 
   [`& .${classes.accordionSummary}`]: {
     fontWeight: 500,
-    fontSize: theme.spacing(1.75),
-    minHeight: theme.spacing(5),
-    '& > *': {
-      flexGrow: 0,
-      margin: 0,
-      color: theme.palette.primary.dark,
-    },
+    minHeight: theme.spacing(8),
   },
 
   [`& .${classes.menuItem}`]: {
-    whiteSpace: 'nowrap',
-    display: 'block',
-    color: theme.palette.primary.main,
+    justifyContent: 'start',
+    fontWeight: 300,
+    color: theme.palette.common.black,
+  },
+
+  '.Mui-expanded': {
+    backgroundColor: '#F0F0F0',
   },
 }))
 
@@ -52,22 +48,14 @@ export default function DonationMenuMobile() {
         className={classes.accordionSummary}
         expandIcon={<ExpandMoreIcon />}
         aria-controls="panel1a-content">
-        {t('nav.donation-menu')}
+        {t('nav.campaigns.index')}
       </AccordionSummary>
       <AccordionDetails>
-        <LinkButton variant="text" href={routes.campaigns.index} className={classes.menuItem}>
-          {t('nav.campaigns.index')}
-        </LinkButton>
-        {/* temporarily disabled */}
-        {/* <LinkButton variant="text" href={routes.campaigns.create} className={classes.menuItem}>
-          {t('nav.campaigns.create')}
-        </LinkButton> */}
-        <LinkButton variant="text" href={routes.termsOfService} className={classes.menuItem}>
-          {t('components.footer.terms-of-service')}
-        </LinkButton>
-        <LinkButton variant="text" href={routes.faq} className={classes.menuItem}>
-          {t('nav.campaigns.faq')}
-        </LinkButton>
+        {navItems.map(({ href, label }, key) => (
+          <LinkButton key={key} fullWidth variant="text" href={href} className={classes.menuItem}>
+            {t(label)}
+          </LinkButton>
+        ))}
       </AccordionDetails>
     </StyledAccordion>
   )

src/components/layout/nav/MobileNav.tsx

@@ -1,101 +1,64 @@
-import { useRouter } from 'next/router'
-import { styled } from '@mui/material/styles'
 import React, { useEffect } from 'react'
+import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import { SwipeableDrawer, Hidden, Box, Grid, Button } from '@mui/material'
-
-import { isAdmin } from 'common/util/roles'
-import { routes, staticUrls } from 'common/routes'
-import LinkButton from 'components/common/LinkButton'
+import { SwipeableDrawer, Hidden, Box, Grid, Theme } from '@mui/material'
 import PodkrepiIcon from 'components/brand/PodkrepiIcon'
 import CloseModalButton from 'components/common/CloseModalButton'
-
-import { navItems } from './ProjectMenu'
 import LocaleButton from '../LocaleButton'
 import DonationMenuMobile from './DonationMenuMobile'
-import { useSession } from 'next-auth/react'
-
-const PREFIX = 'AuthLinks'
-
-const classes = {
-  navMenuDrawer: `${PREFIX}-navMenuDrawer`,
-  navMenuPaper: `${PREFIX}-navMenuPaper`,
-  icon: `${PREFIX}-icon`,
-  accordion: `${PREFIX}-accordion`,
-}
-
-const Root = styled('nav')(({ theme }) => ({
-  [`&.${classes.navMenuDrawer}`]: {
-    flexShrink: 0,
-  },
-
-  [`& .${classes.navMenuPaper}`]: {
-    width: parseFloat(theme.spacing(10)) * 4,
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-      flexShrink: 0,
-    },
-  },
-
-  [`& .${classes.icon}`]: {
-    fontSize: theme.typography.pxToRem(80),
-    marginTop: theme.spacing(5),
-    marginBottom: theme.spacing(5),
-  },
-}))
+import ProjectMenuMobile from './ProjectMenuMobile'
+import { createStyles, makeStyles } from '@mui/styles'
+import { AuthLinks } from './AuthLinks'
+import { routes } from 'common/routes'
+import LinkButton from 'components/common/LinkButton'
+import FavoriteIcon from '@mui/icons-material/Favorite'
 
 type NavDeckProps = {
   mobileOpen: boolean
   setMobileOpen: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const AuthLinks = () => {
-  const { data: session, status } = useSession()
-  const { t } = useTranslation()
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    localeButton: {
+      borderTop: '2px solid lightgrey',
+      display: 'flex',
+      minHeight: theme.spacing(8),
 
-  if (session) {
-    return (
-      <>
-        <Grid item>
-          <LinkButton fullWidth variant="outlined" href={routes.profile.index}>
-            {t('nav.profile')}
-          </LinkButton>
-        </Grid>
-        {status === 'authenticated' && isAdmin(session) && (
-          <Grid item>
-            <Button fullWidth variant="outlined" href={routes.admin.index}>
-              {t('nav.admin.index')}
-            </Button>
-          </Grid>
-        )}
-        <Grid item>
-          <LinkButton fullWidth variant="outlined" href={routes.logout}>
-            {t('nav.logout')}
-          </LinkButton>
-        </Grid>
-      </>
-    )
-  }
-  return (
-    <>
-      <Grid item>
-        <LinkButton fullWidth variant="outlined" href={routes.login}>
-          {t('nav.login')}
-        </LinkButton>
-      </Grid>
-      <Grid item>
-        <LinkButton fullWidth variant="outlined" href={routes.register}>
-          {t('nav.register')}
-        </LinkButton>
-      </Grid>
-    </>
-  )
-}
+      '& button': {
+        justifyContent: 'start',
+        marginLeft: theme.spacing(1.3),
+        fontSize: theme.spacing(1.75),
+      },
+    },
+    closeModalButton: {
+      marginRight: theme.spacing(1.25),
+    },
+    podkrepiLogoIcon: {
+      margin: '23px 0 12px 0',
+    },
+    donateButtonWrapper: {
+      borderTop: '2px solid lightgrey',
+      textAlign: 'center',
+      minHeight: theme.spacing(8),
+      display: 'flex',
+      justifyContent: 'center',
+      paddingTop: theme.spacing(3),
+    },
+    donateButton: {
+      padding: theme.spacing(1, 6),
+    },
+    donateIcon: {
+      fontSize: '14px',
+    },
+  }),
+)
 
 export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
   const router = useRouter()
-  const { t } = useTranslation()
   const closeNavMenu = () => setMobileOpen(false)
+  const classes = useStyles()
+  const { t } = useTranslation()
 
   // Register route change event handlers
   useEffect(() => {
@@ -107,48 +70,51 @@ export default function MobileNav({ mobileOpen, setMobileOpen }: NavDeckProps) {
   }, [])
 
   return (
-    <Root className={classes.navMenuDrawer}>
-      <Hidden mdUp implementation="css">
-        <SwipeableDrawer
-          anchor="right"
-          open={mobileOpen}
-          variant="temporary"
-          ModalProps={{ keepMounted: true }}
-          onOpen={() => setMobileOpen(true)}
+    <Hidden mdUp implementation="css">
+      <SwipeableDrawer
+        anchor="right"
+        open={mobileOpen}
+        variant="temporary"
+        ModalProps={{ keepMounted: true }}
+        onOpen={() => setMobileOpen(true)}
+        onClose={closeNavMenu}>
+        <CloseModalButton
+          edge="end"
+          fontSize="inherit"
           onClose={closeNavMenu}
-          classes={{ paper: classes.navMenuPaper }}>
-          <CloseModalButton edge="end" fontSize="inherit" onClose={closeNavMenu} />
-          <Box display="flex" justifyContent="center" px={2}>
-            <Grid container justifyContent="center" direction="column" spacing={2}>
-              <Grid item>
-                <Box width="100%" textAlign="center">
-                  <PodkrepiIcon className={classes.icon} />
-                </Box>
+          className={classes.closeModalButton}
+        />
+        <Grid display="flex" justifyContent="center" px={2}>
+          <Grid container direction="column">
+            <Grid item>
+              <Grid width="100%" textAlign="center">
+                <PodkrepiIcon className={classes.podkrepiLogoIcon} />
               </Grid>
-              {navItems.map(({ href, label }, key) => (
-                <Grid item key={key}>
-                  <LinkButton fullWidth variant="outlined" href={href}>
-                    {t(label)}
-                  </LinkButton>
-                </Grid>
-              ))}
-              <Grid item>
-                <Button href={staticUrls.blog} target="_blank" fullWidth variant="outlined">
-                  {t('nav.blog')}
-                </Button>
-              </Grid>
-              <Grid item>
-                <DonationMenuMobile />
-              </Grid>
-              <AuthLinks />
-
-              <Box my={4} textAlign="center">
-                <LocaleButton />
-              </Box>
             </Grid>
-          </Box>
-        </SwipeableDrawer>
-      </Hidden>
-    </Root>
+            <Grid item>
+              <DonationMenuMobile />
+            </Grid>
+            <Grid item>
+              <ProjectMenuMobile />
+            </Grid>
+            <AuthLinks />
+            <Grid item className={classes.localeButton}>
+              <LocaleButton />
+            </Grid>
+            <Grid item className={classes.donateButtonWrapper}>
+              <LinkButton
+                size="large"
+                variant="outlined"
+                color="primary"
+                href={routes.campaigns.index}
+                className={classes.donateButton}
+                endIcon={<FavoriteIcon color="primary" className={classes.donateIcon} />}>
+                {t('nav.donatе')}
+              </LinkButton>
+            </Grid>
+          </Grid>
+        </Grid>
+      </SwipeableDrawer>
+    </Hidden>
   )
 }