fix: smooth client-side sidebar navigation with useNavigate
Replaced <a> tags with button + useNavigate() for instant SPA navigation without full page reloads. Sidebar now: - Uses TanStack Router useNavigate for all menu items - Closes mobile menu on navigation (onClose callback) - No more page flicker when switching between sections - Logout redirects to /auth/login via navigate Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
b2ed098067
commit
8cb7b592eb
@@ -20,7 +20,7 @@ import {
|
|||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import { Button } from '../../atoms';
|
import { Button } from '../../atoms';
|
||||||
import { FC, ReactElement, useState } from 'react';
|
import { FC, ReactElement, useState } from 'react';
|
||||||
import { useLocation } from '@tanstack/react-router';
|
import { useLocation, useNavigate } from '@tanstack/react-router';
|
||||||
import { cn, For } from '@imphnen-frontend-service/utils';
|
import { cn, For } from '@imphnen-frontend-service/utils';
|
||||||
import { useSession } from '@imphnen-frontend-service/service';
|
import { useSession } from '@imphnen-frontend-service/service';
|
||||||
|
|
||||||
@@ -164,6 +164,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
|
|||||||
}): ReactElement => {
|
}): ReactElement => {
|
||||||
const { signOut } = useSession();
|
const { signOut } = useSession();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
|
const [openGroups, setOpenGroups] = useState<Record<string, boolean>>(() => {
|
||||||
const initial: Record<string, boolean> = {};
|
const initial: Record<string, boolean> = {};
|
||||||
MENUS.forEach((menu) => {
|
MENUS.forEach((menu) => {
|
||||||
@@ -246,11 +247,12 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
|
|||||||
{openGroups[menu.label] && (
|
{openGroups[menu.label] && (
|
||||||
<div className="mt-2 ml-6 flex flex-col gap-2">
|
<div className="mt-2 ml-6 flex flex-col gap-2">
|
||||||
{menu.children.map((child) => (
|
{menu.children.map((child) => (
|
||||||
<a
|
<button
|
||||||
|
type="button"
|
||||||
key={child.href}
|
key={child.href}
|
||||||
href={child.href}
|
onClick={() => { navigate({ to: child.href as string }); onClose?.(); }}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex items-center gap-3 px-2 py-2.5 rounded-md',
|
'flex items-center gap-3 px-2 py-2.5 rounded-md cursor-pointer text-left w-full',
|
||||||
isActive(child.href)
|
isActive(child.href)
|
||||||
? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
|
? 'bg-primary-100 text-primary-700 hover:bg-primary-200'
|
||||||
: 'text-gray-700 hover:bg-gray-100'
|
: 'text-gray-700 hover:bg-gray-100'
|
||||||
@@ -260,17 +262,18 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
|
|||||||
<span className="text-label1 font-medium">
|
<span className="text-label1 font-medium">
|
||||||
{child.label}
|
{child.label}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<a
|
<button
|
||||||
|
type="button"
|
||||||
key={menu.href ?? menu.label}
|
key={menu.href ?? menu.label}
|
||||||
href={menu.href ?? '#'}
|
onClick={() => { if (menu.href) { navigate({ to: menu.href as string }); onClose?.(); } }}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex items-center justify-items-start gap-3 px-2 py-2.5',
|
'flex items-center justify-items-start gap-3 px-2 py-2.5 cursor-pointer text-left w-full',
|
||||||
menu.href && isActive(menu.href)
|
menu.href && isActive(menu.href)
|
||||||
? 'bg-primary-500 text-white rounded-md'
|
? 'bg-primary-500 text-white rounded-md'
|
||||||
: 'text-gray-700 hover:bg-gray-100'
|
: 'text-gray-700 hover:bg-gray-100'
|
||||||
@@ -278,7 +281,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
|
|||||||
>
|
>
|
||||||
{menu.icon}
|
{menu.icon}
|
||||||
<span className="text-p3 font-medium">{menu.label}</span>
|
<span className="text-p3 font-medium">{menu.label}</span>
|
||||||
</a>
|
</button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</For>
|
</For>
|
||||||
@@ -288,7 +291,7 @@ export const BackofficeSidebar: FC<SidebarProps> = ({
|
|||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<hr className="mb-5 border-primary-200" />
|
<hr className="mb-5 border-primary-200" />
|
||||||
<Button
|
<Button
|
||||||
onClick={signOut}
|
onClick={() => { signOut(); navigate({ to: '/auth/login' as string }); }}
|
||||||
variant="text"
|
variant="text"
|
||||||
className="items-start justify-start gap-3 px-2 py-2.5 text-gray-700 hover:text-red-500 transition-colors w-full"
|
className="items-start justify-start gap-3 px-2 py-2.5 text-gray-700 hover:text-red-500 transition-colors w-full"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user