Liquid Frame

The Liquid Frame component is a compact and interactive sidebar menu, ideal for responsive navigation. It offers a toggleable design with smooth animations, making it a versatile choice for modern web applications.

Usage

Follow the steps below to add the Liquid Frame Component to your project.

Add the import statement for the component

import LiquidFrame from "@/components/elixir-ui/liquid-frame";

Import the component in your project and use it

<div className="flex h-full w-full items-center justify-center">
  <LiquidFrame
    src="/components/liquid-frame/zenitsu.jpg"
    alt="Zenitsu from Demon Slayer"
    width={300}
    height={300}
    className="h-full w-full rounded-md"
    variant="default"
  />
</div>

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	`false`	Controls the visibility of the sidebar
`onToggle`	`() => void`	-	Callback function when toggle button is clicked
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Menu items to be rendered