From 79171aae6980faf75437a489d0269f487d1000c1 Mon Sep 17 00:00:00 2001
From: Emiel Van Severen <github@vanseveren.dev>
Date: Sat, 8 Jun 2024 16:05:24 +0200
Subject: [PATCH] Revert "Chore: try without motion div"

This reverts commit 2d515e87427c31e883f6e2785e7dbf3d79913786.
---
 .../navigation/HorizontalNav/index.tsx        | 23 ++++++++-----------
 .../navigation/HorizontalNav/style.ts         | 10 --------
 .../routes/_auth/_global/player.$playerId.tsx | 17 ++++++++++++--
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/lib-components/src/components/navigation/HorizontalNav/index.tsx b/packages/lib-components/src/components/navigation/HorizontalNav/index.tsx
index 3b3ba9df5d..e9060c2768 100644
--- a/packages/lib-components/src/components/navigation/HorizontalNav/index.tsx
+++ b/packages/lib-components/src/components/navigation/HorizontalNav/index.tsx
@@ -1,6 +1,6 @@
-import { FC, Fragment } from 'react';
+import { FC } from 'react';
 import { Link, LinkProps } from '@tanstack/react-router';
-import { NavBar } from './style';
+import { Block, NavBar, Underline } from './style';
 
 export type HorizontalNavVariant = 'underline' | 'block';
 
@@ -19,18 +19,15 @@ export const HorizontalNav: FC<HorizontalNavProps> = ({ links, variant }) => {
   return (
     <NavBar variant={variant}>
       {links.map(({ text, to, params }) => {
-        const baseKey = JSON.stringify(to + params);
         return (
-          <Link
-            key={`${baseKey}-link`}
-            to={to}
-            params={{ params }}
-            activeOptions={{ exact: true }}
-            activeProps={{ className: 'active' }}
-          >
-            <Fragment key={`${baseKey}-container`}>
-              <span key={`${baseKey}-text`}>{text}</span>
-            </Fragment>
+          <Link to={to} params={{ params }}>
+            {({ isActive }) => (
+              <>
+                {isActive && variant === 'block' && <Block layoutId="block" />}
+                {isActive && variant === 'underline' && <Underline layoutId="underline" />}
+                <span>{text}</span>
+              </>
+            )}
           </Link>
         );
       })}
diff --git a/packages/lib-components/src/components/navigation/HorizontalNav/style.ts b/packages/lib-components/src/components/navigation/HorizontalNav/style.ts
index 6db7505a35..970828eb93 100644
--- a/packages/lib-components/src/components/navigation/HorizontalNav/style.ts
+++ b/packages/lib-components/src/components/navigation/HorizontalNav/style.ts
@@ -53,16 +53,6 @@ export const NavBar = styled.nav<{ variant: HorizontalNavVariant }>`
 
     &.active {
       color: ${({ theme }) => theme.colors.text};
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -${({ theme }) => theme.spacing['0_75']};
-        left: 0;
-        width: 100%;
-        height: 2px;
-        background-color: ${({ theme }) => theme.colors.primary};
-      }
     }
   }
 `;
diff --git a/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx b/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx
index 68220f63ad..6bf6af73a1 100644
--- a/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx
+++ b/packages/web-main/src/routes/_auth/_global/player.$playerId.tsx
@@ -1,5 +1,5 @@
-import { Stats, styled, Skeleton, useTheme, Avatar, getInitials, HorizontalNav } from '@takaro/lib-components';
-import { Outlet, redirect, createFileRoute } from '@tanstack/react-router';
+import { Stats, styled, Skeleton, useTheme, Avatar, getInitials } from '@takaro/lib-components';
+import { Outlet, redirect, createFileRoute, Link } from '@tanstack/react-router';
 import { DateTime } from 'luxon';
 import { playerQueryOptions } from 'queries/player';
 import { playersOnGameServersQueryOptions } from 'queries/pog';
@@ -78,6 +78,18 @@ function Component() {
         </div>
       </Header>
 
+      <div>
+        <Link to="/player/$playerId/info" params={{ playerId }}>
+          info
+        </Link>
+        <Link to="/player/$playerId/events" params={{ playerId }}>
+          events
+        </Link>
+        <Link to="/player/$playerId/economy" params={{ playerId }}>
+          economy
+        </Link>
+      </div>
+      {/*
       <HorizontalNav
         links={[
           {
@@ -99,6 +111,7 @@ function Component() {
         ]}
         variant="underline"
       />
+      */}
       <ErrorBoundary>
         <Outlet />
       </ErrorBoundary>