simply-sidebars

An easeee way to get the sidebars into your project ! LEFT , RIGHT , BOTTOM , TOP it has all!

Demo

https://new-projects-pen.web.app/simply-sidebars

Installation

Using npm

  npm i simply-sidebars

Using pnpm

  pnpm i simply-sidebars

Usage in Next.js

import { SideBar } from "simply-sidebars";
import "simply-sidebars/dist/index.css";

Usage in React+Vite

import { SideBar } from "simply-sidebars/index";
import "simply-sidebars/dist/index.css";

Usage in Remix.run

https://remix.run/docs/en/main/styling/css

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import { SideBar } from "simply-sidebars";
import sidebarStyles from "simply-sidebars/dist/index.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: sidebarStyles },
];

https://remix.run/docs/en/main/file-conventions/remix-config

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  appDirectory: "app",
  assetsBuildDirectory: "public/build",
  publicPath: "/build/",
  serverBuildPath: "build/index.js",
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: [
    "simply-sidebars",
    "simply-sidebars/dist/index.css",
  ],
};

Example

<SideBar
  modalClassName="z-[999]"
  align="right"
  toggled={toggled}
  collapsed={collapsed}
  setToggle={setToggled}
  setCollapsed={setCollapsed}
  breakpoint={1000}
  collapsedWidth="80px"
>
  // uncollapsedWidth="800px" .....
</SideBar>

Reference

| props | type | default | description | | ---------------- | --------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | align | string | left | Required. Alignment of sidebars left top right bottom | | toggled | boolean | false | Required.A state hook to open and close the sidebars | | setToggled | React.Dispatch<React.SetStateAction> | - | Required. UseState hook to update the toggle state. | | collapsed | boolean | false | Required. UseState to track the collapsed and uncollapsed states of sidebars. | | setCollapsed | React.Dispatch<React.SetStateAction> | - | Required. UseState hook to update the collapsed state. | | breakPoint | number | null | Required. Screen size to change from collapsable to toggle behavior. To use it as a toggle on large screens, give a large number like 1000000000000. | | collapsedWidth | string | - | Drawer width for an uncollapsed state with units like px and vw | | uncollapsedWidth | string | - | Drawer width for an uncollapsed state with units like px and vw | | toggledWidth | string | - | Drawer width for an uncollapsed state with units like px and vw | | showToggle | boolean | true | Visibility of the toggle Arrow. Pass false to hide it, and make your toggler. |