# Docsify Sidebar Collapse

A lightweight Docsify plugin that adds collapse/expand toggles to your sidebar sections.

- Collapses/expands second-level sidebar sections with a smooth transition
- Remembers collapsed state across page navigations via localStorage
- Works with default Docsify themes and aims to be compatible with `docsify-themable`
- Ships both JS and CSS; simply include both to enable it

Note: This plugin is NOT compatible with nested sidebars (untested and not supported). It targets the common single-level section structure generated by Docsify.

## Demo

Add the plugin to any Docsify site and the sidebar will gain chevron toggles next to items that contain sublists.

## Installation

You can consume this plugin via a CDN or npm.

### CDN (recommended for simplicity)

Add the CSS and JS after Docsify in your `index.html`:

```html
<!-- Docsify core -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>

<!-- Sidebar Collapse plugin -->
<link rel="stylesheet" href="https://unpkg.com/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="https://unpkg.com/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>

<!-- Or via jsDelivr -->
<!--
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="https://cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>
-->
```

No further configuration is required. The plugin auto-installs itself by extending `window.$docsify.plugins`.

### npm

Install the package:

```bash
npm install docsify-sidebar-collapse
# or
pnpm add docsify-sidebar-collapse
# or
yarn add docsify-sidebar-collapse
```

Then include the built assets in your `index.html` (recommended), or serve them from your build pipeline:

```html
<link rel="stylesheet" href="/node_modules/docsify-sidebar-collapse/dist/sidebar-collapse.min.css" />
<script src="/node_modules/docsify-sidebar-collapse/dist/sidebar-collapse.min.js"></script>
```

If your hosting setup disallows serving from `node_modules`, copy the files from `dist/` into your static assets directory during your build/deploy step.

## Usage

Once included, the plugin:

- Adds a chevron toggle before sidebar items that have child lists
- Collapses sections by default; click to expand
- Remembers your choices per section in `localStorage`

There is no runtime configuration required.

## Compatibility

- Docsify: >= 4
- Themes: Works with default themes and with [`docsify-themable`](https://jhildenbiddle.github.io/docsify-themeable/). If your theme customizes the sidebar heavily, ensure the plugin CSS (`sidebar-collapse.css`) is loaded to provide the necessary layout and transitions.
- Nested sidebars: Not supported (untested). This plugin targets a single level of nesting under each top-level list item.

## Known limitations

- The plugin does not currently auto-expand parent sections for active links. It preserves your last collapsed/expanded state instead.

## Development

Project layout:

- `src/sidebar-collapse.js` – the plugin logic
- `src/sidebar-collapse.css` – the styles for the toggles and animations
- `dist/` – built, minified assets generated by the build

Scripts:

```bash
npm install
npm run build
```

This will produce:

- `dist/sidebar-collapse.js` (copy of source)
- `dist/sidebar-collapse.min.js` (minified)
- `dist/sidebar-collapse.css` (copy of source)
- `dist/sidebar-collapse.min.css` (minified)

The package is configured to build automatically on `npm publish`.

## License

[MIT](./LICENSE)

## Acknowledgements

- Built for the excellent [Docsify](https://docsify.js.org/)
- Designed to work alongside [`docsify-themeable`](https://jhildenbiddle.github.io/docsify-themeable/)