apex-ui-kit 2.6.0 → 2.7.0

package/dist/ApexUI-Kit/templates/ParticleText/ParticleText.jsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useRef } from "react";
+
+/*
+ * Particle Text: your text rebuilt from thousands of tiny particles on a
+ * canvas. They fly in to form the words (assemble, fall, explode or wave),
+ * move out of the pointer's way, and a click sends a shockwave through them
+ * before they spring back. Moving particles light up in the accent color.
+ * When everything has settled and the pointer is away, the loop sleeps.
+ */
+
+const TAU = Math.PI * 2;
+
+// Points where the text is drawn, sampled from an offscreen canvas.
+function sampleText(text, width, height, weight, family, maxSize, gap) {
+    const off = document.createElement("canvas");
+    off.width = Math.max(1, Math.floor(width));
+    off.height = Math.max(1, Math.floor(height));
+    const c = off.getContext("2d", { willReadFrequently: true });
+    let size = Math.min(maxSize, height * 0.7);
+    c.font = `${weight} ${size}px ${family}`;
+    const measured = c.measureText(text).width;
+    // Shrink to fit 90% of the width.
+    if (measured > width * 0.9) size *= (width * 0.9) / measured;
+    c.font = `${weight} ${size}px ${family}`;
+    c.textAlign = "center";
+    c.textBaseline = "middle";
+    c.fillStyle = "#fff";
+    c.fillText(text, width / 2, height / 2);
+    const data = c.getImageData(0, 0, off.width, off.height).data;
+    const pts = [];
+    for (let y = 0; y < off.height; y += gap) {
+        for (let x = 0; x < off.width; x += gap) {
+            if (data[(y * off.width + x) * 4 + 3] > 120) pts.push(x, y);
+        }
+    }
+    return pts;
+}
+
+const ParticleText = ({
+    text = "ApexUI",
+    fontSize = 9,
+    fontWeight = 800,
+    fontFamily,
+    particleSize = 2,
+    gap = 4,
+    color = "currentColor",
+    accentColor = "#a3e635",
+    intro = "assemble",
+    replayOn = "none",
+    repelRadius = 90,
+    repelStrength = 1,
+    clickBurst = true,
+    height = "20rem",
+    className = "",
+}) => {
+    const wrap = useRef(null);
+    const canvas = useRef(null);
+    const live = useRef({ particleSize, accentColor, color, repelRadius, repelStrength, clickBurst, replayOn, intro });
+    live.current = { particleSize, accentColor, color, repelRadius, repelStrength, clickBurst, replayOn, intro };
+    const wakeRef = useRef(() => {});
+
+    // Prop changes that don't need a rebuild just wake the loop to redraw.
+    useEffect(() => {
+        wakeRef.current();
+    });
+
+    useEffect(() => {
+        const el = wrap.current;
+        const cv = canvas.current;
+        const ctx = cv.getContext("2d");
+        const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        let P = new Float32Array(0); // per particle: x, y, vx, vy, tx, ty, delay, seed
+        let n = 0;
+        let w = 0;
+        let h = 0;
+        let dpr = 1;
+        let raf = 0;
+        let last = 0;
+        let started = 0;
+        let alive = true;
+        let visible = true;
+        let built = "";
+        const pointer = { x: -9999, y: -9999, on: false };
+
+        const startPositions = (mode) => {
+            started = performance.now();
+            for (let i = 0; i < n; i++) {
+                const o = i * 8;
+                const tx = P[o + 4];
+                const ty = P[o + 5];
+                const seed = P[o + 7];
+                let x = tx;
+                let y = ty;
+                let delay = 0;
+                if (reduced) {
+                    // Appear in place.
+                } else if (mode === "fall") {
+                    x = tx + (seed - 0.5) * 30;
+                    y = -20 - seed * h * 0.6;
+                    delay = seed * 500;
+                } else if (mode === "explode") {
+                    const a = seed * TAU * 7;
+                    x = w / 2 + Math.cos(a) * 4;
+                    y = h / 2 + Math.sin(a) * 4;
+                    delay = seed * 200;
+                } else if (mode === "wave") {
+                    x = tx - w * 0.6;
+                    y = ty + Math.sin(tx * 0.04) * 40;
+                    delay = (tx / w) * 700;
+                } else {
+                    x = Math.random() * w;
+                    y = Math.random() * h;
+                    delay = seed * 350;
+                }
+                P[o] = x;
+                P[o + 1] = y;
+                P[o + 2] = mode === "explode" && !reduced ? (Math.random() - 0.5) * 900 : 0;
+                P[o + 3] = mode === "explode" && !reduced ? (Math.random() - 0.5) * 900 : 0;
+                P[o + 6] = delay;
+            }
+            wake();
+        };
+
+        const build = (withIntro) => {
+            const r = el.getBoundingClientRect();
+            if (!r.width || !r.height) return;
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = r.width;
+            h = r.height;
+            cv.width = Math.round(w * dpr);
+            cv.height = Math.round(h * dpr);
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const family = fontFamily || getComputedStyle(el).fontFamily || "sans-serif";
+            const pts = sampleText(String(text || " "), w, h, fontWeight, family, fontSize * rem, Math.max(2, Math.round(gap)));
+            // Cap the count so huge containers stay smooth.
+            const cap = 6000;
+            const stride = Math.max(1, Math.ceil(pts.length / 2 / cap));
+            n = Math.floor(pts.length / 2 / stride);
+            const old = P;
+            const oldN = old.length / 8;
+            P = new Float32Array(n * 8);
+            for (let i = 0; i < n; i++) {
+                const o = i * 8;
+                const s = i * stride * 2;
+                P[o + 4] = pts[s];
+                P[o + 5] = pts[s + 1];
+                P[o + 7] = ((i * 9301 + 49297) % 233280) / 233280;
+                // Keep current positions on resize so nothing jumps.
+                if (!withIntro && i < oldN) {
+                    P[o] = old[i * 8];
+                    P[o + 1] = old[i * 8 + 1];
+                } else {
+                    P[o] = pts[s];
+                    P[o + 1] = pts[s + 1];
+                }
+            }
+            if (withIntro) startPositions(live.current.intro);
+            wake();
+        };
+
+        const toRgb = (() => {
+            const c = document.createElement("canvas").getContext("2d");
+            return (value) => {
+                c.fillStyle = "#000";
+                c.fillStyle = value;
+                const hex = c.fillStyle;
+                if (hex.startsWith("#")) return [parseInt(hex.slice(1, 3), 16), parseInt(hex.slice(3, 5), 16), parseInt(hex.slice(5, 7), 16)];
+                const m = hex.match(/\d+(\.\d+)?/g) || [0, 0, 0];
+                return [+m[0], +m[1], +m[2]];
+            };
+        })();
+
+        const frame = (now) => {
+            raf = 0;
+            if (!alive) return;
+            const o = live.current;
+            const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
+            last = now;
+            const elapsed = now - started;
+            const base = o.color === "currentColor" ? getComputedStyle(el).color : o.color;
+            const [br, bg, bb] = toRgb(base);
+            const [ar, ag, ab] = toRgb(o.accentColor);
+            const size = Math.max(0.5, o.particleSize);
+            const rr = o.repelRadius;
+            const rs = o.repelStrength * 2600;
+            let busy = pointer.on;
+
+            ctx.clearRect(0, 0, w, h);
+            // Two passes: settled particles in the base color, moving ones in the accent.
+            const hot = [];
+            ctx.fillStyle = `rgb(${br}, ${bg}, ${bb})`;
+            ctx.beginPath();
+            for (let i = 0; i < n; i++) {
+                const k = i * 8;
+                let x = P[k];
+                let y = P[k + 1];
+                let vx = P[k + 2];
+                let vy = P[k + 3];
+                if (elapsed >= P[k + 6]) {
+                    // Spring toward the target, with damping.
+                    vx += (P[k + 4] - x) * 60 * dt;
+                    vy += (P[k + 5] - y) * 60 * dt;
+                    if (pointer.on && rr > 0) {
+                        const dx = x - pointer.x;
+                        const dy = y - pointer.y;
+                        const d2 = dx * dx + dy * dy;
+                        if (d2 < rr * rr && d2 > 0.01) {
+                            const d = Math.sqrt(d2);
+                            const f = (1 - d / rr) * rs * dt;
+                            vx += (dx / d) * f;
+                            vy += (dy / d) * f;
+                        }
+                    }
+                    const damp = Math.pow(0.0009, dt);
+                    vx *= damp;
+                    vy *= damp;
+                    x += vx * dt;
+                    y += vy * dt;
+                }
+                P[k] = x;
+                P[k + 1] = y;
+                P[k + 2] = vx;
+                P[k + 3] = vy;
+                const off = Math.abs(P[k + 4] - x) + Math.abs(P[k + 5] - y);
+                if (off > 0.3 || Math.abs(vx) + Math.abs(vy) > 2) busy = true;
+                if (off > 4) hot.push(x, y, Math.min(1, off / 40));
+                else ctx.rect(x - size / 2, y - size / 2, size, size);
+            }
+            ctx.fill();
+            if (hot.length) {
+                ctx.globalCompositeOperation = "lighter";
+                for (let j = 0; j < hot.length; j += 3) {
+                    const t = hot[j + 2];
+                    ctx.fillStyle = `rgb(${Math.round(br + (ar - br) * t)}, ${Math.round(bg + (ag - bg) * t)}, ${Math.round(bb + (ab - bb) * t)})`;
+                    ctx.fillRect(hot[j] - size / 2, hot[j + 1] - size / 2, size, size);
+                }
+                ctx.globalCompositeOperation = "source-over";
+            }
+            if (busy && visible) raf = requestAnimationFrame(frame);
+        };
+
+        function wake() {
+            if (raf || !alive || !visible) return;
+            last = 0;
+            raf = requestAnimationFrame(frame);
+        }
+        wakeRef.current = wake;
+
+        const local = (e) => {
+            const r = cv.getBoundingClientRect();
+            return [e.clientX - r.left, e.clientY - r.top];
+        };
+        const onMove = (e) => {
+            [pointer.x, pointer.y] = local(e);
+            pointer.on = true;
+            wake();
+        };
+        const onEnter = (e) => {
+            onMove(e);
+            if (live.current.replayOn === "hover") startPositions(live.current.intro);
+        };
+        const onLeave = () => {
+            pointer.on = false;
+            pointer.x = pointer.y = -9999;
+            wake();
+        };
+        const onDown = (e) => {
+            const o = live.current;
+            if (o.replayOn === "click") return startPositions(o.intro);
+            if (!o.clickBurst || reduced) return;
+            const [cx, cy] = local(e);
+            for (let i = 0; i < n; i++) {
+                const k = i * 8;
+                const dx = P[k] - cx;
+                const dy = P[k + 1] - cy;
+                const d = Math.hypot(dx, dy) || 1;
+                const f = Math.max(0, 1 - d / 260) * 1400 * (0.6 + P[k + 7] * 0.8);
+                P[k + 2] += (dx / d) * f;
+                P[k + 3] += (dy / d) * f;
+            }
+            wake();
+        };
+        cv.addEventListener("pointerenter", onEnter);
+        cv.addEventListener("pointermove", onMove);
+        cv.addEventListener("pointerleave", onLeave);
+        cv.addEventListener("pointerdown", onDown);
+
+        const ro = new ResizeObserver(() => {
+            const r = el.getBoundingClientRect();
+            const key = `${Math.round(r.width)}x${Math.round(r.height)}`;
+            if (key === built) return;
+            const first = !built;
+            built = key;
+            build(first);
+        });
+        ro.observe(el);
+        const io = new IntersectionObserver(([entry]) => {
+            visible = entry.isIntersecting;
+            wake();
+        });
+        io.observe(el);
+        // Rebuild once web fonts are ready so the shape uses the real font.
+        document.fonts?.ready.then(() => alive && built && build(false));
+
+        return () => {
+            alive = false;
+            wakeRef.current = () => {};
+            if (raf) cancelAnimationFrame(raf);
+            ro.disconnect();
+            io.disconnect();
+            cv.removeEventListener("pointerenter", onEnter);
+            cv.removeEventListener("pointermove", onMove);
+            cv.removeEventListener("pointerleave", onLeave);
+            cv.removeEventListener("pointerdown", onDown);
+        };
+        // Text and font settings rebuild the particles; the rest is read live.
+    }, [text, fontSize, fontWeight, fontFamily, gap]);
+
+    return (
+        <div ref={wrap} className={`relative w-full touch-pan-y select-none overflow-hidden ${className}`} style={{ height }}>
+            <canvas ref={canvas} aria-hidden="true" className="absolute inset-0 block h-full w-full" />
+            <span className="sr-only">{text}</span>
+        </div>
+    );
+};
+
+export default ParticleText;

