Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript
# 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
# serve with hot reload at localhost:8080
$ yarn start
# build app for production
$ yarn build
The layout for this template is based on css pro layout package, please refer to the docs for more information
Responsive navigation element for building vertical menu items
Sidebar Image
Adding background image requires adding .has-bg-image class to sidebar component, and the image needs to be inside .image-wrapper component
<aside id="sidebar" class="sidebar break-point-lg has-bg-image">
<div class="image-wrapper">
<img src="assets/images/sidebar-bg.jpg" alt="sidebar background" />
</div>
<div class="sidebar-layout">
<!-- Content here -->
</div>
</aside>Sidebar comes with layout support for better organization of the inner structure
<aside id="sidebar" class="sidebar break-point-lg">
<div class="sidebar-layout">
<div class="sidebar-header">
<!-- Header content here -->
</div>
<div class="sidebar-content">
<!-- Content here -->
</div>
<div class="sidebar-footer">
<!-- Footer content here -->
</div>
</div>
</aside>More on the sidebar here
Wrapper component that groups all menu items
<nav class="menu">
<!-- Content here -->
</nav>Open current submenu
Use .open-current-submenu to enable opening only one submenu component at a time
<nav class="menu open-current-submenu">
<!-- Content here -->
</nav>Icon shape
A set of classes are provided to restyle menu icons
.icon-shape-square.icon-shape-rounded.icon-shape-circle
<nav class="menu icon-shape-circle">
<!-- Content here -->
</nav>Building menu item requires having .menu-item class in the wrapper and .menu-title for the text
<nav class="menu">
<ul>
<li class="menu-item">
<a href="#">
<span class="menu-title">menu text</span>
</a>
</li>
<!-- More menu items -->
</ul>
</nav>Menu Icon
Use .menu-icon to add an icon to menu items
<nav class="menu">
<ul>
<li class="menu-item">
<a href="#">
<span class="menu-icon">
<i class="ri-service-fill"></i>
</span>
<span class="menu-title">menu text</span>
</a>
</li>
<!-- More menu items -->
</ul>
</nav>Prefix & Suffix
Menu item also supports having prefix and suffix components
<nav class="menu">
<ul>
<li class="menu-item">
<a href="#">
<span class="menu-icon">
<i class="ri-service-fill"></i>
</span>
<span class="menu-prefix">prefix</span>
<span class="menu-title">menu text</span>
<span class="menu-suffix">suffix</span>
</a>
</li>
<!-- More menu items -->
</ul>
</nav>Add .sub-menu class to menu item and create a wrapper component with sub-menu-list class to group sub menu items
Its possible to have unlimited nesting menu items
<nav class="menu">
<ul>
<li class="menu-item sub-menu">
<a href="#">
<span class="menu-title">menu text</span>
</a>
<div class="sub-menu-list">
<li class="menu-item">
<a href="#">
<span class="menu-title">sub menu text</span>
</a>
</li>
<!-- More sub menu items -->
</div>
</li>
<!-- More menu items -->
</ul>
</nav>Open default
Use .open class to have sub menu expanded by default
<nav class="menu">
<ul>
<li class="menu-item sub-menu open">
<a href="#">
<span class="menu-title">menu text</span>
</a>
<div class="sub-menu-list">
<li class="menu-item">
<a href="#">
<span class="menu-title">sub menu text</span>
</a>
</li>
<!-- More sub menu items -->
</div>
</li>
<!-- More menu items -->
</ul>
</nav>Update SCSS variables in src/styles/_variables.scss to customize the template
$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;This code is released under the MIT license.