reorder links in the Nav, fix margin of Collapse Nav Item

pendulum-chain · Jun 4, 2024 · 6c9e12b · 6c9e12b
1 parent f921569
commit 6c9e12b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/src/components/Layout/Nav.tsx b/src/components/Layout/Nav.tsx
@@ -28,7 +28,7 @@ const CollapseMenu = ({
   const [isOpen, { toggle }] = useBoolean(isActive);
 
   return (
-    <section className={`collapse  ${disabled ? 'disabled' : 'collapse-arrow'} ${isOpen ? 'collapse-open' : ''}`}>
+    <section className={`collapse ${disabled ? 'disabled' : 'collapse-arrow'} ${isOpen ? 'collapse-open' : ''}`}>
       <button
         type="button"
         className={`nav-item collapse-btn collapse-title ${isActive ? 'active' : ''}`}
@@ -93,7 +93,7 @@ const Nav = memo(({ onClick }: NavProps) => {
       {links(state).map((item, i) => {
         if (item.hidden) return;
         return item.submenu ? (
-          <div onMouseEnter={handleMouseEnter}>
+          <div onMouseEnter={handleMouseEnter} className="my-2.5">
             <CollapseMenu
               key={i}
               link={item.link}

diff --git a/src/components/Layout/links.tsx b/src/components/Layout/links.tsx
@@ -91,24 +91,6 @@ export const links: Links = ({ tenantName }) => [
       },
     ],
   },
-  {
-    link: './staking',
-    title: 'Staking',
-    props: {
-      className: ({ isActive } = {}) => (isActive ? 'active' : ''),
-    },
-    prefix: <StakingIcon />,
-  },
-  {
-    link: `https://${tenantName}.polkassembly.io/`,
-    title: 'Governance',
-    props: {
-      target: '_blank',
-      rel: 'nofollow noreferrer',
-    },
-    prefix: <GovernanceIcon />,
-    suffix: <ExternalIcon />,
-  },
   {
     link: '/nabla',
     title: 'Forex AMM',
@@ -134,6 +116,25 @@ export const links: Links = ({ tenantName }) => [
       },
     ],
   },
+  {
+    link: './staking',
+    title: 'Staking',
+    props: {
+      className: ({ isActive } = {}) => (isActive ? 'active' : ''),
+    },
+    prefix: <StakingIcon />,
+  },
+  {
+    link: `https://${tenantName}.polkassembly.io/`,
+    title: 'Governance',
+    props: {
+      target: '_blank',
+      rel: 'nofollow noreferrer',
+    },
+    prefix: <GovernanceIcon />,
+    suffix: <ExternalIcon />,
+  },
+
   {
     link: config.alchemyPay.encodeUrlWithRedirection(config.alchemyPay.prodUrl, window.location.href),
     title: 'Buy PEN',