fix: sidebar opened by default on desktop
This commit is contained in:
+13
-14
@@ -24,21 +24,21 @@ function useIsWide(): boolean {
|
|||||||
/* -----------------------------
|
/* -----------------------------
|
||||||
Shared sidebar logic
|
Shared sidebar logic
|
||||||
------------------------------*/
|
------------------------------*/
|
||||||
function useSidebarState() {
|
function useSidebarState(panels: SidebarPanel[], isWide: boolean) {
|
||||||
const [activeId, setActiveId] = useState<string | null>(null);
|
const [activeId, setActiveId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// open first panel by default ONLY on first mount (desktop only)
|
||||||
|
const [initialized, setInitialized] = useState(false);
|
||||||
|
|
||||||
|
if (!initialized && isWide) {
|
||||||
|
setActiveId(panels[0]?.id ?? null);
|
||||||
|
setInitialized(true);
|
||||||
|
}
|
||||||
|
|
||||||
const setClosed = () => setActiveId(null);
|
const setClosed = () => setActiveId(null);
|
||||||
|
|
||||||
const toggle = (id: string, effectiveId: string | null) => {
|
const toggle = (id: string) => {
|
||||||
setActiveId((prev) =>
|
setActiveId((prev) => (prev === id ? null : id));
|
||||||
prev === id || (effectiveId === id && prev === null) ? null : id,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const resolveEffectiveId = (isWide: boolean, panels: SidebarPanel[]) => {
|
|
||||||
return activeId === null
|
|
||||||
? null
|
|
||||||
: (activeId ?? (isWide ? (panels[0]?.id ?? null) : null));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
@@ -46,7 +46,6 @@ function useSidebarState() {
|
|||||||
setActiveId,
|
setActiveId,
|
||||||
setClosed,
|
setClosed,
|
||||||
toggle,
|
toggle,
|
||||||
resolveEffectiveId,
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -159,9 +158,9 @@ function IconRail({
|
|||||||
export default function Sidebar({ panels }: { panels: SidebarPanel[] }) {
|
export default function Sidebar({ panels }: { panels: SidebarPanel[] }) {
|
||||||
const isWide = useIsWide();
|
const isWide = useIsWide();
|
||||||
|
|
||||||
const { setClosed, toggle, resolveEffectiveId } = useSidebarState();
|
const { activeId, setClosed, toggle } = useSidebarState(panels, isWide);
|
||||||
|
|
||||||
const effectiveId = resolveEffectiveId(isWide, panels);
|
const effectiveId = activeId;
|
||||||
const activePanel = panels.find((p) => p.id === effectiveId);
|
const activePanel = panels.find((p) => p.id === effectiveId);
|
||||||
const isOpen = !!activePanel;
|
const isOpen = !!activePanel;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user