# pro-sidebar-template, a sidebar shell built on class names and SCSS variables
> pro-sidebar-template is a responsive layout with an advanced sidebar menu, written in SCSS and vanilla JavaScript on top of the css-pro-layout package. It is a starting point you edit rather than a component library you configure, and it is dated in one specific way that matters.
**azouaoui-med/pro-sidebar-template** — Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript
- Repository: https://github.com/azouaoui-med/pro-sidebar-template
- Website: https://azouaoui-med.github.io/pro-sidebar-template
- Stars: 1,011 · Forks: 440
- Language: HTML
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/azouaoui-med-pro-sidebar-template
## A layout shell you edit, not a component library you configure
pro-sidebar-template is described as a responsive layout with an advanced sidebar menu built with SCSS and vanilla JavaScript. That combination of words sets the expectation. There is no framework, no component runtime and no props to pass. What you get is an HTML skeleton, a set of SCSS variables and a webpack build, and the value of the project is that the skeleton is already right for the common case of an admin style interface with a vertical navigation rail.
The audience is developers who need that shell quickly and intend to own it afterwards. A dashboard, a back office, a content tool, anything with a fixed navigation column that collapses on smaller screens. The live demo is published on the project's GitHub Pages site, and the screenshot in the project description shows the dark navy and pale text palette that the SCSS variables produce.
The interesting structural point is that the layout is not implemented in this repository. The description says the layout is based on the css-pro-layout package, and that package's own documentation is where the layout mechanics are described. This template is the sidebar, the menu system and the styling layer, assembled on top of a dependency that handles the surrounding grid and responsive behaviour.
That division matters for how you evaluate it. You are adopting a skin and a navigation model, plus an upstream package you will also be depending on.
## The markup contract is a set of class names
Everything in this template is expressed through class names, and learning them is the whole integration effort. The menu is a wrapper element with the class menu, and the menu items live in a list inside it.
```html
```
A menu item requires the class menu-item on the wrapper and menu-title for the text. There is no separate component file to import, no registration step, and no JavaScript that has to know about your links. You add a list item, you give it a class, and the styling follows.
That is a genuine advantage over a component library for a project that will be modified, because the whole surface area is a stylesheet you already own. It is also a limitation for anyone who wants dynamic menus, since the structure is written into the HTML rather than generated from a route table. There is no documented route or data driven mode in this template, so a menu whose contents come from a backend means you render that HTML yourself and keep the class names.
The project documents the reference for these components on the css-pro-layout documentation site, including a dedicated sidebar reference page.
## Submenus nest without limit, and one class keeps them exclusive
The submenu mechanism is the part of the template that earns the word advanced in the description. A submenu is a menu item that also carries the sub-menu class, containing a wrapper element with the sub-menu-list class that groups the nested items.
```html
```
Nesting is unlimited, the description says, and the structure is recursive, since a sub-menu-list contains further menu items that can themselves be sub-menus. A sidebar with a third level is a copy of the same pattern.
Two behaviours are controlled by class. Adding the open class to a sub-menu item expands it by default, which is how you mark the page the user is currently on. Adding the open-current-submenu class to the nav element makes only one submenu open at a time, so opening one closes the others.
That second behaviour is the one to be deliberate about. It is a single class on the wrapper rather than a per item setting, so it is global to the menu, and it is the difference between an accordion and a set of independent menus.
## Icons, prefixes and suffixes in the same list item
A menu item can carry an icon, a prefix and a suffix, and the three are separate spans inside the anchor alongside the title.
```html
```
The icon is placed in a span with the menu-icon class and holds an empty element carrying an icon font class, in the example ri-service-fill. The prefix sits before the title and the suffix after it, which is where a count badge or a shortcut hint would go. The order in the markup is the order on screen, and the styling places each span.
The shape of the icon is a separate concern, set on the menu wrapper rather than per item. Three classes are provided: icon-shape-square, icon-shape-rounded and icon-shape-circle.
```html
```
The icon font in the example comes from outside the project, and the template does not document which icon set is bundled, so a team that wants a specific icon set should check what the demo page loads before assuming the font is available in the repository.
## A background image needs two things: has-bg-image and image-wrapper
The sidebar is the component that carries the responsive behaviour, and the description calls it a responsive navigation element for building vertical menu items. Its structure is a sidebar-layout div, optionally broken into a header, a content area and a footer.
```html
```
The break-point-lg class on the aside is what ties the sidebar to the responsive behaviour of the underlying layout package.
The background image is a two part requirement, and the description is specific about it. You add the has-bg-image class to the sidebar component, and the image element must sit inside a component with the image-wrapper class.
```html
```
Miss either part and the image does not appear, which is a reasonable price for a template that never has to guess where your assets live. The image path in the example is a relative one under an assets directory, and the project does not document a build step that processes it, so the file is expected to be served as it is.
## Theming is six SCSS variables in one file
Customization of the template is described in one sentence: update the SCSS variables in src/styles/_variables.scss. The file is short, and the variables are the palette plus two heights.
```scss
$text-color: #b3b8d4;
$secondary-text-color: #dee2ec;
$bg-color: #0c1e35;
$secondary-bg-color: #0b1a2c;
$border-color: rgba(#535d7d, 0.3);
$sidebar-header-height: 64px;
$sidebar-footer-height: 64px;
```
Two text colours, two background colours, a border colour expressed as an rgba over a base colour, and the header and footer heights. Changing those values is enough to restyle the sidebar, because everything else in the template's styling is written against them.
The boundary of this approach is worth naming. It is a palette and a couple of metrics, not a design system. If your product needs a light mode, a second brand theme, or per component overrides, you are editing SCSS rules directly, and the template does not document a theming layer for that. There is no CSS custom property layer mentioned in the description, and no documented dark mode switch.
For a project that only needs one visual identity, the seven variables are the entire customization surface and that is a pleasant deal. For a product with multiple themes, the work starts at that point.
## webpack, yarn, and a dev server on localhost:8080
The project is a webpack application, and the scripts in package.json describe the whole workflow. The build script removes the dist directory and runs webpack, the start script runs webpack serve, and there is a clean script that removes dist on its own. A separate gh-pages script builds and then publishes the dist directory to GitHub Pages, which is how the live demo is kept up to date.
The installation path given in the description is a clone followed by a dependency install.
```bash
# clone the repo
$ git clone https://github.com/azouaoui-med/pro-sidebar-template.git my-project
# go into app's directory
$ cd my-project
# install app's dependencies
$ yarn install
```
Then the two commands you will use daily.
```bash
# serve with hot reload at localhost:8080
$ yarn start
# build app for production
$ yarn build
```
After `yarn start` the browser should point at localhost:8080 and hot reload should pick up your edits to the markup and the SCSS. The build output lands in dist.
The dependency set is worth a look before you commit. The runtime dependencies are @popperjs/core at ^2.9.2 and css-pro-layout at ^1.1.0, and the toolchain is webpack with webpack-dev-server, babel, sass, postcss, eslint with the airbnb-base config, and prettier. The repository also carries a .browserslistrc, a .prettierrc and a postcss.config.js, so the browser targets and formatting rules are part of the template rather than left to you.
## Version 4.0.0 from 2023, with commits arriving in 2026
The version in package.json is 4.0.0, and the tag history matches it: v4.0.0 was released on 2023-02-04, preceded by v4.0.0-beta.1 on 2021-12-02 and v3.0.3 on 2020-07-07. So the published versions stopped moving more than three years ago.
The repository itself is not archived, and the last push was on 2026-10-17, so the working tree is being changed even though no new version has been tagged. That combination tells you what you are adopting: a template whose published artefacts are from 2023, kept in a repository that still receives commits. If you clone the master branch rather than pinning a tag, you get the newer work, and you get it without a version number that tells you what changed.
The licence is MIT, both in the package.json and in the project description, so the markup, the SCSS and the build configuration can be taken into a commercial product and modified without any disclosure obligation. Only the copyright notice has to stay.
The dependency versions carry the same caveat. The declared versions of webpack, sass, babel, eslint and the airbnb-base configuration are from the 4.0.0 era, and a fresh `yarn install` will resolve them as pinned ranges rather than as the current major releases of those tools.
## Conclusion
Adopt pro-sidebar-template if you need a working responsive sidebar with nested submenus today and want to own the markup and the SCSS rather than depend on a component library's abstraction. Do not adopt it as a maintained framework, because the published tags stop at v4.0.0 from 2023-02-04 and the release history has not moved since, and do not expect the html to be regenerated for you. Before you start, open src/styles/_variables.scss, run `yarn install` and `yarn start` to see the demo at localhost:8080, and check that the css-pro-layout dependency at ^1.1.0 still matches the markup you intend to keep.
## FAQ
### How do I install and run pro-sidebar-template locally?
Clone the repository, run `yarn install` inside it, then `yarn start` to serve it with hot reload at localhost:8080. Use `yarn build` to produce the production build in the dist directory.
### How do I change the colors of the sidebar in pro-sidebar-template?
Update the SCSS variables in src/styles/_variables.scss. The file holds the text colors, the background colors, the border color and the sidebar header and footer heights.
### How do I make only one submenu open at a time?
Add the open-current-submenu class to the nav element that wraps the menu. To expand a submenu by default, add the open class to that sub-menu item.
### How do I add a background image to the sidebar?
Add the has-bg-image class to the sidebar component and place the image inside a div with the image-wrapper class. Both parts are required for the image to appear.
### What is the license and current version of pro-sidebar-template?
The project is released under the MIT licence and package.json carries version 4.0.0. The v4.0.0 tag is dated 2023-02-04, while the last push to the repository was on 2026-10-17.
## Sources
- [azouaoui-med/pro-sidebar-template on GitHub](https://github.com/azouaoui-med/pro-sidebar-template)
- [License: MIT](https://github.com/azouaoui-med/pro-sidebar-template/blob/master/LICENSE)
- [Project website](https://azouaoui-med.github.io/pro-sidebar-template)
- [README](https://github.com/azouaoui-med/pro-sidebar-template/blob/master/README.md)
- [Releases](https://github.com/azouaoui-med/pro-sidebar-template/releases)
---
Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/azouaoui-med-pro-sidebar-template