All files / src/BaseBar BaseSideBar.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1x
4x
4x
4x
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
<template lang="pug">
.col.b-sidebar.flex-shrink-1(v-show='!hidden'
                                   :class="{ 'position-absolute': absolute }")
  .d-flex.flex-column.h-100.w-100.pt-2.pl-1(:class="{ shadow: !this.hidden, 'bg-dark': !this.darkMode, 'bg-light': this.darkMode }")
    slot(name='default')
    .list-group(v-if='showRoutes' role='tablist')
      BaseSideBarItem(:path='route.path' :key='route.name' v-for='route in navRoutes') {{ route.name }}
    .d-flex.mt-auto
      slot(name='footer')
        router-link.navbar-brand(v-if='$router && !absolute' to="/")
          img(height="30" :src='$butils.publicPath("img/favicon.svg")')
        div.d-flex.ml-auto.m-1(v-if='showAbout')
          button.btn.btn-secondary.btn-sm.mt-auto.about-button(@mousedown.prevent="" @click='$emit("toggle-about")') about
</template>
<script src='./BaseSideBar.vue.js' />
<style lang="scss">
.b-sidebar {
  min-width: 290px !important;
  max-width: 290px !important;
  z-index: 1031;
 
  &.position-absolute {
    z-index: 1029;
  }
 
  > div {
    max-width: 300px !important;
  }
 
  > .shadow {
    box-shadow: 1.5rem 0rem .5rem -1rem rgba(0, 0, 0, 0.175) !important
  }
  .about-button {
    opacity: 0.4;
    &:hover {
      opacity: 1;
    }
  }
}
</style>