Update global navigation (#1001)

* Update global menu - initial changes * Change language switch color, change nav height * Fixed spacings, icon's sizes, added icon to locale switcher * Change nav menu tabs
podkrepi-bg · Aug 23, 2022 · 2b5e83c · 2b5e83c
1 parent 5d0cb5f
commit 2b5e83c
Show file tree

Hide file tree

Showing 11 changed files with 72 additions and 70 deletions.
diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json
@@ -4,13 +4,15 @@
     "about": {
       "about-project": "За проекта",
       "about-us": "За нас",
+      "who-are-we": "Кои сме ние?",
       "support_us": "Подкрепете ни",
       "support-us": "Станете доброволец",
       "reports": "Отчети",
       "contacts": "Контакти"
     },
     "campaigns": {
       "index": "Кампании",
+      "all-campaigns": "Всички кампании",
       "create": "Предложете кампания",
       "faq": "Често задавани въпроси"
     },
@@ -26,9 +28,10 @@
       "open-source": "Отворен Код",
       "open-data": "Отворени Данни"
     },
-    "donation-menu": "Дарете",
+    "donatе": "Дарете",
+    "donation-menu": "Кампании",
     "blog": "Блог",
-    "support_us_button": "Подкрепи Подкрепи.бг",
+    "support_us_button": "Подкрепете ни",
     "profile": "Моят профил",
     "login": "Вход",
     "login-with": "Вход с",

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -4,14 +4,16 @@
     "about": {
       "about-project": "The Project",
       "about-us": "About us",
+      "who-are-we": "Who are we?",
       "support_us": "Support us",
       "support-us": "Join us",
       "reports": "Reports",
       "contacts": "Contacts"
     },
     "campaigns": {
       "index": "Campaigns",
-      "create": "Suggest campaign",
+      "all-campaigns": "All campaigns",
+      "create": "Suggest a campaign",
       "faq": "Frequently Asked Questions"
     },
     "admin": {
@@ -26,9 +28,10 @@
       "open-source": "Open Source",
       "open-data": "Open Data"
     },
-    "donation-menu": "Donatе",
+    "donatе": "Donate",
+    "donation-menu": "Campaigns",
     "blog": "Blog",
-    "support_us_button": "Support Podkrepi.bg",
+    "support_us_button": "Support us",
     "profile": "Profile",
     "login": "Login",
     "login-with": "Login with",

diff --git a/src/components/index/sections/Jumbotron.tsx b/src/components/index/sections/Jumbotron.tsx
@@ -40,7 +40,6 @@ export default function Jumbotron() {
           xs: 3,
           md: 5,
           lg: 7,
-          xl: 9,
         },
         textAlign: 'center',
         color: theme.palette.common.white,

