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

``bash
npm i simply-sidebars

`

Using pnpm

`bash
pnpm i simply-sidebars

`

Usage in Next.js

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

Usage in React+Vite

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

Usage in Remix.run

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

`javascript
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

`javascript
/* @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

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

`

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> | - | 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> | - | 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. |