package/dist/ApexUI-Kit/templates/RadialMenu/RadialMenu.jsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Camera, Heart, Home, MessageCircle, Plus, Settings, Share2, User } from "lucide-react";
+
+/*
+ * Radial Menu: a round button that fans its actions out in a circle (or an
+ * arc). Items spring out one after another and tuck back in on close.
+ * Keyboard friendly: arrows move between items, Escape closes, and clicking
+ * outside closes too.
+ */
+
+const DEFAULT_ITEMS = [
+    { icon: Home, label: "Home" },
+    { icon: User, label: "Profile" },
+    { icon: MessageCircle, label: "Messages" },
+    { icon: Camera, label: "Camera" },
+    { icon: Heart, label: "Likes" },
+    { icon: Share2, label: "Share" },
+    { icon: Settings, label: "Settings" },
+];
+
+const RadialMenu = ({ items = DEFAULT_ITEMS, radius = 6.5, arc = 360, startAngle = -90, accentColor = "#a3e635", theme = "dark", onSelect, className = "" }) => {
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const [picked, setPicked] = useState(null);
+    const root = useRef(null);
+    const btns = useRef([]);
+    const dark = theme !== "light";
+    const n = items.length;
+    // Full circle spreads evenly; a partial arc includes both ends.
+    const step = arc >= 360 ? 360 / n : arc / Math.max(1, n - 1);
+
+    useEffect(() => {
+        if (!open) return undefined;
+        const down = (e) => !root.current?.contains(e.target) && setOpen(false);
+        const key = (e) => e.key === "Escape" && setOpen(false);
+        document.addEventListener("pointerdown", down);
+        document.addEventListener("keydown", key);
+        return () => {
+            document.removeEventListener("pointerdown", down);
+            document.removeEventListener("keydown", key);
+        };
+    }, [open]);
+
+    const choose = (item, i) => {
+        setPicked(i);
+        setOpen(false);
+        onSelect?.(item, i);
+    };
+    const onItemKey = (e, i) => {
+        const next = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[e.key];
+        if (!next) return;
+        e.preventDefault();
+        btns.current[(i + next + n) % n]?.focus();
+    };
+
+    return (
+        <div ref={root} className={`relative inline-grid place-items-center ${className}`} style={{ width: `${radius * 2 + 4}rem`, height: `${radius * 2 + 4}rem`, maxWidth: "100%" }}>
+            <AnimatePresence>
+                {open &&
+                    items.map((item, i) => {
+                        const a = ((startAngle + i * step) * Math.PI) / 180;
+                        const Icon = item.icon;
+                        return (
+                            <motion.button
+                                key={`${id}-${i}`}
+                                ref={(el) => (btns.current[i] = el)}
+                                type="button"
+                                aria-label={item.label}
+                                title={item.label}
+                                onClick={() => choose(item, i)}
+                                onKeyDown={(e) => onItemKey(e, i)}
+                                className={`group absolute grid h-12 w-12 place-items-center rounded-full shadow-lg outline-none ring-1 focus-visible:ring-2 ${dark ? "bg-neutral-900 text-white ring-white/10 hover:bg-neutral-800 focus-visible:ring-white/50" : "bg-white text-neutral-800 ring-black/10 hover:bg-neutral-50 focus-visible:ring-black/40"}`}
+                                initial={{ x: 0, y: 0, scale: 0.3, opacity: 0 }}
+                                animate={{ x: `${Math.cos(a) * radius}rem`, y: `${Math.sin(a) * radius}rem`, scale: 1, opacity: 1, transition: { type: "spring", stiffness: 420, damping: 24, delay: i * 0.03 } }}
+                                exit={{ x: 0, y: 0, scale: 0.3, opacity: 0, transition: { duration: 0.18, delay: (n - 1 - i) * 0.015 } }}
+                                style={picked === i ? { color: accentColor } : undefined}
+                            >
+                                {Icon ? <Icon className="h-5 w-5" /> : item.label[0]}
+                                <span className={`pointer-events-none absolute top-full mt-1.5 whitespace-nowrap rounded-md px-1.5 py-0.5 text-[0.65rem] font-medium opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 ${dark ? "bg-white text-black" : "bg-neutral-900 text-white"}`}>{item.label}</span>
+                            </motion.button>
+                        );
+                    })}
+            </AnimatePresence>
+            <motion.button
+                type="button"
+                aria-expanded={open}
+                aria-label={open ? "Close menu" : "Open menu"}
+                onClick={() => setOpen((o) => !o)}
+                onKeyDown={(e) => open && e.key === "ArrowRight" && (e.preventDefault(), btns.current[0]?.focus())}
+                whileTap={{ scale: 0.92 }}
+                className="relative z-10 grid h-16 w-16 place-items-center rounded-full text-black shadow-[0_10px_30px_-8px_rgba(0,0,0,0.5)] outline-none focus-visible:ring-4 focus-visible:ring-white/40"
+                style={{ background: accentColor }}
+            >
+                <motion.span animate={{ rotate: open ? 135 : 0 }} transition={{ type: "spring", stiffness: 400, damping: 22 }}>
+                    <Plus className="h-7 w-7" strokeWidth={2.5} />
+                </motion.span>
+            </motion.button>
+        </div>
+    );
+};
+
+export default RadialMenu;

