azouaoui-med/pro-sidebar-template

Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript

Pro sidebar template

Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript

Demo

See it live

Screenshot

Installation

# 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

Usage

# serve with hot reload at localhost:8080
$ yarn start

# build app for production
$ yarn build

Documentation

Layout

The layout for this template is based on css pro layout package, please refer to the docs for more information

Sidebar

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 Layout

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

Menu

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>

Menu Item

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>

Sub Menu

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>

Customization

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;

License

This code is released under the MIT license.

pro-sidebar-template's Issues

Load pinned and hover

I'm trying to use the sidebar, but I have an issue loading it in the right way.
I want to display it as pinned and on mouseover hovered.

My page-wrapper looks like:

<div class="page-wrapper default-theme sidebar-bg bg1 toggled pinned"> 
....
</div>

To activated the sidebar I have to click on the "Toggle Sidebar" button. So when I click on the little pinned sidebar icons not happens.

So you can kinda see that I'm hovering over the green icon. Nothing happens.

Upgrading to Bootstrap 4.3.1 Breaks the sidebar

The sidebar project is currently using Bootstrap 4.2.1 which is outdated. When trying to upgrade the bootstrap version, the side navigation broke and is no longer functional.

Push navbar ?

Hi !

Excellent project ! Really love it !
How can I make so that the sidebar pushes my existing navbar ?

Multiple minor things

Hi! I 've came across pro-sidebar a few weeks ago and decided to wrap it on a Ruby gem for Rails applications and release it. We found a number a minor issues while in the process.. do you want us to file those and send some pull requests?

For example an important one is that the js and css for the sidebar is somewhat mixed with the demo, so we had to extract it. Also, the SCSS is not all evenly formatted.

When open website sidebar is toggled

Hello when i open the website the sidebar opens as it is toggled. How can i change that. What i want is to open as pinned on desktop and no toggled on mobile

Font Awesome SVG icons breaking layout

I have implemented your sidebar into my project and noticed with the current npm Font Awesome package the icons are replaced by SVG.

The CSS classes targeting only the <i>-element, the layout breaks and animations dont work.

Can you provide a fix for that? Ive tried myself but just replacing the i-selectors in CSS doesnt do the job.

Bootstrap4 sticky-top navbar in page-content div container-fluid?

Hi! Thank you for amazing job you did!
Is it possible to make sticky-top navbar in page-content div container-fluid?

            <main class="page-content pt-0">
                <div id="overlay" class="overlay"></div>
                <div class="container-fluid p-0">
                    <nav class="navbar navbar-light sticky-top">

"sticky-top" doesn't work at all. "fixed-top" ignores sidebar and using full page width.

pro sidebar toggle

I added this 2 code in custom.js:

$("#toggle-sidebar").click(function () {
$(".page-wrapper").toggleClass("toggled");
if ($(".page-wrapper").hasClass("toggled")){
localStorage.setItem("toggled", "true");
}else{
localStorage.setItem("toggled", "false");
}

if (localStorage.getItem("toggled") == "true"){
$(".page-wrapper").addClass("toggled");
}else if (localStorage.getItem("toggled") == "false"){
$(".page-wrapper").removeClass("toggled");
}
});

but in console at local storage is empty , i dont see any change and sidebar not saved opened or closed ... i think need to save this in coockies or you can help me with correct code for this sidebar , i see in js code is #toggle-sidebar but in html code from index is #close-sidebar ID , i try all posibility but not function, after refresh all changes is removed and not saved ... can you update this theme with these function? thanks very much!

Scrolling on mobile

On mobile, scrolling the 'background' makes the sidebar act weird

$menu-icon-color is being ignored at sidebar-themes.scss

No matter what we put there it always goes back to $primary-color.

Problems with existing horizontal nav bar and footer

Nice side bar. But am having problems in integrating the pro side bar with my pre existing application that already has a top nav bar and a footer. The content overlaps when i position attributes in custom.css it displays well but the main content is pushed below the nav bar height and not displayed alongside the side bar.

Border Round as default?

Hi Azouaoui

How can I enable the border round option as default?

Thanks

Sidebar menu drop down open

Hi Sir,

I want to auto-open the Sidebar-dropdown if one of the submenus is selected? I have already tried to like "" li class="sidebar-dropdown active" . It changes the color of the text but the dropdown did not open. how should I do? Thanks

sa77it weld bladi

it is not an issue
i saw that you are mentioned https://speckyboy.com/slide-out-sidebars/
and when i found out that you are from Algeria i wanted to write this

Active Menus implementation for DropDown

how to make the dropdown menu as active ie)open on load

