Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.7 kB · 60 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061"use client";import { Media } from "components/Media";import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";import { createContext, useState } from "react";import { create } from "zustand";
export const SidebarContext = createContext({ open: false, setChildForceOpen: (b: boolean) => {},});
export const useSidebarStore = create<{ open: boolean; setOpen: (open: boolean) => void;}>((set) => ({ open: false, setOpen: (open) => set({ open }),}));
export function Sidebar(props: { children?: React.ReactNode; alwaysOpen?: boolean; mobile?: boolean; className?: string;}) { let [sidebarExpanded, setSidebarExpanded] = useState(false); let [childForceOpen, setChildForceOpen] = useState(false); let open = sidebarExpanded || childForceOpen; let cardBorderHidden = useCardBorderHidden(); return ( <Media mobile={props.mobile ?? false}> <SidebarContext value={{ open: props.alwaysOpen ? true : open, setChildForceOpen, }} > <div style={{ height: "-webkit-fill-available" }} className={` actionSidebar ${!props.alwaysOpen ? "absolute top-0 left-0 z-10 w-max" : "w-56"} p-[6px] my-6 flex flex-col gap-0.5 justify-start border rounded-md ${cardBorderHidden ? "light-container" : "frosted-container"} ${props.className} `} onMouseOver={() => { setSidebarExpanded(true); }} onMouseLeave={() => { !props.alwaysOpen && setSidebarExpanded(false); }} > {props.children} </div> </SidebarContext> </Media> );}