Merge branch 'deploy-staging' into deploy-prod

Author: alejot127

src/layouts/Main/Main.js

@@ -14,7 +14,13 @@ import { Topbar, Sidebar, Footer } from './components';
 
 import pages from '../navigation';
 
-const Main = ({ children, colorInvert = false, bgcolor = null, className = '', navItems = null }) => {
+const Main = ({
+  children,
+  colorInvert = false,
+  bgcolor = null,
+  className = '',
+  navItems = null,
+}) => {
   const theme = useTheme();
   const isMd = useMediaQuery(theme.breakpoints.up('md'), {
     defaultMatches: true,
@@ -43,7 +49,9 @@ const Main = ({ children, colorInvert = false, bgcolor = null, className = '', n
         position={'sticky'}
         sx={{
           top: 0,
-          backgroundColor: trigger ? theme.palette.background.paper : bgcolor || setAlpha(theme.palette.background.paper, .25)
+          backgroundColor: trigger
+            ? theme.palette.background.paper
+            : bgcolor || setAlpha(theme.palette.background.paper, 0.25),
         }}
         elevation={trigger ? 1 : 0}
       >

src/layouts/Main/components/Footer/Footer.js

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
+import { Tooltip } from '@mui/material';
 import BAAAHSLogo from '../../BAAAHSLogo';
 
 const Footer = ({ links }) => {
@@ -24,12 +25,7 @@ const Footer = ({ links }) => {
           width={1}
           flexDirection={{ xs: 'column', sm: 'row' }}
         >
-          <Box
-            display={'flex'}
-            component="a"
-            href="/"
-            width={100}
-          >
+          <Box display={'flex'} component="a" href="/" width={100}>
             <BAAAHSLogo />
           </Box>
           <Box
@@ -38,19 +34,26 @@ const Footer = ({ links }) => {
             alignItems="center"
             gap={2}
           >
-            {navItems.map((item, i) => (
-              <Box key={i} marginTop={1} gap={2}>
-                <Link
-                  underline="none"
-                  component="a"
-                  href={item.href}
-                  color="text.primary"
-                  variant={'subtitle2'}
-                >
-                  {item.title}
-                </Link>
-              </Box>
-            ))}
+            {navItems.map((item, i) => {
+              const link = (
+                <Box key={i} marginTop={1} gap={2}>
+                  <Link
+                    underline="none"
+                    component="a"
+                    href={item.href}
+                    color="text.primary"
+                    variant={'subtitle2'}
+                  >
+                    {item.title}
+                  </Link>
+                </Box>
+              );
+              return item.tbd ? (
+                <Tooltip title={item.tbd}>{link}</Tooltip>
+              ) : (
+                link
+              );
+            })}
             <Box marginTop={1}>
               <Button
                 variant="outlined"

src/layouts/Main/components/Sidebar/components/SidebarNav/SidebarNav.js

@@ -4,6 +4,7 @@ import Box from '@mui/material/Box';
 // import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
 // import NavItem from './components/NavItem';
+import { Tooltip } from '@mui/material';
 import BAAAHSLogo from '../../../../BAAAHSLogo';
 
 const SidebarNav = ({ pages }) => {
@@ -27,22 +28,35 @@ const SidebarNav = ({ pages }) => {
           title="BAAAHS"
           width={{ xs: 120, md: 150 }}
         >
-          <BAAAHSLogo/>
+          <BAAAHSLogo />
         </Box>
       </Box>
       <Box paddingX={2} paddingY={2}>
-        {sections.map((section) => (
-          <Box>
-            <Link
-              underline="none"
-              component="a"
-              href={section.href}
-              sx={{ display: 'flex', alignItems: 'center', fontWeight: 'bold', textTransform: 'lowercase' }}
-            >
-              {section.title}
-            </Link>
-          </Box>
-        ))}
+        {sections.map((section) => {
+          const link = (
+            <Box>
+              <Link
+                underline="none"
+                component="a"
+                href={section.href}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontWeight: 'bold',
+                  textTransform: 'lowercase',
+                }}
+              >
+                {section.title}
+              </Link>
+            </Box>
+          );
+
+          return section.tbd ? (
+            <Tooltip title={section.tbd}>{link}</Tooltip>
+          ) : (
+            link
+          );
+        })}
 
         {/*<Box>*/}
         {/*  <NavItem title={'Landings'} items={landingPages} />*/}

src/layouts/Main/components/Topbar/Topbar.js

@@ -12,6 +12,7 @@ import IconFacebook from 'svg/illustrations/IconFacebook';
 import BAAAHSLogo from '../../BAAAHSLogo';
 
 import pages from '../../../navigation';
+import { Tooltip } from '@mui/material';
 
 const Topbar = ({ onSidebarOpen, colorInvert = false, data }) => {
   const theme = useTheme();
@@ -24,17 +25,12 @@ const Topbar = ({ onSidebarOpen, colorInvert = false, data }) => {
       alignItems={'center'}
       width={1}
     >
-      <Box
-        display={'flex'}
-        component="a"
-        href="/"
-        width={{ xs: 120, md: 150 }}
-      >
+      <Box display={'flex'} component="a" href="/" width={{ xs: 120, md: 150 }}>
         <BAAAHSLogo />
       </Box>
       <Box sx={{ display: { xs: 'none', md: 'flex' } }} alignItems={'center'}>
         {navItems.map((item, i) => {
-          return (
+          const link = (
             <Box key={i} marginRight={{ xs: 2, sm: 4 }}>
               <Link
                 underline="none"
@@ -52,6 +48,7 @@ const Topbar = ({ onSidebarOpen, colorInvert = false, data }) => {
               </Link>
             </Box>
           );
+          return item.tbd ? <Tooltip title={item.tbd}>{link}</Tooltip> : link;
         })}
       </Box>
       <Box sx={{ display: { xs: 'none', md: 'flex' } }} alignItems={'right'}>

src/views/Campout/Home.js

@@ -191,11 +191,12 @@ const CampoutHome = () => {
                   your fav BAAAHS DJs and special guests on our world class
                   sound system!
                   <p>
-                    Here's this year's <a href="/campout/dj-lineup">line-up!</a>
+                    {/* Here's this year's <a href="/campout/dj-lineup">line-up!</a> */}
+                    DJ LINE UP COMING SOON!
                   </p>
                 </fragment>
               }
-              link={'/campout/dj-lineup'}
+              // link={'/campout/dj-lineup'}
               img={{ src: '/images/resized/ben_dancing_lights.webp' }}
             />
             <ContentItem

src/views/Campout/NavItems.js

@@ -1,7 +1,12 @@
 const NavItems = [
   { title: 'campout home', href: '/campout' },
   { title: 'what to expect', href: '/campout/what-to-expect' },
-  { title: 'dj line up', href: '/campout/dj-lineup' },
+  {
+    title: 'dj line up',
+    // href: '/campout/dj-lineup',
+    href: '',
+    tbd: 'COMING SOON!',
+  },
   { title: 'previous years', href: '/campout/last-year' },
   { title: 'q & a', href: '/campout/q-and-a' },
   //{ title: 'schedule', href: '/campout/schedule' },