I built a dependency-free sidebar with drag-and-drop and magnetic snapping , in vanilla JS

Most sidebar components pull in a framework, a build step, or at least a CSS library. ac_sidebar doesn't. It's a single JavaScript class, no npm, no bundler, no external dependency, with its own CSS and SVG icon set baked in.

What it does

Two menu levels (menu / submenu), recursive structure
Role-based filtering (1 to 5, lower means more privileges), with menus auto-hiding when they end up empty
Five positions: left, right, top, bottom, or free. In free mode, you can drag the sidebar anywhere, with automatic magnetic snapping to screen edges
Collapses to an icon rail, or hides behind a single burger button
Counter badges per entry, multiple instances on the same page, state persisted via localStorage (optional)

Usage

javascript
const sb = new AcSidebar('#my-sidebar', { /* config */ });

Or load config from an external JSON file:

javascript
const sb = await AcSidebar.fromJson('#my-sidebar', '/config/sidebar.json');

A config example

One thing to flag: the config keys and values are in French (the class was originally built for French-speaking clients), so you'll see things like position: "gauche" (left) or theme: "clair" (light) rather than English terms.

json
{
"position": "gauche",
"theme": "clair",
"masquable": true,
"menu": [
{ "libelle": "Dashboard", "icone": "grille", "lien": "/dashboard" },
{
"libelle": "Users",
"icone": "groupe",
"role": 2,
"sousMenu": [
{ "libelle": "List", "icone": "liste", "lien": "/users" },
{ "libelle": "Roles", "icone": "cle", "lien": "/roles", "role": 1 }
]
}
]
}

Live demo: https://artisan-code.fr/ac_sidebar.php
)
ac_sidebar is part of a small catalog of standalone, dependency-free JS/PHP classes I maintain at artisan-code.fr, built for projects where a full framework would be overkill.

Comments

[Amit Feldman]

Nice work getting drag-and-drop plus magnetic snapping working in dependency-free vanilla JS — that snap physics is the part most people quietly reach for a library to solve.

I ran a quick check on the ac_sidebar product page and one thing stands out: the Apache server sends none of the baseline security headers — no HSTS, Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, or Permissions-Policy. It also exposes X-Powered-By: PHP/8.2, which hands exact stack info to anyone probing the site. On the plus side, your http→https redirect is clean and the page title/meta/H1 are all in good shape.

Since you're on Apache, the fix is about five lines of mod_headers config in .htaccess or the vhost (Header always set Strict-Transport-Security "max-age=31536000" etc.), plus expose_php = Off in php.ini to drop the version banner. Given you're selling this component, a buyer poking the demo page seeing a hardened header set is a quiet trust signal.

Happy to re-scan it free of charge after you've added them if you want a quick before/after confirmation.

[VIDALLET]

Thank you so much for this, genuinely. I went through the site and added HSTS, X-Content-Type-Options, X-Frame-Options, Referrer-Policy, Permissions-Policy, and a proper CSP, plus disabled the X-Powered-By banner. The demo page should be properly hardened now.

I'd love to take you up on that free re-scan offer if it still stands , really appreciate you following through on that.

Also, since ac_sidebar's drag-and-drop seems to have caught your eye, I'd like to send you a free copy as a thank-you. I'll try reaching out via DEV Connect , otherwise feel free to open your inbox or ping me another way.

Really appreciate you taking the time to check this properly instead of just scrolling past.