package/dist/ApexUI-Kit/templates/ScrollStack/ScrollStack.jsx

@@ -0,0 +1,88 @@
+import React, { Children, useLayoutEffect, useRef } from "react";
+
+/*
+ * Scroll Stack: cards pin one after another as you scroll and pile up. A
+ * card that gets covered shrinks a little, darkens and (optionally) blurs or
+ * leans back, so the pile reads as depth. It rides on native scrolling
+ * (position: sticky + one rAF update per scroll), so it stays smooth with
+ * mouse, trackpad, touch and keyboard. Scrolls inside its own box, or with
+ * the page (useWindowScroll).
+ */
+
+export const ScrollStackItem = ({ children, className = "", style }) => (
+    <div className={`relative h-[18rem] w-full origin-top overflow-hidden rounded-[1.75rem] p-8 shadow-[0_24px_48px_-24px_rgba(0,0,0,0.45)] will-change-transform ${className}`} style={style}>
+        {children}
+        <span data-stack-shade="" aria-hidden="true" className="pointer-events-none absolute inset-0 rounded-[inherit] bg-black opacity-0" />
+    </div>
+);
+
+const ScrollStack = ({ children, gap = 90, offset = 22, top = 64, scaleStep = 0.05, minScale = 0.82, dim = 0.22, blur = 0, tilt = 0, endSpace = 180, useWindowScroll = false, height = "100%", className = "" }) => {
+    const root = useRef(null);
+    const slots = useRef([]);
+    const items = Children.toArray(children);
+
+    useLayoutEffect(() => {
+        const box = root.current;
+        const scroller = useWindowScroll ? window : box;
+        let raf = 0;
+        const update = () => {
+            raf = 0;
+            const els = slots.current.filter(Boolean);
+            const viewTop = useWindowScroll ? 0 : box.getBoundingClientRect().top;
+            const rects = els.map((e) => e.getBoundingClientRect());
+            // How much each later card covers the one before it (0 to 1).
+            const depth = els.map(() => 0);
+            for (let j = 1; j < els.length; j++) {
+                const pinPrev = viewTop + top + (j - 1) * offset;
+                const startCover = pinPrev + rects[j - 1].height;
+                const span = Math.max(1, rects[j - 1].height - offset);
+                const cover = Math.min(1, Math.max(0, (startCover - rects[j].top) / span));
+                for (let i = 0; i < j; i++) depth[i] += cover;
+            }
+            els.forEach((slot, i) => {
+                const card = slot.firstElementChild;
+                if (!card) return;
+                const d = depth[i];
+                const scale = Math.max(minScale, 1 - d * scaleStep);
+                const lean = Math.min(1, d) * tilt;
+                card.style.transform = d > 0.001 ? `perspective(1000px) rotateX(${-lean}deg) scale(${scale.toFixed(4)})` : "";
+                card.style.filter = blur && d > 0.01 ? `blur(${(d * blur).toFixed(2)}px)` : "";
+                const shade = card.querySelector("[data-stack-shade]");
+                if (shade) shade.style.opacity = (1 - Math.pow(1 - dim, d)).toFixed(3);
+            });
+        };
+        const schedule = () => {
+            if (!raf) raf = requestAnimationFrame(update);
+        };
+        scroller.addEventListener("scroll", schedule, { passive: true });
+        window.addEventListener("resize", schedule);
+        const ro = new ResizeObserver(schedule);
+        ro.observe(box);
+        update();
+        return () => {
+            cancelAnimationFrame(raf);
+            scroller.removeEventListener("scroll", schedule);
+            window.removeEventListener("resize", schedule);
+            ro.disconnect();
+        };
+    }, [useWindowScroll, top, offset, scaleStep, minScale, dim, blur, tilt, items.length]);
+
+    return (
+        <div ref={root} className={`relative w-full ${useWindowScroll ? "" : "overflow-y-auto overscroll-contain"} ${className}`} style={useWindowScroll ? undefined : { height }}>
+            <div className="px-[clamp(1rem,6%,4rem)]" style={{ paddingTop: useWindowScroll ? 0 : top, paddingBottom: endSpace }}>
+                {items.map((child, i) => (
+                    <div
+                        key={i}
+                        ref={(e) => (slots.current[i] = e)}
+                        className="sticky"
+                        style={{ top: top + i * offset, marginTop: i ? gap : 0, zIndex: i + 1 }}
+                    >
+                        {child}
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ScrollStack;

package/dist/ApexUI-Kit/templates/SidebarNav/SidebarNav.jsx

@@ -1,4 +1,4 @@
-import React, { useId, useRef, useState } from "react";
+import React, { useEffect, useId, useRef, useState } from "react";
 import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { BarChart3, Bell, ChevronDown, FolderKanban, Home, Inbox, LifeBuoy, PanelLeftClose, PanelLeftOpen, Settings, Users } from "lucide-react";
 
@@ -61,6 +61,7 @@ const SidebarNav = ({
     user = { name: "Mohan Dalei", email: "mohan@apex-ui.in", avatar: "https://ik.imagekit.io/ny6yinyut/apexui/assets/captainamerica.png?tr=f-auto,q-80,w-96" },
     defaultActive = "home",
     defaultCollapsed = false,
+    autoCollapse = true,
     accentColor = "#a3e635",
     theme = "dark",
     onSelect,
@@ -73,6 +74,25 @@ const SidebarNav = ({
     const [open, setOpen] = useState(() => new Set(["projects"]));
     const [tip, setTip] = useState(null);
     const asideRef = useRef(null);
+    const userToggled = useRef(false);
+
+    // On narrow screens the full sidebar would squeeze the page, so it becomes
+    // an icon rail there and opens again when there is room, until the user
+    // picks a state with the toggle.
+    useEffect(() => {
+        const host = asideRef.current?.parentElement;
+        if (!autoCollapse || !host) return undefined;
+        let narrow = null;
+        const ro = new ResizeObserver(([entry]) => {
+            const now = entry.contentRect.width < 560;
+            if (now !== narrow) {
+                if (!userToggled.current && (now || narrow !== null)) setCollapsed(now || defaultCollapsed);
+                narrow = now;
+            }
+        });
+        ro.observe(host);
+        return () => ro.disconnect();
+    }, [autoCollapse, defaultCollapsed]);
 
     const select = (item) => {
         setActive(item.id);
@@ -159,6 +179,7 @@ const SidebarNav = ({
                     type="button"
                     aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
                     onClick={() => {
+                        userToggled.current = true;
                         setCollapsed((c) => !c);
                         setTip(null);
                     }}