Merge pull request #678 from filipedeschamps/preview

feat(header): set header link to active (#675)

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 === '/' || pathname.startsWith('/pagina')) && 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.startsWith('/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.startsWith('/status') && activeLinkStyle) }}>
           Status
         </Header.Link>
       </Header.Item>