diff --git a/src/components/layout/AppNavBar.tsx b/src/components/layout/AppNavBar.tsx
@@ -30,14 +30,13 @@ export default function AppNavBar({ navMenuToggle }: AppBarDeckProps) {
       sx={(theme) => ({
         overflow: 'hidden',
         transition: 'height .5s, background-color .5s ease 0s',
-        height: theme.spacing(14),
-        lineHeight: theme.spacing(14),
+        height: theme.spacing(11),
         [theme.breakpoints.down('md')]: {
-          height: theme.spacing(10),
+          height: theme.spacing(8),
         },
         '&.shrink': {
-          height: theme.spacing(10),
-          lineHeight: theme.spacing(10),
+          height: theme.spacing(8),
+          lineHeight: theme.spacing(8),
           backgroundColor: 'hsla(0,0%,100%,0.85)',
           backdropFilter: 'saturate(180%) blur(5px)',
         },

diff --git a/src/components/layout/LocaleButton.tsx b/src/components/layout/LocaleButton.tsx
@@ -20,14 +20,14 @@ export default function LocaleButton() {
 
   if (router.locale === 'bg') {
     return (
-      <Button variant="text" color="primary" size="small" onClick={changeLang('en')}>
+      <Button variant="text" color="inherit" size="small" onClick={changeLang('en')}>
         {t('EN')}
       </Button>
     )
   }
 
   return (
-    <Button variant="text" color="primary" size="small" onClick={changeLang('bg')}>
+    <Button variant="text" color="inherit" size="small" onClick={changeLang('bg')}>
       {t('BG')}
     </Button>
   )

diff --git a/src/components/layout/nav/DonationMenu.tsx b/src/components/layout/nav/DonationMenu.tsx
@@ -24,11 +24,7 @@ const StyledGenericMenu = styled(GenericMenu)(({ theme }) => ({
   },
 
   [`& .${classes.dropdownLinkText}`]: {
-    color: theme.palette.primary.dark,
     width: '100%',
-    '&:hover': {
-      color: theme.palette.primary.main,
-    },
   },
 }))
 
@@ -41,20 +37,12 @@ type NavItem = {
 const allNavItems: NavItem[] = [
   {
     href: routes.campaigns.index,
-    label: 'nav.campaigns.index',
+    label: 'nav.campaigns.all-campaigns',
   },
   {
     href: routes.faq_campaigns, //temporarily lead to FAQ
     label: 'nav.campaigns.create',
   },
-  {
-    href: routes.termsOfService,
-    label: 'components.footer.terms-of-service',
-  },
-  {
-    href: routes.faq,
-    label: 'nav.campaigns.faq',
-  },
 ]
 
 export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled)

diff --git a/src/components/layout/nav/GenericMenu.tsx b/src/components/layout/nav/GenericMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, Menu } from '@mui/material'
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 
 type Props = {
   label: string
@@ -19,10 +19,12 @@ export default function GenericMenu({ label, children }: Props) {
     <>
       <Button
         variant="text"
-        color="primary"
+        color="inherit"
         onClick={handleMenu}
         sx={{ whiteSpace: 'nowrap', px: 2 }}
-        endIcon={open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}>
+        endIcon={
+          open ? <ArrowDropUpIcon color="primary" /> : <ArrowDropDownIcon color="primary" />
+        }>
         {label}
       </Button>
       <Menu

diff --git a/src/components/layout/nav/MainNavMenu.tsx b/src/components/layout/nav/MainNavMenu.tsx
@@ -1,42 +1,35 @@
 import React from 'react'
-import { Button, Grid, Typography } from '@mui/material'
+import { Button, Grid } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
-import { routes, staticUrls } from 'common/routes'
+import { routes } from 'common/routes'
 
 import DonationMenu from './DonationMenu'
 import ProjectMenu from './ProjectMenu'
-import DevelopmentMenu from './DevelopmentMenu'
 
 export default function MainNavMenu({ children }: { children?: React.ReactNode }) {
   const { t } = useTranslation()
 
   return (
-    <Grid container direction="row" wrap="nowrap" alignItems="baseline" spacing={1}>
+    <Grid container direction="row" wrap="nowrap" alignItems="baseline" spacing={4}>
+      <Grid item>
+        <Button
+          variant="outlined"
+          color="inherit"
+          href={routes.campaigns.index}
+          style={{ borderColor: '#32A9FE' }}>
+          {t('nav.donatе')}
+        </Button>
+      </Grid>
       <Grid item>
         <DonationMenu />
       </Grid>
       <Grid item>
         <ProjectMenu />
       </Grid>
-      <Grid item>
+      {/* <Grid item>
         <DevelopmentMenu />
-      </Grid>
-      <Grid item>
-        <Button
-          variant="text"
-          target="_blank"
-          color="primary"
-          href={staticUrls.blog}
-          style={{ whiteSpace: 'nowrap' }}>
-          {t('nav.blog')}
-        </Button>
-      </Grid>
-      <Grid item>
-        <Button variant="outlined" color="primary" href={routes.support_us}>
-          <Typography noWrap>{t('nav.support_us_button')}</Typography>
-        </Button>
-      </Grid>
+      </Grid> */}
       {children}
     </Grid>
   )

diff --git a/src/components/layout/nav/PrivateMenu.tsx b/src/components/layout/nav/PrivateMenu.tsx
@@ -67,7 +67,7 @@ export default function PrivateMenu() {
 
   return (
     <StyledGrid item>
-      <IconButton onClick={handleMenu} size="large">
+      <IconButton onClick={handleMenu} size="medium">
         {session?.user?.picture ? (
           <Avatar title={title} alt={title} src={session?.user?.picture} />
         ) : (

diff --git a/src/components/layout/nav/ProjectMenu.tsx b/src/components/layout/nav/ProjectMenu.tsx
@@ -40,12 +40,12 @@ type NavItem = {
 
 const allNavItems: NavItem[] = [
   {
-    href: routes.aboutProject,
-    label: 'nav.about.about-project',
+    href: routes.about,
+    label: 'nav.about.who-are-we',
   },
   {
-    href: routes.about,
-    label: 'nav.about.about-us',
+    href: routes.aboutProject,
+    label: 'nav.about.about-project',
   },
   {
     href: routes.support_us,
@@ -63,6 +63,14 @@ const allNavItems: NavItem[] = [
     href: routes.contact,
     label: 'nav.about.contacts',
   },
+  {
+    href: routes.termsOfService,
+    label: 'components.footer.terms-of-service',
+  },
+  {
+    href: routes.faq,
+    label: 'nav.campaigns.faq',
+  },
 ]
 
 export const navItems = allNavItems.filter((el) => typeof el.enabled === 'undefined' ?? el.enabled)
@@ -72,7 +80,7 @@ export default function ProjectMenu() {
   const router = useRouter()
 
   return (
-    <StyledGenericMenu label={t('nav.about.about-project')}>
+    <StyledGenericMenu label={t('nav.about.about-us')}>
       {navItems.map(({ href, label }, key) => (
         <LinkMenuItem
           href={href}

diff --git a/src/components/layout/nav/PublicMenu.tsx b/src/components/layout/nav/PublicMenu.tsx
@@ -1,20 +1,22 @@
 import React, { useState } from 'react'
 import { styled } from '@mui/material/styles'
 import { useTranslation } from 'next-i18next'
-import PersonOutlineIcon from '@mui/icons-material/PersonOutline'
-import { Grid, IconButton, Menu, Typography, lighten, Avatar } from '@mui/material'
+import PersonIcon from '@mui/icons-material/Person'
+import { Grid, Button, Menu, Typography, lighten } from '@mui/material'
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
 
 import { routes } from 'common/routes'
 import LinkMenuItem from 'components/common/LinkMenuItem'
 
-import theme from 'common/theme'
 import { useSession } from 'next-auth/react'
 
 const PREFIX = 'PublicMenu'
 
 const classes = {
   dropdownLinkButton: `${PREFIX}-dropdownLinkButton`,
   dropdownLinkText: `${PREFIX}-dropdownLinkText`,
+  dropdownArrowIcon: `${PREFIX}-dropdownArrowIcon`,
 }
 
 const StyledGrid = styled(Grid)(({ theme }) => ({
@@ -31,12 +33,17 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
       color: theme.palette.primary.main,
     },
   },
+
+  [`& .${classes.dropdownArrowIcon}`]: {
+    marginLeft: '2px',
+  },
 }))
 
 export default function PublicMenu() {
   const { t } = useTranslation()
   const { data: session } = useSession()
   const [anchorEl, setAnchorEl] = useState<Element | null>(null)
+  const open = Boolean(anchorEl)
 
   const handleMenu = (event: React.MouseEvent) => setAnchorEl(event.currentTarget)
   const handleClose = () => setAnchorEl(null)
@@ -47,16 +54,16 @@ export default function PublicMenu() {
 
   return (
     <StyledGrid item>
-      <IconButton onClick={handleMenu} size="large">
-        <Avatar
-          sx={{
-            bgcolor: theme.palette.info.light,
-            height: theme.spacing(4.5),
-            width: theme.spacing(4.5),
-          }}>
-          <PersonOutlineIcon />
-        </Avatar>
-      </IconButton>
+      <Button
+        onClick={handleMenu}
+        size="medium"
+        color="inherit"
+        classes={{ endIcon: classes.dropdownArrowIcon }}
+        endIcon={
+          open ? <ArrowDropUpIcon color="primary" /> : <ArrowDropDownIcon color="primary" />
+        }>
+        <PersonIcon />
+      </Button>
       <Menu
         open={Boolean(anchorEl)}
         keepMounted
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,6 @@ export default function Jumbotron() { @@
               xs: 3,
               md: 5,
               lg: 7,
-              xl: 9,
             },
             textAlign: 'center',
             color: theme.palette.common.white,
@@ Expand Down @@