<li class="sidebar-dropdown **active**">
                            <a href="#">
                                <i class="far fa-gem"></i>
                                <span>Components</span>
                            </a>
                            <div class="sidebar-submenu">
                                <ul>
                                    <li>
                                        <a href="#">General</a>
                                    </li>
                                    <li>
                                        <a href="#">Panels</a>
                                    </li>
                                    <li>
                                        <a href="#">Tables</a>
                                    </li>
                                    <li>
                                        <a href="#">Icons</a>
                                    </li>
                                    <li>
                                        <a href="#">Forms</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

i have tried this its active but not open the dropdown

any ides???

can you please commit the changes and upload it sir

please add a header and footer....In new release

Nice sidebar....

popper on sub menu is not working when using @casl/ability

Here is my code:
<Can I='read' a='roles'> <SubMenu title={<Link to='/users/all'>Users</Link>} icon={<i className="flaticon-multiple-users-silhouette h4 m-0 p-0" />} ><Can I='read' a='roles'> <MenuItem> <Link to='/users/roles/all'>Roles</Link> </MenuItem> </Can> </SubMenu> </Can>

It is working normally when not using @cabilityasl/ but when i using this, popper menu on hover is not working...

add np,

please add npm installer

Close sidebar?

How can I close this sidebar?

Sidebar

Hello! I wanted to tell you about an error that I have noticed. The button to close the sidebar is not working for me. In the console I mark an error. Which is the following

---

Sorry for the google translator

position: sticky is not working any where in website. How to work with sticky position in this..

Embed inside Google Sheet Sidebar

wow, what great template! I really like it.

i'm trying to embed it into a Google Sheets sidebar and it shows up ok but the dropdown menus and close button do not work. I'm pretty new to this stuff so I'm sure I'm missing something basic.

I would appreciate any help you could offer. I shared my Sample Google Sheet with you if you have time to look at it please...
https://drive.google.com/open?id=1XK6RzuJnsltHl5zbRt5WUHmwpH9VgaOKBJznS1aHqP0

Hit View Only and then Request Edit Access button and I'll give you full access to view/edit all the App Script code.

Active Menus implementation

<li>
	<a href="#">
		<i class="fa fa-calendar"></i>
		<span>Calendar</span>
	</a>
</li>

i have tried to set the active menus as same in bootstrap

<li class="active">
	<a href="#">
		<i class="fa fa-calendar"></i>
		<span>Calendar</span>
	</a>
</li>

but its still not working

Any Idea???

close-sidebar not working

Hi,
seems that thee close-sidebar is not working, fa-times is not shown, link is not working.
Any idea please?
thanks

How to reverse the sidebar to the right side of screen.

How to reverse the sidebar to the right side of screen. Can you please add a configuration in the js file to handle the flipping of sidebar to the right side of screen.

When vertical window size is too small, main-area text scrolls on top of the header bar

Describe the bug
Content from the main-area appear on top of the header bar when the vertical size is to small to fit the left-hand meny.

To Reproduce
Steps to reproduce the behavior:

1. Expand the site horizontally until the left-hand menu appears.
2. Reduce the vertical size of the window until a vertical scroll-bar becomes visible for the left-hand menu
3. Scroll down in the main area until the main content appears on top of the header bar.

Expected behavior
The content of the main area not appearing on top of the header bar.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 22.04 LTS
• Browser: Google Chrome
• Version: 100.0.4896.127

Additional context
Last but not least. I really love the design you've made! :)

Remember toggle state

Hi there!

I have been messing with this wonderful sidebar and was wondering if there was a way to set it so that it remembers its' toggle state upon refresh.

I don't know a whole lot about dissecting script and writing it, even if I can sort of use what's there enough to tweak understand. I can't seem to effectively modify and fit any codes involving cookies to the sidebar. I would love some help or a code I can plug in or replace. I really love this sidebar and don't want to have to wind up using something else.

Thank you for any help.

How to change the running port

Is there any way I could change the port the server runs on?

Invert the sidebar

By default the sidebar is set to toggled, how can I make it pinned by default?

Add Multilevel Dropdown

Please add multilevel drop down

Dude you pinned the sidebar WHOOHOO

This is not an issue at all.
There is just no other way to give you a compliment!

[Request] optional show icons on collapse

Woud be a nice feature if there would be an option to keep the icons visible when "close" the menu.

kind of like:
https://bootsnipp.com/snippets/kl2OQ

how to delete toggle class for small screens?

This sidebar is very nice, thanks, but not mobile compatible. how to delete toggle class for small screens?

Search Side Menu

It would be nice if the search box could search the left side and remove any options without matching items or sub items

page jumps to top when interacting with the sidebar

when opening the the navbar

either toggling collapsed
or removing collapsed className

the page jumps to top.

reproduce:

scroll a bit
open sidebar
expected:
the page not to jump to top

actual behaviour:
page jumps to top

example: https://codepen.io/azouaoui-med/pen/wpBadb