refactor(components): rewrite NavLink component

* handle style variants to avoid declaring the styles in consumers

1 files changed, 2 insertions, 3 deletions

diff --git a/src/components/molecules/nav/nav-list.tsx b/src/components/molecules/nav/nav-list.tsx
index b3c7138..a6acdcf 100644
--- a/src/components/molecules/nav/nav-list.tsx
+++ b/src/components/molecules/nav/nav-list.tsx
@@ -49,8 +49,7 @@ export const NavList: FC<NavListProps> = ({
   listClassName = '',
   ...props
 }) => {
-  const kindClass = `nav--${kind}`;
-  const navClass = `${styles.nav} ${styles[kindClass]} ${className}`;
+  const navClass = [styles[`nav--${kind}`], className].join(' ');
 
   /**
    * Get the nav items.
@@ -60,7 +59,7 @@ export const NavList: FC<NavListProps> = ({
     items.map(({ id, href, label, logo }) => (
       <ListItem key={id} className={styles.nav__item}>
         {kind === 'main' ? (
-          <NavLink href={href} label={label} logo={logo} />
+          <NavLink href={href} label={label} logo={logo} variant="main" />
         ) : (
           <Link href={href}>{label}</Link>
         )}