Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.4 kB · 48 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849"use client";import { uv } from "colorjs.io/fn";import { Media } from "components/Media";import { createContext, useState } from "react";
export const SidebarContext = createContext({ open: false, setChildForceOpen: (b: boolean) => {},});
export function Sidebar(props: { children?: React.ReactNode; alwaysOpen?: boolean; className?: string;}) { let [sidebarExpanded, setSidebarExpanded] = useState(false); let [childForceOpen, setChildForceOpen] = useState(false); let open = sidebarExpanded || childForceOpen; return ( <Media mobile={false}> <SidebarContext value={{ open: props.alwaysOpen ? true : open, setChildForceOpen, }} > <div className={` actionSidebar ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-[192px] max-w-[192px]"} h-fit p-[6px] flex flex-col gap-1 justify-start border rounded-md bg-bg-page ${open && !props.alwaysOpen ? "border-border-light" : "container"} ${props.className} `} onMouseOver={() => { setSidebarExpanded(true); }} onMouseLeave={() => { !props.alwaysOpen && setSidebarExpanded(false); }} > {props.children} </div> </SidebarContext> </Media> );}