Add v4 announcement in side navbar (#29)

hi, i was asked by marketing to make the v4 announcement more prominent on the website. let me know what you think.
web3 · Jul 3, 2023 · 1a2213f · 1a2213f
1 parent dbe3bca
commit 1a2213f
Show file tree

Hide file tree

Showing 8 changed files with 317 additions and 455 deletions.
diff --git a/src/Components/Modules/NavBar.tsx b/src/Components/Modules/NavBar.tsx
@@ -90,97 +90,91 @@ const NavBar: React.FC = () => {
 
   const isMobile = useMediaQuery("(max-width: 1170px)");
 
-  // const toggleNav = () => {
-  //   setIsNavVisible(!isNavVisible);
-  // }
 
   const scrollToTop = useScrollToTop();
 
-  return (
-    <nav className={classes.container}>
-      {scrollToTop}
-      {!isMobile && 
-      <Grid item alignItems="center" className={classes.linksMenu}>
-        <Grid container justifyContent="flex-start" alignItems="center">
-          <Grid item alignItems="flex-start">
-            <div className={classes.flex}>
-              <img
-                className={classes.logo}
-                src={web3js}
-                alt="web3js logo"
-              />
-              <Typography variant="h5">
-                <Link href="/" className={classes.navlink}>
+  if (isMobile && !isNavVisible)
+    return (
+      <nav>
+        {scrollToTop}
+        <Grid
+          container
+          justifyContent='flex-start'
+          alignItems='center'
+          className={classes.linksMenu}>
+          <Grid item>
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <img className={classes.logo} src={web3js} alt='web3js logo' />
+              <Typography variant='h5'>
+                <a href='/' className={classes.navlink}>
                   Web3.js
-                </Link>
+                </a>
               </Typography>
             </div>
           </Grid>
-            <Typography variant="h5">
+          <Grid item alignItems='flex-end'>
+            <MobileNav />
+          </Grid>
+        </Grid>
+      </nav>
+    );
+
+  return (
+    <>
+      <nav className={classes.container}>
+        {scrollToTop}
+        <Grid item alignItems='center' className={classes.linksMenu}>
+          <Grid container justifyContent='flex-start' alignItems='center'>
+            <Grid item alignItems='flex-start'>
+              <div className={classes.flex}>
+                <img className={classes.logo} src={web3js} alt='web3js logo' />
+                <Typography variant='h5'>
+                  <Link to='/' className={classes.navlink}>
+                    Web3.js
+                  </Link>
+                </Typography>
+              </div>
+            </Grid>
+            <Typography variant='h5'>
               <a
-                target="_blank"
-                rel="noopener noreferrer"
+                target='_blank'
+                rel='noopener noreferrer'
                 href={docsUrl}
-                className={classes.navlink}
-              >
+                className={classes.navlink}>
                 <Trans>Docs</Trans>
               </a>
             </Typography>
-            <Typography variant="h5">
+            <Typography variant='h5'>
               <a
-                target="_blank"
-                rel="noopener noreferrer"
+                target='_blank'
+                rel='noopener noreferrer'
                 href={discordUrl}
-                className={classes.navlink}
-              >
+                className={classes.navlink}>
                 <Trans>Community</Trans>
               </a>
             </Typography>
-            <Typography variant="h5">
+            <Typography variant='h5'>
               <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://medium.com/chainsafe-systems/tagged/ethereum"
-                className={classes.navlink}
-              >
+                target='_blank'
+                rel='noopener noreferrer'
+                href='https://medium.com/chainsafe-systems/tagged/ethereum'
+                className={classes.navlink}>
                 <Trans>Blog</Trans>
               </a>
             </Typography>
-            <Typography variant="h5">
+            <Typography variant='h5'>
               <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://github.com/web3/web3.js"
-                className={classes.navlink}
-              >
+                target='_blank'
+                rel='noopener noreferrer'
+                href='https://github.com/web3/web3.js'
+                className={classes.navlink}>
                 <Trans>GitHub</Trans>
               </a>
             </Typography>
           </Grid>
-        </Grid>}
-      {(isMobile && !isNavVisible) && (
-      <Grid container justifyContent="flex-start" alignItems="center" className={classes.linksMenu}>
-        <Grid item >
-            <div style={{display: "flex", alignItems: "center"}}>
-              <img
-                className={classes.logo}
-                src={web3js}
-                alt="web3js logo"
-              />
-              <Typography variant="h5">
-                <a href="/" className={classes.navlink}>
-                  Web3.js
-                </a>
-              </Typography>
-            </div>
-          </Grid>
-          <Grid item alignItems="flex-end">
-            <MobileNav/>
-          </Grid>
         </Grid>
-      )}
-
-    </nav >
+      </nav>
+    </>
   );
 };
 

diff --git a/src/Components/Pages/HomePage.tsx b/src/Components/Pages/HomePage.tsx
@@ -4,17 +4,13 @@ import { makeStyles, ITheme, createStyles } from '@chainsafe/common-theme';
 import { useLanguageContext } from '../../LanguageContext';
 import NavBar2 from '../Modules/NavBar';
 import Footer from '../Modules/Footer';
-import Hero2 from '../Subpages/Hero2';
+import Hero2 from '../Subpages/Hero';
 import About from '../Subpages/About';
 import Features from '../Subpages/Features';
 import CodeBlocks from '../Subpages/CodeBlocks';
 import UsedBy from '../Subpages/UsedBy';
 import Stats from '../Subpages/Stats';
 import Timeline from '../Subpages/Timeline';
-// import { Hero } from '../Subpages/Hero/Hero';
-// import { About2 } from '../Subpages/About/About';
-// import { Features2 } from '../Subpages/Features/Features';
-// import { CodeBlocks2 } from '../Subpages/CodeBlocks/CodeBlocks';
 
 const useStyles = makeStyles(({ constants, breakpoints }: ITheme) => {
   return createStyles({