├── .gitignore ├── docs ├── docs.css ├── navbar-fixed-left.min.css ├── navbar-fixed-right.min.css ├── docs.js └── index.html ├── resources └── bootstrap-navbar-sidebar-demo.gif ├── src ├── _variables.scss ├── navbar-fixed-left.scss ├── navbar-fixed-right.scss └── _navbar-fixed.scss ├── README.md ├── dist ├── navbar-fixed-left.min.css ├── navbar-fixed-right.min.css ├── navbar-fixed-left.css └── navbar-fixed-right.css ├── gulpfile.js ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /docs/docs.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 200vh; 3 | } 4 | 5 | a { 6 | cursor: pointer; 7 | } 8 | -------------------------------------------------------------------------------- /resources/bootstrap-navbar-sidebar-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mladenplavsic/bootstrap-navbar-sidebar/HEAD/resources/bootstrap-navbar-sidebar-demo.gif -------------------------------------------------------------------------------- /src/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "../node_modules/bootstrap/scss/functions"; 2 | @import "../node_modules/bootstrap/scss/variables"; 3 | 4 | $navbar-sidebar-width: 232px; 5 | $navbar-sidebar-breakpoint: 'md'; 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bootstrap-navbar-sidebar 2 | 3 | Bootstrap navbars fixed to left or right 4 | 5 | Use classic Bootstrap navbar as sidebar, on left or right side. 6 | 7 | [Demo](https://mladenplavsic.github.io/bootstrap-navbar-sidebar/) 8 | 9 | For Bootstrap v3.* check the `bootstrap-v3` branch 10 | 11 | [![Bootstrap navbars fixed to left or right](https://github.com/mladenplavsic/bootstrap-navbar-sidebar/raw/master/resources/bootstrap-navbar-sidebar-demo.gif)](https://mladenplavsic.github.io/bootstrap-navbar-sidebar/) 12 | -------------------------------------------------------------------------------- /src/navbar-fixed-left.scss: -------------------------------------------------------------------------------- 1 | @import "navbar-fixed"; 2 | 3 | body { 4 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 5 | margin-left: $navbar-sidebar-width; 6 | } 7 | } 8 | 9 | .navbar { 10 | &.fixed-left { 11 | @include navbar-sidebar; 12 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 13 | right: auto; 14 | 15 | .navbar-nav { 16 | .nav-item { 17 | .dropdown-toggle { 18 | &:after { 19 | border-top: $caret-width solid transparent; 20 | border-left: $caret-width solid; 21 | border-bottom: $caret-width solid transparent; 22 | border-right: none; 23 | vertical-align: baseline; 24 | } 25 | } 26 | 27 | .dropdown-menu { 28 | left: 100%; 29 | } 30 | } 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /dist/navbar-fixed-left.min.css: -------------------------------------------------------------------------------- 1 | body{padding-top:90px}@media (min-width:768px){body{padding-top:0}}@media (min-width:768px){body{margin-left:232px}}.navbar.fixed-left{position:fixed;top:0;left:0;right:0;z-index:1030}@media (min-width:768px){.navbar.fixed-left{bottom:0;width:232px;flex-flow:column nowrap;align-items:flex-start}.navbar.fixed-left .navbar-collapse{flex-grow:0;flex-direction:column;width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav{flex-direction:column;width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item{width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu{top:0}}@media (min-width:768px){.navbar.fixed-left{right:auto}.navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after{border-top:.3em solid transparent;border-left:.3em solid;border-bottom:.3em solid transparent;border-right:none;vertical-align:baseline}.navbar.fixed-left .navbar-nav .nav-item .dropdown-menu{left:100%}} -------------------------------------------------------------------------------- /docs/navbar-fixed-left.min.css: -------------------------------------------------------------------------------- 1 | body{padding-top:90px}@media (min-width:768px){body{padding-top:0}}@media (min-width:768px){body{margin-left:232px}}.navbar.fixed-left{position:fixed;top:0;left:0;right:0;z-index:1030}@media (min-width:768px){.navbar.fixed-left{bottom:0;width:232px;flex-flow:column nowrap;align-items:flex-start}.navbar.fixed-left .navbar-collapse{flex-grow:0;flex-direction:column;width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav{flex-direction:column;width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item{width:100%}.navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu{top:0}}@media (min-width:768px){.navbar.fixed-left{right:auto}.navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after{border-top:.3em solid transparent;border-left:.3em solid;border-bottom:.3em solid transparent;border-right:none;vertical-align:baseline}.navbar.fixed-left .navbar-nav .nav-item .dropdown-menu{left:100%}} -------------------------------------------------------------------------------- /src/navbar-fixed-right.scss: -------------------------------------------------------------------------------- 1 | @import "navbar-fixed"; 2 | 3 | body { 4 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 5 | margin-right: $navbar-sidebar-width; 6 | } 7 | } 8 | 9 | .navbar { 10 | &.fixed-right { 11 | @include navbar-sidebar; 12 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 13 | left: auto; 14 | 15 | .navbar-nav { 16 | .nav-item { 17 | .dropdown-toggle { 18 | &:after { 19 | border-top: $caret-width solid transparent; 20 | border-left: none; 21 | border-bottom: $caret-width solid transparent; 22 | border-right: $caret-width solid; 23 | vertical-align: baseline; 24 | } 25 | } 26 | 27 | .dropdown-menu { 28 | left: auto; 29 | right: 100%; 30 | } 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /dist/navbar-fixed-right.min.css: -------------------------------------------------------------------------------- 1 | body{padding-top:90px}@media (min-width:768px){body{padding-top:0}}@media (min-width:768px){body{margin-right:232px}}.navbar.fixed-right{position:fixed;top:0;left:0;right:0;z-index:1030}@media (min-width:768px){.navbar.fixed-right{bottom:0;width:232px;flex-flow:column nowrap;align-items:flex-start}.navbar.fixed-right .navbar-collapse{flex-grow:0;flex-direction:column;width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav{flex-direction:column;width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav .nav-item{width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav .nav-item .dropdown-menu{top:0}}@media (min-width:768px){.navbar.fixed-right{left:auto}.navbar.fixed-right .navbar-nav .nav-item .dropdown-toggle:after{border-top:.3em solid transparent;border-left:none;border-bottom:.3em solid transparent;border-right:.3em solid;vertical-align:baseline}.navbar.fixed-right .navbar-nav .nav-item .dropdown-menu{left:auto;right:100%}} -------------------------------------------------------------------------------- /docs/navbar-fixed-right.min.css: -------------------------------------------------------------------------------- 1 | body{padding-top:90px}@media (min-width:768px){body{padding-top:0}}@media (min-width:768px){body{margin-right:232px}}.navbar.fixed-right{position:fixed;top:0;left:0;right:0;z-index:1030}@media (min-width:768px){.navbar.fixed-right{bottom:0;width:232px;flex-flow:column nowrap;align-items:flex-start}.navbar.fixed-right .navbar-collapse{flex-grow:0;flex-direction:column;width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav{flex-direction:column;width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav .nav-item{width:100%}.navbar.fixed-right .navbar-collapse .navbar-nav .nav-item .dropdown-menu{top:0}}@media (min-width:768px){.navbar.fixed-right{left:auto}.navbar.fixed-right .navbar-nav .nav-item .dropdown-toggle:after{border-top:.3em solid transparent;border-left:none;border-bottom:.3em solid transparent;border-right:.3em solid;vertical-align:baseline}.navbar.fixed-right .navbar-nav .nav-item .dropdown-menu{left:auto;right:100%}} -------------------------------------------------------------------------------- /src/_navbar-fixed.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "../node_modules/bootstrap/scss/mixins/breakpoints"; 3 | 4 | body { 5 | padding-top: 90px; 6 | 7 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 8 | padding-top: 0; 9 | } 10 | } 11 | 12 | @mixin navbar-sidebar { 13 | position: fixed; 14 | top: 0; 15 | left: 0; 16 | right: 0; 17 | z-index: $zindex-fixed; 18 | 19 | @include media-breakpoint-up($navbar-sidebar-breakpoint) { 20 | bottom: 0; 21 | width: $navbar-sidebar-width; 22 | flex-flow: column nowrap; 23 | align-items: flex-start; 24 | 25 | .navbar-collapse { 26 | flex-grow: 0; 27 | flex-direction: column; 28 | width: 100%; 29 | 30 | .navbar-nav { 31 | flex-direction: column; 32 | width: 100%; 33 | 34 | .nav-item { 35 | width: 100%; 36 | 37 | .dropdown-menu { 38 | top: 0; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var cleanCSS = require('gulp-clean-css'); 4 | var rename = require('gulp-rename'); 5 | var gls = require('gulp-live-server'); 6 | 7 | gulp.task('default', [ 8 | 'docs' 9 | ]); 10 | 11 | gulp.task('sass', function () { 12 | return gulp.src([ 13 | './src/navbar-fixed-right.scss', 14 | './src/navbar-fixed-left.scss' 15 | ]) 16 | .pipe(sass({ 17 | outputStyle: 'expanded' 18 | }).on('error', sass.logError)) 19 | .pipe(gulp.dest('dist')) 20 | .pipe(cleanCSS()) 21 | .pipe(rename({ 22 | suffix: '.min' 23 | })) 24 | .pipe(gulp.dest('dist')); 25 | }); 26 | 27 | gulp.task('docs', ['sass'], function () { 28 | return gulp.src([ 29 | './dist/*.min.css' 30 | ]) 31 | .pipe(gulp.dest('docs')) 32 | }); 33 | 34 | gulp.task('watch', function () { 35 | gulp.watch('./src/*.scss', [ 36 | 'docs' 37 | ]); 38 | }); 39 | 40 | gulp.task('serve', function() { 41 | var server = gls.static(['./docs/']); 42 | server.start(); 43 | }); 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Mladen Plavsic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-navbar-sidebar", 3 | "version": "4.1.0", 4 | "description": "Transform and use Bootstrap's navbar as sidebar", 5 | "main": "docs/index.html", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "bootstrap": "^4.0.0", 9 | "gulp": "^3.9.1", 10 | "gulp-clean-css": "^2.0.13", 11 | "gulp-live-server": "0.0.31", 12 | "gulp-rename": "^1.2.2", 13 | "gulp-sass": "^3.1.0" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/mladenplavsic/bootstrap-navbar-sidebar.git" 18 | }, 19 | "keywords": [ 20 | "navbar", 21 | "fixed", 22 | "left", 23 | "right", 24 | "bootstrap", 25 | "sidebar", 26 | "navigation" 27 | ], 28 | "author": "Mladen Plavsic ", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/mladenplavsic/bootstrap-navbar-sidebar/issues" 32 | }, 33 | "homepage": "https://mladenplavsic.github.io/bootstrap-navbar-sidebar", 34 | "directories": { 35 | "doc": "docs" 36 | }, 37 | "scripts": { 38 | "test": "echo \"Error: no test specified\" && exit 1" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /dist/navbar-fixed-left.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 90px; 3 | } 4 | 5 | @media (min-width: 768px) { 6 | body { 7 | padding-top: 0; 8 | } 9 | } 10 | 11 | @media (min-width: 768px) { 12 | body { 13 | margin-left: 232px; 14 | } 15 | } 16 | 17 | .navbar.fixed-left { 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | z-index: 1030; 23 | } 24 | 25 | @media (min-width: 768px) { 26 | .navbar.fixed-left { 27 | bottom: 0; 28 | width: 232px; 29 | flex-flow: column nowrap; 30 | align-items: flex-start; 31 | } 32 | .navbar.fixed-left .navbar-collapse { 33 | flex-grow: 0; 34 | flex-direction: column; 35 | width: 100%; 36 | } 37 | .navbar.fixed-left .navbar-collapse .navbar-nav { 38 | flex-direction: column; 39 | width: 100%; 40 | } 41 | .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item { 42 | width: 100%; 43 | } 44 | .navbar.fixed-left .navbar-collapse .navbar-nav .nav-item .dropdown-menu { 45 | top: 0; 46 | } 47 | } 48 | 49 | @media (min-width: 768px) { 50 | .navbar.fixed-left { 51 | right: auto; 52 | } 53 | .navbar.fixed-left .navbar-nav .nav-item .dropdown-toggle:after { 54 | border-top: 0.3em solid transparent; 55 | border-left: 0.3em solid; 56 | border-bottom: 0.3em solid transparent; 57 | border-right: none; 58 | vertical-align: baseline; 59 | } 60 | .navbar.fixed-left .navbar-nav .nav-item .dropdown-menu { 61 | left: 100%; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /dist/navbar-fixed-right.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 90px; 3 | } 4 | 5 | @media (min-width: 768px) { 6 | body { 7 | padding-top: 0; 8 | } 9 | } 10 | 11 | @media (min-width: 768px) { 12 | body { 13 | margin-right: 232px; 14 | } 15 | } 16 | 17 | .navbar.fixed-right { 18 | position: fixed; 19 | top: 0; 20 | left: 0; 21 | right: 0; 22 | z-index: 1030; 23 | } 24 | 25 | @media (min-width: 768px) { 26 | .navbar.fixed-right { 27 | bottom: 0; 28 | width: 232px; 29 | flex-flow: column nowrap; 30 | align-items: flex-start; 31 | } 32 | .navbar.fixed-right .navbar-collapse { 33 | flex-grow: 0; 34 | flex-direction: column; 35 | width: 100%; 36 | } 37 | .navbar.fixed-right .navbar-collapse .navbar-nav { 38 | flex-direction: column; 39 | width: 100%; 40 | } 41 | .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item { 42 | width: 100%; 43 | } 44 | .navbar.fixed-right .navbar-collapse .navbar-nav .nav-item .dropdown-menu { 45 | top: 0; 46 | } 47 | } 48 | 49 | @media (min-width: 768px) { 50 | .navbar.fixed-right { 51 | left: auto; 52 | } 53 | .navbar.fixed-right .navbar-nav .nav-item .dropdown-toggle:after { 54 | border-top: 0.3em solid transparent; 55 | border-left: none; 56 | border-bottom: 0.3em solid transparent; 57 | border-right: 0.3em solid; 58 | vertical-align: baseline; 59 | } 60 | .navbar.fixed-right .navbar-nav .nav-item .dropdown-menu { 61 | left: auto; 62 | right: 100%; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /docs/docs.js: -------------------------------------------------------------------------------- 1 | var themes = [ 2 | 'cerulean', 3 | 'cosmo', 4 | 'cyborg', 5 | 'darkly', 6 | 'flatly', 7 | 'journal', 8 | 'litera', 9 | 'lumen', 10 | 'lux', 11 | 'materia', 12 | 'minty', 13 | 'pulse', 14 | 'sandstone', 15 | 'simplex', 16 | 'sketchy', 17 | 'slate', 18 | 'solar', 19 | 'spacelab', 20 | 'superhero', 21 | 'united', 22 | 'yeti' 23 | ]; 24 | 25 | $(document).ready(function () { 26 | $('[data-class]').click(function () { 27 | updateNavbarClass($(this).attr('data-class')); 28 | }); 29 | 30 | updateNavbarClass('fixed-left'); 31 | 32 | themes.forEach(function (theme) { 33 | $('#theme_select').append($('