Creationshop/cannaiq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Use React Router Link for nav to prevent scroll reset

Browse Source 
Changed sidebar NavLink from <a> to <Link> for client-side navigation.
This prevents full page reload and scroll position reset.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Kelly
2025-12-11 09:59:34 -07:00
parent 529c447413
commit be251c6fb3
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
cannaiq/src/components/Layout.tsx
View File

@@ -1,5 +1,5 @@
import { ReactNode, useEffect, useState } from 'react'; import { ReactNode, useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom'; import { useNavigate, useLocation, Link } from 'react-router-dom';
import { useAuthStore } from '../store/authStore'; import { useAuthStore } from '../store/authStore';
import { api } from '../lib/api'; import { api } from '../lib/api';
import { StateSelector } from './StateSelector'; import { StateSelector } from './StateSelector';
@@ -48,8 +48,8 @@ interface NavLinkProps {
function NavLink({ to, icon, label, isActive }: NavLinkProps) { function NavLink({ to, icon, label, isActive }: NavLinkProps) {
return ( return (
<a <Link
href={to} to={to}
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${ className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
isActive isActive
? 'bg-emerald-50 text-emerald-700' ? 'bg-emerald-50 text-emerald-700'
@@ -58,7 +58,7 @@ function NavLink({ to, icon, label, isActive }: NavLinkProps) {
> >
<span className={`flex-shrink-0 ${isActive ? 'text-emerald-600' : 'text-gray-400'}`}>{icon}</span> <span className={`flex-shrink-0 ${isActive ? 'text-emerald-600' : 'text-gray-400'}`}>{icon}</span>
<span>{label}</span> <span>{label}</span>
</a> </Link>
); );
} }