nuxtjs-bootstrap-sidebar
Version:
Sidebar component for Vue apps created using the project's bootstrap-vue fork vue-bootstrap-sidebar by Juraj Kavka
1 lines • 17.8 kB
JavaScript
var NuxtjsBootstrapSidebar=function(){"use strict";function e(e,i){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==i)return;var a,r,o=[],n=!0,s=!1;try{for(i=i.call(e);!(n=(a=i.next()).done)&&(o.push(a.value),!t||o.length!==t);n=!0);}catch(e){s=!0,r=e}finally{try{n||null==i.return||i.return()}finally{if(s)throw r}}return o}(e,i)||function(e,i){if(!e)return;if("string"==typeof e)return t(e,i);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return t(e,i)}(e,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,a=new Array(t);i<t;i++)a[i]=e[i];return a}var i={name:"NuxtjsBootstrapSidebar",components:{},props:{links:{type:Array,default:null},initialShow:{type:Boolean,default:!1},theme:{type:String,default:"default-theme"},header:{type:String,default:""},align:{type:String,default:"left"}},data:function(){return{show:this.initialShow}},beforeMount:function(){window.addEventListener("resize",this.onResize);var e=window.document.documentElement.clientWidth;this.show=!(e<=991.98)},beforeDestroy:function(){window.removeEventListener("resize",this.onResize)},methods:{onButtonClick:function(){this.show=!this.show,this.$emit("sidebar-changed",this.show)},onResize:function(e){var t=e.target||e.srcElement;if(null!=t){var i=t.document.documentElement.clientWidth;this.show=!(i<=991.98)}}}};function a(e,t,i,a,r,o,n,s,d,l){"boolean"!=typeof n&&(d=s,s=n,n=!1);const b="function"==typeof i?i.options:i;let p;if(e&&e.render&&(b.render=e.render,b.staticRenderFns=e.staticRenderFns,b._compiled=!0,r&&(b.functional=!0)),a&&(b._scopeId=a),o?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},b._ssrRegister=p):t&&(p=n?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),p)if(b.functional){const e=b.render;b.render=function(t,i){return p.call(i),e(t,i)}}else{const e=b.beforeCreate;b.beforeCreate=e?[].concat(e,p):[p]}return i}const r="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(e){return(e,t)=>function(e,t){const i=r?t.media||"default":e,a=s[i]||(s[i]={ids:new Set,styles:[]});if(!a.ids.has(e)){a.ids.add(e);let i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",t.media&&a.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(i),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{const e=a.ids.size-1,t=document.createTextNode(i),r=a.element.childNodes;r[e]&&a.element.removeChild(r[e]),r.length?a.element.insertBefore(t,r[e]):a.element.appendChild(t)}}}(e,t)}let n;const s={};var d=a({render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"wrapper"},[i("nav",{class:"sidebar vue-bootstrap-sidebar bg-light text-dark default-theme "+([e.theme]&&[e.show?"sidebar-visible":"sidebar-hidden"])+" "+e.align,attrs:{id:"sidebar","data-color":"white","data-active-color":"danger"}},[i("div",{staticClass:"sidebar-header logo",on:{click:e.onButtonClick}},[e._t("logo")],2),e._v(" "),i("div",{staticClass:"sidebar-wrapper"},[i("b-list-group",{staticClass:"items-wrapper nav"},[e._l(e.links,(function(t,a){return[void 0!==t.href?[i("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right",modifiers:{hover:!0,right:!0}}],key:a,staticClass:"list-group-item list-group-item-action",attrs:{title:t.name}},[i("b-button",{staticClass:"btn sidebar-menu-item",class:""+e.align,attrs:{block:"",to:t.href,variant:"info",squared:!0,size:"lg"}},[i("div",{staticClass:"fa-icon"},[t.faIcon?i("font-awesome-icon",{tag:"component",attrs:{icon:t.faIcon}}):e._e()],1),e._v(" "),i("div",{staticClass:"link-name"},[e._v("\n "+e._s(t.name)+"\n ")])])],1)]:[i("div",{directives:[{name:"b-tooltip",rawName:"v-b-tooltip.hover.right",modifiers:{hover:!0,right:!0}}],key:a,staticClass:"list-group-item list-group-item-action",attrs:{title:t.name}},[i("b-button",{directives:[{name:"b-toggle",rawName:"v-b-toggle",value:"accordion-"+(a+10),expression:"`accordion-${index + 10}`"}],staticClass:"sidebar-menu-item dropdown-toggle rounded-0",class:""+e.align,attrs:{block:"",variant:"info",size:"lg"}},[i("div",{staticClass:"fa-icon"},[t.faIcon?i("font-awesome-icon",{tag:"component",attrs:{icon:t.faIcon}}):e._e()],1),e._v(" "),i("div",{staticClass:"link-name"},[e._v("\n "+e._s(t.name)+"\n ")])])],1),e._v(" "),i("b-collapse",{key:a+10,attrs:{id:"accordion-"+(a+10),accordion:"my-accordion",role:"tabpanel"}},[i("b-list-group",e._l(t.children,(function(t,a){return i("div",{key:a,staticClass:"list-group-item list-group-item-action"},[i("b-button",{staticClass:"sidebar-menu-item rounded-0 child-level-1",class:""+e.align,attrs:{block:"",to:t.href,variant:"primary",squared:!0}},[i("div",{staticClass:"fa-icon"},[t.faIcon?i("font-awesome-icon",{tag:"component",attrs:{icon:t.faIcon}}):e._e()],1),e._v(" "),i("div",{staticClass:"link-name"},[e._v("\n "+e._s(t.name)+"\n ")])])],1)})),0)],1)]]}))],2)],1),e._v(" "),e._t("footer"),e._v(" "),i("div",{staticClass:"sidebar-button",class:[e.theme,{cross:e.show},e.show?"visible":"hidden"],attrs:{id:"sidebarButton"},on:{click:e.onButtonClick}},[i("div",{staticClass:"bar1"}),e._v(" "),i("div",{staticClass:"bar2"}),e._v(" "),i("div",{staticClass:"bar3"})])],2),e._v(" "),i("div",{staticClass:"main-panel"},[i("nav",{staticClass:"\n navbar navbar-expand-lg navbar-absolute\n fixed-top\n navbar-transparent\n "},[i("div",{class:"container-fluid "+[e.show?"sidebar":"no-sidebar"]+" "+e.align,attrs:{id:"navbar"}},[e._t("navbar")],2)]),e._v(" "),i("div",{class:"content "+[e.show?"sidebar":"no-sidebar"]+" "+e.align,attrs:{id:"content"}},[e._t("content")],2)])])},staticRenderFns:[]},(function(e){e&&e("data-v-52ca2014_0",{source:'.vue-bootstrap-sidebar{transition:all .3s;min-width:250px;max-width:250px;height:100vh;z-index:1031;position:fixed;top:0}.vue-bootstrap-sidebar.left{margin-left:0;left:0}.vue-bootstrap-sidebar.left .sidebar-header{padding:10px}.vue-bootstrap-sidebar.left .sidebar-header .logo-mini{margin:0 auto;display:block;width:250px}.vue-bootstrap-sidebar.left .sidebar-header .logo-mini img{margin:5px;display:inline-block;width:40px;margin-top:-12px;margin-left:10px;margin-right:10px}.vue-bootstrap-sidebar.left .sidebar-header .logo-mini .logo-title{display:inline-block}.vue-bootstrap-sidebar.left .sidebar-header .logo-mini .logo-title h2{display:inline-block}.vue-bootstrap-sidebar.left .list-group-item{padding:0!important}.vue-bootstrap-sidebar.left .list-group-item .dropdown-toggle::before{display:none}.vue-bootstrap-sidebar.left .list-group-item .dropdown-toggle::after{position:absolute;right:20px;margin-top:10px;display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item{text-align:left;padding-left:10px}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item .fa-icon{display:inline-block;text-align:center;width:40px!important;margin-left:10px!important;margin-right:10px!important;top:5px}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item .link-name{display:inline;text-align:left}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item.child-level-1{padding-left:45px!important}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item.child-level-1 .fa-icon{display:inline-block;text-align:center;position:absolute;left:25px}.vue-bootstrap-sidebar.left .list-group-item .sidebar-menu-item.child-level-1 .link-name{display:inline;text-align:left;margin-left:25px}.vue-bootstrap-sidebar.left .sidebar-button{position:fixed;top:10px;left:200px;transition:all .3s}.vue-bootstrap-sidebar.left .sidebar-button.visible{left:200px}.vue-bootstrap-sidebar.left .sidebar-button.hidden{left:0}.vue-bootstrap-sidebar.sidebar-hidden{margin-left:-250px}.vue-bootstrap-sidebar.sidebar-visible{box-shadow:1px}.vue-bootstrap-sidebar{transition:all .3s;min-width:250px;max-width:250px;height:100vh;z-index:1031;position:fixed;top:0}.vue-bootstrap-sidebar.right{margin-right:0;right:0}.vue-bootstrap-sidebar.right .sidebar-header{padding:10px}.vue-bootstrap-sidebar.right .sidebar-header .logo-mini{margin:0 auto;display:block;width:250px}.vue-bootstrap-sidebar.right .sidebar-header .logo-mini img{margin:5px;display:inline-block;width:40px;margin-top:-12px;margin-left:10px;margin-right:10px}.vue-bootstrap-sidebar.right .sidebar-header .logo-mini .logo-title{display:inline-block}.vue-bootstrap-sidebar.right .sidebar-header .logo-mini .logo-title h2{display:inline-block}.vue-bootstrap-sidebar.right .list-group-item{padding:0!important}.vue-bootstrap-sidebar.right .list-group-item .dropdown-toggle::before{position:absolute;left:20px;margin-top:10px;display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.vue-bootstrap-sidebar.right .list-group-item .dropdown-toggle::after{display:none}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item{text-align:right;padding-right:0}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item .fa-icon{display:inline-block;text-align:center;width:25px!important;position:fixed;right:10px}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item .link-name{display:inline;text-align:right;margin-right:50px}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item.child-level-1{padding-left:50px!important}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item.child-level-1 .fa-icon{display:inline-block;text-align:center;position:absolute;right:25px}.vue-bootstrap-sidebar.right .list-group-item .sidebar-menu-item.child-level-1 .link-name{display:inline;text-align:right;margin-left:25px}.vue-bootstrap-sidebar.right .sidebar-button{position:fixed;top:10px;transition:all .3s}.vue-bootstrap-sidebar.right .sidebar-button.visible{right:10px}.vue-bootstrap-sidebar.right .sidebar-button.hidden{right:10px}.vue-bootstrap-sidebar.sidebar-hidden{margin-right:-250px}.vue-bootstrap-sidebar.sidebar-hidden .list-group-item .sidebar-menu-item .fa-icon{right:-30px}.vue-bootstrap-sidebar.sidebar-visible{box-shadow:1px}#navbar.left :first-child{transition:all .3s}#navbar.left.sidebar>nav{padding-left:270px}#navbar.left.no-sidebar>nav{padding-left:50px}#navbar.right :first-child{transition:all .3s}#navbar.right.sidebar>nav{padding-left:10px}#navbar.right.no-sidebar>nav{padding-left:10px}#content.left{transition:all .3s;padding-top:20px}#content.left.sidebar{margin-left:250px}#content.left.no-sidebar{margin-left:0}#content.right{transition:all .3s;padding-top:20px}#content.right.sidebar{margin-right:250px}#content.right.no-sidebar{margin-left:0}@media (min-width:576px) and (max-width:991.98px){.vue-bootstrap-sidebar.left.sidebar-hidden{min-width:80px;max-width:80px;margin-left:0;left:0}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-header{padding-top:10px;padding-left:5px;padding-right:5px}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-header .logo-mini{margin:0 auto;display:block;width:80px}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-header .logo-mini img{display:block;margin-top:-1px;margin-left:auto;margin-right:auto}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-header .logo-mini .logo-title{display:none}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group{margin:0 auto}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item{text-align:left;padding-left:0;min-height:36px}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item .fa-icon{margin:0 auto!important;display:inline-block;text-align:center;width:25px!important;position:absolute;left:5px;right:0;top:5px;min-height:20px}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item .link-name{display:none}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1{padding-left:30px!important;min-height:36px}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1 .fa-icon{display:inline-block;text-align:center;position:absolute;left:20px}.vue-bootstrap-sidebar.left.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1 .link-name{display:none}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-button{position:fixed;top:10px;left:200px;transition:all .3s}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-button.visible{left:200px}.vue-bootstrap-sidebar.left.sidebar-hidden .sidebar-button.hidden{left:-40px}.vue-bootstrap-sidebar.right.sidebar-hidden{min-width:80px;max-width:80px;margin-right:0;right:0}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-header{padding-top:10px;padding-left:5px;padding-right:5px}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-header .logo-mini{margin:0 auto;display:block;width:80px}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-header .logo-mini img{display:block;margin-top:-1px;margin-left:auto;margin-right:auto}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-header .logo-mini .logo-title{display:none}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group{margin:0 auto}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item{text-align:right;padding-right:0;min-height:36px}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item .fa-icon{margin:0 auto!important;display:inline-block;text-align:center;width:25px!important;position:absolute;left:5px;right:0;top:5px;min-height:20px}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item .link-name{display:none}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1{padding-left:30px!important;min-height:36px}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1 .fa-icon{display:inline-block;text-align:center;position:absolute;right:20px}.vue-bootstrap-sidebar.right.sidebar-hidden .list-group-item .sidebar-menu-item.child-level-1 .link-name{display:none}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-button{position:fixed;top:10px;transition:all .3s}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-button.visible{right:10px}.vue-bootstrap-sidebar.right.sidebar-hidden .sidebar-button.hidden{right:-40px}#navbar.left.no-sidebar>nav{padding-left:85px}#navbar.right.no-sidebar>nav{padding-left:10px}#content.left{transition:all .3s;padding-top:20px}#content.left.sidebar{margin-left:250px}#content.left.no-sidebar{margin:0 auto;left:80px;position:absolute}#content.right{transition:all .3s;padding-top:20px}#content.right.sidebar{margin-right:250px}#content.right.no-sidebar{margin-left:-125px}}.default-theme{background:#f8f9fa;color:#000;box-shadow:0 0 0 0 rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.19)}.default-theme .sidebar-header{background-color:#f8f9fa;color:#000}.default-theme .items-wrapper{background-color:#f8f9fa}.default-theme .list-group-item{padding:0!important}.default-theme .list-group-item .sidebar-menu-item{background-color:#f8f9fa;color:#000;border:none}.default-theme .list-group-item .sidebar-menu-item:hover{background-color:#007bff}.default-theme .list-group-item .sidebar-menu-item:active,.default-theme .list-group-item .sidebar-menu-item:focus{outline:0!important;box-shadow:none!important;background-color:#f8f9fa}.default-theme .sidebar-button{background-color:rgba(248,249,250,0);color:#000;border:none;border-radius:0;opacity:1;box-shadow:none;margin-left:10px}.default-theme .sidebar-button:active,.default-theme .sidebar-button:focus,.default-theme .sidebar-button:hover,.default-theme .sidebar-button:visited{background-color:#007bff;color:#000;border:none;border-color:none;box-shadow:none}.default-theme{display:inline-block;cursor:pointer}.default-theme .bar1,.default-theme .bar2,.default-theme .bar3{width:25px;height:3px;background-color:#333;margin:6px 0;transition:.4s}.default-theme.cross .bar1{-webkit-transform:rotate(-45deg) translate(-7px,6px);transform:rotate(-45deg) translate(-7px,6px)}.default-theme.cross .bar2{opacity:0}.default-theme.cross .bar3{-webkit-transform:rotate(45deg) translate(-6px,-6px);transform:rotate(45deg) translate(-6px,-6px)}',map:void 0,media:void 0})}),i,undefined,false,undefined,!1,o,void 0,void 0),l=function(){var e=d;return e.install=function(t){t.component("NuxtjsBootstrapSidebar",e)},e}(),b=Object.freeze({__proto__:null,default:l});Object.entries(b).forEach((function(t){var i=e(t,2),a=i[0],r=i[1];"default"!==a&&(l[a]=r)}));var p={install:l.install},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(p),l}();