gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: close the drawer from the link, not from an effect

Browse Source 
Also leaves the Closed fold openable without dismissing the menu.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Yashas 2026-09-10 13:47:28 +05:30
parent 607693a04a
commit a310b0a8b9
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/layout/Shell.jsx
View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react' import { useState } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom' import { NavLink, Outlet } from 'react-router-dom'
import { NAV_GROUPS, STAGES } from '../api/config.js' import { NAV_GROUPS, STAGES } from '../api/config.js'
import { rolesOf, visibleStages } from '../api/permissions.js' import { rolesOf, visibleStages } from '../api/permissions.js'
import { useStageCounts } from '../api/portfolio.jsx' import { useStageCounts } from '../api/portfolio.jsx'
@ -35,8 +35,10 @@ export default function Shell() {
// because a menu that stays open over the page you just chose is a menu you // because a menu that stays open over the page you just chose is a menu you
// have to dismiss twice. Desktop never reads this — the rail is always there. // have to dismiss twice. Desktop never reads this — the rail is always there.
const [navOpen, setNavOpen] = useState(false) const [navOpen, setNavOpen] = useState(false)
const { pathname } = useLocation() // Closing on the link rather than on the route: a menu that stays open over
useEffect(() => { setNavOpen(false) }, [pathname]) // the page you just chose is a menu you have to dismiss twice. Keyed off the
// anchor so opening the Closed fold — which is not navigation — leaves it up.
const closeIfLink = (e) => { if (e.target.closest('a')) setNavOpen(false) }
const count = (s) => counts[s.uid] || { total: 0, waiting: 0, working: 0, urgent: 0 } const count = (s) => counts[s.uid] || { total: 0, waiting: 0, working: 0, urgent: 0 }
@ -92,7 +94,7 @@ export default function Shell() {
{/* The scrim only exists while the drawer is open, and only on a phone: {/* The scrim only exists while the drawer is open, and only on a phone:
tapping the page you can see should put the menu away. */} tapping the page you can see should put the menu away. */}
{navOpen ? <button type="button" className="shell__scrim" aria-label="Close the menu" onClick={() => setNavOpen(false)} /> : null} {navOpen ? <button type="button" className="shell__scrim" aria-label="Close the menu" onClick={() => setNavOpen(false)} /> : null}
<nav className={'shell__nav' + (navOpen ? ' is-open' : '')} aria-label="Pipeline"> <nav className={'shell__nav' + (navOpen ? ' is-open' : '')} aria-label="Pipeline" onClick={closeIfLink}>
<NavLink to="/" end className={({ isActive }) => 'nav__link' + (isActive ? ' is-on' : '')}> <NavLink to="/" end className={({ isActive }) => 'nav__link' + (isActive ? ' is-on' : '')}>
<span className="nav__name">Overview</span> <span className="nav__name">Overview</span>
</NavLink> </NavLink>