refactor: SidebarNav uses usePathname and Link instead of IntersectionObserver

src/widgets/Navigation/ui/SidebarNav.test.tsx

@@ -2,21 +2,23 @@ import { render, screen } from '@testing-library/react';
 import type { NavItem } from '../model/types';
 import { SidebarNav } from './SidebarNav';
 
+vi.mock('next/navigation', () => ({
+  usePathname: vi.fn(),
+}));
+
+import { usePathname } from 'next/navigation';
+
 const ITEMS: NavItem[] = [
   { id: 'bio', label: 'Bio', number: '01' },
   { id: 'work', label: 'Work', number: '02' },
 ];
 
-beforeEach(() => {
-  global.IntersectionObserver = class {
-    observe = vi.fn();
-    disconnect = vi.fn();
-    unobserve = vi.fn();
-  } as unknown as typeof IntersectionObserver;
-});
-
 describe('SidebarNav', () => {
   describe('rendering', () => {
+    beforeEach(() => {
+      vi.mocked(usePathname).mockReturnValue('/bio');
+    });
+
     it('renders a nav element', () => {
       render(<SidebarNav items={ITEMS} />);
       expect(screen.getByRole('navigation')).toBeInTheDocument();
@@ -50,10 +52,33 @@ describe('SidebarNav', () => {
       expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument();
     });
 
-    it('renders a button for each item', () => {
+    it('renders a link for each nav item', () => {
       render(<SidebarNav items={ITEMS} />);
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThanOrEqual(ITEMS.length);
+      expect(screen.getByRole('link', { name: /Bio/i })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: /Work/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('active state', () => {
+    it('marks matching pathname item as active (no opacity-40)', () => {
+      vi.mocked(usePathname).mockReturnValue('/bio');
+      render(<SidebarNav items={ITEMS} />);
+      const activeLink = screen.getByRole('link', { name: /Bio/i });
+      expect(activeLink).not.toHaveClass('opacity-40');
+    });
+
+    it('marks non-matching item as inactive (opacity-40)', () => {
+      vi.mocked(usePathname).mockReturnValue('/bio');
+      render(<SidebarNav items={ITEMS} />);
+      const inactiveLink = screen.getByRole('link', { name: /Work/i });
+      expect(inactiveLink).toHaveClass('opacity-40');
+    });
+
+    it('marks first item active at root path', () => {
+      vi.mocked(usePathname).mockReturnValue('/');
+      render(<SidebarNav items={ITEMS} />);
+      const firstLink = screen.getByRole('link', { name: /Bio/i });
+      expect(firstLink).not.toHaveClass('opacity-40');
     });
   });
 });