From 8a00942004dd6e6ee77496cda452db6602b52289 Mon Sep 17 00:00:00 2001
From: yuliferna <yuliferna123@gmail.com>
Date: Mon, 27 Nov 2023 10:14:44 -0400
Subject: [PATCH 1/2] advances

---
 apps/connect/src/components/atoms/NavBar.tsx | 53 ++++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx
index d0b422c1c..159244852 100644
--- a/apps/connect/src/components/atoms/NavBar.tsx
+++ b/apps/connect/src/components/atoms/NavBar.tsx
@@ -6,6 +6,9 @@ import Toolbar from "@mui/material/Toolbar";
 import styled from "@mui/material/styles/styled";
 import Box from "@mui/material/Box";
 import portal from "../../assets/imgs/logo-white.svg";
+import MenuIcon from '@mui/icons-material/Menu';
+import { useState } from "react";
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   background: "transparent",
@@ -28,6 +31,12 @@ const Link = styled(MuiLink)(({ theme }) => ({
   textUnderlineOffset: "6px",
   [theme.breakpoints.down("sm")]: {
     marginLeft: theme.spacing(2.5),
+    fontSize: "0.9rem",
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingRight: 16,
+    width: "100%",
+    lineHeight: "45px",
   },
   [theme.breakpoints.down("xs")]: {
     marginLeft: theme.spacing(1),
@@ -64,7 +73,19 @@ const Spacer = styled("div")(() => ({
   width: "100vw",
 }));
 
+const womrholescanButton = <Box>
+  <Link
+    href="https://wormholescan.io"
+    target="_blank"
+    color="inherit"
+  >
+    Wormholescan
+  </Link>
+  <Chip label="NEW" size="small" />
+</Box>;
+
 export default function NavBar() {
+  const [openMenu, setOpenMenu] = useState(false);
   return (
     <AppBar position="static" color="inherit">
       <Toolbar>
@@ -72,7 +93,7 @@ export default function NavBar() {
           <Logo src={portal} alt="Portal" />
         </MuiLink>
         <Spacer />
-        <Hidden implementation="css" xsDown>
+        <Hidden implementation="css" smDown>
           <div style={{ display: "flex", alignItems: "center" }}>
             {
               navBar.map(({ label, active, href }, idx) =>
@@ -86,19 +107,29 @@ export default function NavBar() {
                 </Link>
               )
             }
-            <Box>
-              <Link
-                href="https://wormholescan.io"
-                target="_blank"
-                color="inherit"
-              >
-                Wormholescan
-              </Link>
-              <Chip label="NEW" size="small" />
-            </Box>
+            {womrholescanButton}
           </div>
         </Hidden>
+        <Hidden implementation="css" smUp>
+          <MenuIcon onClick={() => { setOpenMenu(!openMenu) }} />
+        </Hidden>
       </Toolbar>
+      {openMenu && <Hidden implementation="css" smUp>
+      <List>
+          {
+            navBar.map(({ label, href }, idx) =>
+              <ListItem key={`${label}_${idx}`}>
+                <ListItemButton component="a" href={href}>
+                  <ListItemText primary={label} />
+                </ListItemButton>
+              </ListItem>
+            )
+          }
+          <ListItem>
+            {womrholescanButton}
+          </ListItem>
+      </List>
+      </Hidden>}
     </AppBar>
   );
 }

From 91c46aae7a697f37e289b024a470e6f77c5f5440 Mon Sep 17 00:00:00 2001
From: yuliferna <yuliferna123@gmail.com>
Date: Mon, 27 Nov 2023 10:29:34 -0400
Subject: [PATCH 2/2] fix prettier

---
 apps/connect/src/components/atoms/NavBar.tsx | 72 ++++++++++----------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/apps/connect/src/components/atoms/NavBar.tsx b/apps/connect/src/components/atoms/NavBar.tsx
index 159244852..b2f46153b 100644
--- a/apps/connect/src/components/atoms/NavBar.tsx
+++ b/apps/connect/src/components/atoms/NavBar.tsx
@@ -6,7 +6,7 @@ import Toolbar from "@mui/material/Toolbar";
 import styled from "@mui/material/styles/styled";
 import Box from "@mui/material/Box";
 import portal from "../../assets/imgs/logo-white.svg";
-import MenuIcon from '@mui/icons-material/Menu';
+import MenuIcon from "@mui/icons-material/Menu";
 import { useState } from "react";
 import { List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 
@@ -25,7 +25,7 @@ const Link = styled(MuiLink)(({ theme }) => ({
   ...theme.typography.body2,
   fontSize: "14px",
   fontWeight: 400,
-  fontFamily: "\"Poppins\", regular",
+  fontFamily: '"Poppins", regular',
   color: "#FFFFFFE6",
   marginLeft: theme.spacing(7),
   textUnderlineOffset: "6px",
@@ -42,7 +42,7 @@ const Link = styled(MuiLink)(({ theme }) => ({
     marginLeft: theme.spacing(1),
   },
   ":hover": {
-    textDecoration: "underline"
+    textDecoration: "underline",
   },
 }));
 
@@ -73,16 +73,14 @@ const Spacer = styled("div")(() => ({
   width: "100vw",
 }));
 
-const womrholescanButton = <Box>
-  <Link
-    href="https://wormholescan.io"
-    target="_blank"
-    color="inherit"
-  >
-    Wormholescan
-  </Link>
-  <Chip label="NEW" size="small" />
-</Box>;
+const womrholescanButton = (
+  <Box>
+    <Link href="https://wormholescan.io" target="_blank" color="inherit">
+      Wormholescan
+    </Link>
+    <Chip label="NEW" size="small" />
+  </Box>
+);
 
 export default function NavBar() {
   const [openMenu, setOpenMenu] = useState(false);
@@ -95,41 +93,41 @@ export default function NavBar() {
         <Spacer />
         <Hidden implementation="css" smDown>
           <div style={{ display: "flex", alignItems: "center" }}>
-            {
-              navBar.map(({ label, active, href }, idx) =>
-                <Link
-                  key={`${label}_${idx}`}
-                  href={href}
-                  color="inherit"
-                  sx={{ textDecoration: active ? "underline" : "none" }}
-                >
-                  {label}
-                </Link>
-              )
-            }
+            {navBar.map(({ label, active, href }, idx) => (
+              <Link
+                key={`${label}_${idx}`}
+                href={href}
+                color="inherit"
+                sx={{ textDecoration: active ? "underline" : "none" }}
+              >
+                {label}
+              </Link>
+            ))}
             {womrholescanButton}
           </div>
         </Hidden>
         <Hidden implementation="css" smUp>
-          <MenuIcon onClick={() => { setOpenMenu(!openMenu) }} />
+          <MenuIcon
+            onClick={() => {
+              setOpenMenu(!openMenu);
+            }}
+          />
         </Hidden>
       </Toolbar>
-      {openMenu && <Hidden implementation="css" smUp>
-      <List>
-          {
-            navBar.map(({ label, href }, idx) =>
+      {openMenu && (
+        <Hidden implementation="css" smUp>
+          <List>
+            {navBar.map(({ label, href }, idx) => (
               <ListItem key={`${label}_${idx}`}>
                 <ListItemButton component="a" href={href}>
                   <ListItemText primary={label} />
                 </ListItemButton>
               </ListItem>
-            )
-          }
-          <ListItem>
-            {womrholescanButton}
-          </ListItem>
-      </List>
-      </Hidden>}
+            ))}
+            <ListItem>{womrholescanButton}</ListItem>
+          </List>
+        </Hidden>
+      )}
     </AppBar>
   );
 }