From d2417f67c13d3d7290ae0303e81819b2f03d7680 Mon Sep 17 00:00:00 2001
From: Gabriel Paiva <paivadepaiva00@gmail.com>
Date: Tue, 23 Aug 2022 16:32:12 -0300
Subject: [PATCH] feat(header): set header link to active

---
 pages/interface/components/Header/index.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/pages/interface/components/Header/index.js b/pages/interface/components/Header/index.js
index 6d5cdfce6..63db6f3dd 100644
--- a/pages/interface/components/Header/index.js
+++ b/pages/interface/components/Header/index.js
@@ -2,27 +2,37 @@ import { Header, Box, ActionMenu, ActionList, IconButton, Truncate, Text, Toolti
 import { PersonFillIcon, HomeIcon, SquareFillIcon } from '@primer/octicons-react';
 import { CgTab } from 'react-icons/cg';
 import { useUser } from 'pages/interface/index.js';
+import { useRouter } from 'next/router';
 
 export default function HeaderComponent() {
   const { user, isLoading, logout } = useUser();
+  const { pathname } = useRouter();
+
+  const activeLinkStyle = {
+    textDecoration: 'underline',
+    textUnderlineOffset: 6,
+  };
 
   return (
     <Header>
       <Header.Item>
-        <Header.Link href="/" fontSize={2}>
+        <Header.Link href="/" fontSize={2} sx={pathname === '/' && activeLinkStyle}>
           <CgTab size={32} />
-          <Box sx={{ ml: 2, display: ['none', 'block'] }}>TabNews</Box>
+          <Box sx={{ ml: 2 }}>Relevantes</Box>
         </Header.Link>
       </Header.Item>
 
       <Header.Item>
-        <Header.Link href="/recentes" fontSize={2}>
+        <Header.Link href="/recentes" fontSize={2} sx={pathname.includes('recentes') && activeLinkStyle}>
           Recentes
         </Header.Link>
       </Header.Item>
 
       <Header.Item full>
-        <Header.Link href="/status" fontSize={2}>
+        <Header.Link
+          href="/status"
+          fontSize={2}
+          sx={{ display: ['none', 'block'], ...(pathname.includes('status') && activeLinkStyle) }}>
           Status
         </Header.Link>
       </Header.Item>