fix: add governance menu

scroll-tech · Oct 24, 2024 · 9fd724e · 9fd724e
1 parent 57c5c0b
commit 9fd724e
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 12 deletions.
diff --git a/src/assets/svgs/header/Forum.svg b/src/assets/svgs/header/Forum.svg
diff --git a/src/assets/svgs/header/Home.svg b/src/assets/svgs/header/Home.svg
diff --git a/src/components/Header/constants.ts b/src/components/Header/constants.ts
@@ -3,6 +3,8 @@ import { ReactComponent as CanvasAndBadgesSvg } from "@/assets/svgs/header/Canva
 import { ReactComponent as CommunitySvg } from "@/assets/svgs/header/Community.svg"
 import { ReactComponent as DocsSvg } from "@/assets/svgs/header/Doc.svg"
 import { ReactComponent as EthereumSvg } from "@/assets/svgs/header/Eth.svg"
+import { ReactComponent as ForumSvg } from "@/assets/svgs/header/Forum.svg"
+import { ReactComponent as HomeSvg } from "@/assets/svgs/header/Home.svg"
 import { ReactComponent as IssuesSvg } from "@/assets/svgs/header/Issues.svg"
 import { ReactComponent as LevelUpSvg } from "@/assets/svgs/header/LevelUp.svg"
 import { ReactComponent as ProjectsSvg } from "@/assets/svgs/header/Projects.svg"
@@ -131,7 +133,7 @@ const mainnetNavigations = [
             icon: StatusSvg,
           },
           {
-            label: "Learn, build and innovate",
+            label: "Are you a developer?",
             text: "Level Up",
             key: "lelvel-up",
             href: "https://levelupweb3.xyz",
@@ -223,6 +225,44 @@ const mainnetNavigations = [
       },
     ],
   },
+  {
+    label: "Governance",
+    key: "governance",
+    new: true,
+    children: [
+      {
+        children: [
+          {
+            text: "Home",
+            label: "Get to know Scroll governance",
+            key: "governance-home",
+            rootKey: "governance",
+            href: "https://gov.scroll.io",
+            icon: HomeSvg,
+            isExternal: true,
+          },
+          {
+            text: "Documentations",
+            label: "Browse all the details about Scroll governance",
+            key: "governance-doc",
+            rootKey: "governance",
+            href: "https://gov.scroll.io/docs",
+            icon: DocsSvg,
+            isExternal: true,
+          },
+          {
+            text: "Forum",
+            label: "Participate in all the governance discussions",
+            key: "governance-forum",
+            rootKey: "governance",
+            href: "https://gov.scroll.io/forum",
+            icon: ForumSvg,
+            isExternal: true,
+          },
+        ],
+      },
+    ],
+  },
   {
     label: "Resources",
     key: "resources",
@@ -248,15 +288,15 @@ const mainnetNavigations = [
             rootKey: "resources",
           },
           {
-            label: "Security",
-            key: "security",
-            href: "https://docs.scroll.io/en/technology/security/audits-and-bug-bounty/",
+            label: "Forum",
+            key: "forum",
+            href: "https://community.scroll.io",
             isExternal: true,
           },
           {
-            label: "Whitepaper",
-            key: "whitepaper.pdf",
-            href: "/files/whitepaper.pdf",
+            label: "Security",
+            key: "security",
+            href: "https://docs.scroll.io/en/technology/security/audits-and-bug-bounty/",
             isExternal: true,
           },
         ],

diff --git a/src/components/Header/desktop_header.tsx b/src/components/Header/desktop_header.tsx
@@ -149,6 +149,10 @@ const App = ({ currentMenu }) => {
     setAnchorEl(null)
   }
 
+  const handleResetIsHover = () => {
+    setIsHover(false)
+  }
+
   const renderSubMenuList = children => {
     return children.map((section, idx) => (
       <SectionList key={idx} dark={dark}>
@@ -160,7 +164,7 @@ const App = ({ currentMenu }) => {
           // only show sub menu item when the href is set
           ?.filter(subItem => subItem.href)
           .map(subItem => (
-            <SubmenuLink key={subItem.label} {...subItem}></SubmenuLink>
+            <SubmenuLink key={subItem.label} {...subItem} onClick={handleResetIsHover}></SubmenuLink>
           ))}
       </SectionList>
     ))
@@ -172,16 +176,20 @@ const App = ({ currentMenu }) => {
         <SubMenuButton
           direction="row"
           alignItems="center"
-          spacing="6px"
           dark={dark}
           className={currentMenu === item.key ? "active" : ""}
           onMouseEnter={e => handleMouseEnter(e, item.key)}
           onMouseLeave={handleMouseLeave}
         >
           <span>{item.label}</span>
+          {item.new && (
+            <Box sx={{ backgroundColor: "#B5F5EC", padding: "0 0.8rem", height: "2rem", lineHeight: "2rem", borderRadius: "0.4rem", ml: "0.4rem" }}>
+              <Typography sx={{ fontSize: "1.2rem", lineHeight: "2rem", fontWeight: 600 }}>NEW</Typography>
+            </Box>
+          )}
           <SvgIcon
             className={cx("expand-more", item.key === checked && "expand-more-reverse")}
-            sx={{ fontSize: "0.9rem" }}
+            sx={{ fontSize: "0.9rem", ml: "1rem" }}
             component={TriangleDownSvg}
             inheritViewBox
           ></SvgIcon>
@@ -235,7 +243,16 @@ const App = ({ currentMenu }) => {
   }
 
   return (
-    <StyledBox bgColor={navbarBg} dark={dark} onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+    <StyledBox
+      bgColor={navbarBg}
+      dark={dark}
+      onMouseEnter={() => {
+        setIsHover(true)
+      }}
+      onMouseLeave={e => {
+        setIsHover(false)
+      }}
+    >
       <Announcement />
       <Container>
         <HeaderContainer>

diff --git a/src/components/Header/mobile_header.tsx b/src/components/Header/mobile_header.tsx
@@ -148,7 +148,23 @@ const App = ({ currentMenu }) => {
               sx={{ py: "1rem" }}
               onClick={() => toggleCollapse(item.key)}
             >
-              {item.label} <ExpandMoreIcon fontSize="large" className={activeCollapse === item.key ? "active" : ""} />
+              <Stack direction="row" alignItems="center" spacing="0.8rem">
+                <span>{item.label} </span>
+                {item.new && (
+                  <Box
+                    sx={{
+                      backgroundColor: "#B5F5EC",
+                      padding: "0 0.8rem",
+                      height: "2rem",
+                      lineHeight: "2rem",
+                      borderRadius: "0.4rem",
+                    }}
+                  >
+                    <Typography sx={{ fontSize: "1.2rem", lineHeight: "2rem", fontWeight: 600 }}>NEW</Typography>
+                  </Box>
+                )}
+              </Stack>
+              <ExpandMoreIcon fontSize="large" className={activeCollapse === item.key ? "active" : ""} />
             </ListItem>
           ) : (
             <ListItem dark={dark} className={activeCollapse === item.key ? "active" : ""} sx={{ py: "1rem" }} onClick={() => toggleDrawer(false)}>