Simply-sidebars NPM

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.