Dominick/639 feat: add user account link to sidebar

components/Nav/Nav.test.tsx

@@ -75,6 +75,15 @@ describe('Nav', () => {
     expect(linkNav).toHaveAttribute('href', '/league/all');
   });
 
+  it('renders link to user profile', async () => {
+    render(<Nav />);
+    fireEvent.click(screen.getByTestId('drawer-trigger'));
+    let linkNav: HTMLElement;
+    linkNav = screen.getByTestId('profile-link');
+    expect(linkNav).toBeInTheDocument();
+    expect(linkNav).toHaveAttribute('href', '/account/profile');
+  });
+
   it('it should render the default component state', () => {
     mockUsePathname.mockImplementation(() => '/league/all');
 

components/Nav/Nav.tsx

@@ -6,7 +6,7 @@ import React, { JSX } from 'react';
 import LogoNav from '../LogoNav/LogoNav';
 import { Menu } from 'lucide-react';
 import { Button } from '../Button/Button';
-import Link from 'next/link';
+import NavLink from '../NavLink/NavLink';
 import {
   Drawer,
   DrawerContent,
@@ -29,6 +29,12 @@ export const Nav = (): JSX.Element => {
   const { logoutAccount } = useAuthContext();
   const [open, setOpen] = React.useState(false);
 
+  /**
+   * Handles closing the drawer.
+   * @returns {void} No return value.
+   */
+  const handleClose = (): void => setOpen(false);
+
   /**
    * Handles the logout.
    * @returns {Promise<void>} The logout promise.
@@ -69,28 +75,27 @@ export const Nav = (): JSX.Element => {
                 <DrawerTitle data-testid="title">Gridiron Survivor</DrawerTitle>
               </DrawerHeader>
               <ul className="m-0 flex flex-col gap-1 p-0">
-                <li>
-                  <Link
-                    href="/account/settings"
-                    className="underline underline-offset-4 hover:text-primary-muted transition-colors"
-                    onClick={() => setOpen(false)}
-                    data-testid="settings-link"
-                  >
-                    Settings
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    data-testid="league-link"
-                    href="/league/all"
-                    className={cn(
-                      'underline underline-offset-4 hover:text-primary-muted transition-colors',
-                    )}
-                    onClick={() => setOpen(false)}
-                  >
-                    Leagues
-                  </Link>
-                </li>
+                <NavLink
+                  href="/account/settings"
+                  testId="settings-link"
+                  onClose={handleClose}
+                >
+                  Settings
+                </NavLink>
+                <NavLink
+                  href="/league/all"
+                  testId="league-link"
+                  onClose={handleClose}
+                >
+                  Leagues
+                </NavLink>
+                <NavLink
+                  href="/account/profile"
+                  testId="profile-link"
+                  onClose={handleClose}
+                >
+                  Profile
+                </NavLink>
                 <li>
                   <Button
                     className="p-0 text-base font-normal hover:text-primary-muted transition-colors text-white"

components/NavLink/NavLink.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import NavLink from './NavLink';
+
+describe('NavLink componenet', () => {
+  it('renders link with href and testId', () => {
+    render(
+      <NavLink href="test/url" testId="test-link">
+        Test Link
+      </NavLink>,
+    );
+
+    const link = screen.getByTestId('test-link');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'test/url');
+    expect(link).toHaveTextContent('Test Link');
+  });
+
+  it('calls onClose when link is clicked', () => {
+    const handleClose = jest.fn();
+    render(
+      <NavLink href="/test-url" testId="test-link" onClose={handleClose}>
+        Test Link
+      </NavLink>,
+    );
+
+    const linkNav = screen.getByTestId('test-link');
+    fireEvent.click(linkNav);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+});

components/NavLink/NavLink.tsx

@@ -0,0 +1,44 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import React, { JSX } from 'react';
+import Link from 'next/link';
+import { cn } from '@/utils/utils';
+interface NavLinkProps {
+  href: string;
+  testId: string;
+  children: React.ReactNode;
+  onClose?: () => void;
+}
+
+/**
+ * Renders a navigation link.
+ * @param {string} props.href - The URL the link points to.
+ * @param {string} props.testId - The test ID for the link.
+ * @param {React.ReactNode} props.children - The content to be rendered inside the link.
+ * @param {Function} [props.onClose] - function to be called when the link is clicked.
+ * @returns {JSX.Element} The rendered navigation link.
+ */
+const NavLink = ({
+  href,
+  testId,
+  children,
+  onClose,
+}: NavLinkProps): JSX.Element => {
+  return (
+    <li>
+      <Link
+        href={href}
+        data-testid={testId}
+        className={cn(
+          'underline underline-offset-4 hover:text-primary-muted transition-colors',
+        )}
+        onClick={onClose}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+};
+
+export default NavLink;