https://github.com/azouaoui-med/pro-sidebar-template

Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript
https://github.com/azouaoui-med/pro-sidebar-template

css html javascript layout layout-template menu responsive scss sidebar sidebar-template submenu webpack

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/azouaoui-med/pro-sidebar-template
• Owner: azouaoui-med
• License: mit
• Created: 2017-06-30T17:46:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-12-10T04:56:48.000Z (about 1 month ago)
• Last Synced: 2025-01-03T02:06:58.983Z (19 days ago)
• Topics: css, html, javascript, layout, layout-template, menu, responsive, scss, sidebar, sidebar-template, submenu, webpack
• Language: HTML
• Homepage: https://azouaoui-med.github.io/pro-sidebar-template
• Size: 1.19 MB
• Stars: 972
• Watchers: 31
• Forks: 459
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Pro sidebar template

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

## Demo

[See it live](https://azouaoui-med.github.io/pro-sidebar-template)

## Screenshot

![Pro Sidebar](https://user-images.githubusercontent.com/25878302/215290325-e5c6043b-4411-404c-83b8-dcc227df70ad.jpg)

## 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](https://github.com/azouaoui-med/css-pro-layout) package, please refer to the [docs](https://azouaoui-med.github.io/css-pro-layout/) 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

```html

  


    

  

  


    

  


```

### Sidebar Layout

Sidebar comes with layout support for better organization of the inner structure

```html

  


    


      

    

    


      

    

    


      

    

  


```

More on the sidebar [here](https://azouaoui-med.github.io/css-pro-layout/docs/reference/sidebar)

### Menu

Wrapper component that groups all menu items

```html

  

```

**Open current submenu**

Use `.open-current-submenu` to enable opening only one submenu component at a time

```html

  

```

**Icon shape**

A set of classes are provided to restyle menu icons

- `.icon-shape-square`

- `.icon-shape-rounded`

- `.icon-shape-circle`

```html

  

```

### Menu Item

Building menu item requires having `.menu-item` class in the wrapper and `.menu-title` for the text

```html

  


    


      

        menu text

      

    

    

  


```

**Menu Icon**

Use `.menu-icon` to add an icon to menu items

```html

  


    


      

        

          

        

        menu text

      

    

    

  


```

**Prefix & Suffix**

Menu item also supports having prefix and suffix components

```html

  


    


      

        

          

        

        prefix

        menu text

        suffix

      

    

    

  


```

### 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

```html

  


    


      

        menu text

      

      


        


          

            sub menu text