From f3270d1111d3c2638d737816de96e0f7d42e7831 Mon Sep 17 00:00:00 2001
From: Damola18 <olutokeezekiel18@gmail.com>
Date: Wed, 15 Jan 2025 13:48:30 +0100
Subject: [PATCH 1/4] fix sidebar nav hover state

---
 src/components/dashboard/sidebar-item.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/dashboard/sidebar-item.tsx b/src/components/dashboard/sidebar-item.tsx
index 8cebcb35..f08924a3 100644
--- a/src/components/dashboard/sidebar-item.tsx
+++ b/src/components/dashboard/sidebar-item.tsx
@@ -41,8 +41,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
             color: 'brandText',
           }}
           transition="all .2s ease"
-          role="group"
-          display="flex"
+          position="relative"
           gap="2"
         >
           {typeof item.icon === 'string' ? (
@@ -51,13 +50,13 @@ export const SidebarItem = (props: SidebarItemProps) => {
             <Icon as={item.icon} boxSize="6" />
           )}
           {t(item.label)}
-          <NavIndicator
-            display="none"
-            _groupActive={{
-              display: 'inherit',
-            }}
-            ml="auto"
-          />
+          {isActiveRoute && (
+            <NavIndicator
+              position="absolute"
+              right="0"
+              bg="transparent"
+            />
+          )}
         </Flex>
       </LinkOverlay>
     </LinkBox>

From 4290337260d0de8eafa82e499233127afe743f96 Mon Sep 17 00:00:00 2001
From: Damola18 <olutokeezekiel18@gmail.com>
Date: Wed, 15 Jan 2025 13:49:08 +0100
Subject: [PATCH 2/4] add spacing

---
 src/components/client/TreasuryPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/client/TreasuryPage.tsx b/src/components/client/TreasuryPage.tsx
index a22263d2..954e8b1d 100644
--- a/src/components/client/TreasuryPage.tsx
+++ b/src/components/client/TreasuryPage.tsx
@@ -58,7 +58,7 @@ const TreasuryPage: NextPage = () => {
                 href="https://etherscan.io/address/0x56398b89d53e8731bca8c1b06886cfb14bd6b654"
                 isExternal
               >
-                IQ.eth
+                IQ.eth{' '}
               </Link>
             </Box>
             <Box as="span">{t('treasury')}</Box>

From dcb86f19e5124712a8f1621dd1400dc376ed9a9e Mon Sep 17 00:00:00 2001
From: Damola18 <olutokeezekiel18@gmail.com>
Date: Wed, 15 Jan 2025 13:49:35 +0100
Subject: [PATCH 3/4] fix lint

---
 src/components/dashboard/sidebar-item.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/dashboard/sidebar-item.tsx b/src/components/dashboard/sidebar-item.tsx
index f08924a3..27790cc9 100644
--- a/src/components/dashboard/sidebar-item.tsx
+++ b/src/components/dashboard/sidebar-item.tsx
@@ -51,11 +51,7 @@ export const SidebarItem = (props: SidebarItemProps) => {
           )}
           {t(item.label)}
           {isActiveRoute && (
-            <NavIndicator
-              position="absolute"
-              right="0"
-              bg="transparent"
-            />
+            <NavIndicator position="absolute" right="0" bg="transparent" />
           )}
         </Flex>
       </LinkOverlay>

From 68cb6390ca1f2e28dca0d7958f1af29a72da0919 Mon Sep 17 00:00:00 2001
From: Damola18 <olutokeezekiel18@gmail.com>
Date: Wed, 15 Jan 2025 14:33:14 +0100
Subject: [PATCH 4/4] Refactor SidebarItem to handle external links properly

---
 src/components/dashboard/sidebar-item.tsx | 79 ++++++++++++++---------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/src/components/dashboard/sidebar-item.tsx b/src/components/dashboard/sidebar-item.tsx
index 27790cc9..0daf9963 100644
--- a/src/components/dashboard/sidebar-item.tsx
+++ b/src/components/dashboard/sidebar-item.tsx
@@ -4,6 +4,7 @@ import { Flex, FlexProps, Icon, LinkBox, Image } from '@chakra-ui/react'
 import { dataAttr } from '@chakra-ui/utils'
 import { usePathname } from 'next/navigation'
 import React from 'react'
+import Link from 'next/link'
 import LinkOverlay from '../elements/LinkElements/LinkOverlay'
 import { useTranslations } from 'next-intl'
 
@@ -20,41 +21,57 @@ export const SidebarItem = (props: SidebarItemProps) => {
 
   const pathname = usePathname()
   const isActiveRoute = pathname?.endsWith(item.route)
+  const isExternalLink = item.route.startsWith('http')
+
+  const renderLinkContent = () => (
+    <Flex
+      h="40px"
+      align="center"
+      pl={{ base: 5, lg: '15' }}
+      cursor="pointer"
+      data-active={dataAttr(isActiveRoute)}
+      color="grayText"
+      fontWeight="medium"
+      _hover={{
+        bg: 'divider',
+        color: 'dimmedText',
+      }}
+      _active={{
+        bg: 'hoverBg',
+        color: 'brandText',
+      }}
+      transition="all .2s ease"
+      position="relative"
+      gap="2"
+    >
+      {typeof item.icon === 'string' ? (
+        <Image src={item.icon} boxSize="6" alt="icon" />
+      ) : (
+        <Icon as={item.icon} boxSize="6" />
+      )}
+      {t(item.label)}
+      {isActiveRoute && (
+        <NavIndicator position="absolute" right="0" bg="transparent" />
+      )}
+    </Flex>
+  )
 
   return (
     <LinkBox {...rest}>
-      <LinkOverlay href={item.route} target={item.target} onClick={onClose}>
-        <Flex
-          h="40px"
-          align="center"
-          pl={{ base: 5, lg: '15' }}
-          cursor="pointer"
-          data-active={dataAttr(isActiveRoute)}
-          color="grayText"
-          fontWeight="medium"
-          _hover={{
-            bg: 'divider',
-            color: 'dimmedText',
-          }}
-          _active={{
-            bg: 'hoverBg',
-            color: 'brandText',
-          }}
-          transition="all .2s ease"
-          position="relative"
-          gap="2"
+      {isExternalLink ? (
+        <Link
+          href={item.route}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={onClose}
         >
-          {typeof item.icon === 'string' ? (
-            <Image src={item.icon} boxSize="6" alt="icon" />
-          ) : (
-            <Icon as={item.icon} boxSize="6" />
-          )}
-          {t(item.label)}
-          {isActiveRoute && (
-            <NavIndicator position="absolute" right="0" bg="transparent" />
-          )}
-        </Flex>
-      </LinkOverlay>
+          {renderLinkContent()}
+        </Link>
+      ) : (
+        <LinkOverlay href={item.route} target={item.target} onClick={onClose}>
+          {renderLinkContent()}
+        </LinkOverlay>
+      )}
     </LinkBox>
   )
 }