Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | <template lang="pug">
.b-navbar-container
nav.b-navbar-autohide.b-navbar.navbar.navbar-dark.fixed-top.navbar-expand-lg(:class='(isAdmin) ? "bg-danger" : "bg-dark"')
slot(name='content' v-bind='{ title, version }')
.d-none.d-lg-flex
router-link.navbar-brand(v-if='$router' to="/")
img(height="30" :src='$butils.publicPath("img/favicon.svg")')
.text-muted.d-none.ml-1.d-xl-inline {{ title }} #[span.text-muted.tiny {{ version }}]
a.navbar-brand(v-else :href="$butils.currentUrl()")
img(height="30" :src='$butils.publicPath("img/favicon.svg")')
.text-muted.d-none.ml-1.d-xl-inline.align-middle {{ title }} #[span.text-muted.tiny {{ version }}]
button.navbar-toggler(v-show='!$butils.isEmpty(navRoutes)' ref="toggler" type="button"
data-toggle="collapse" data-target="#nav"
aria-controls="nav" aria-expanded="false"
aria-label="Toggle navigation")
i.fa.fa-bars.fa-lg.text-white
.collapse.navbar-collapse#nav(ref="nav")
slot(name='default' v-bind='{ navRoutes, isAdmin }')
ul.navbar-nav.mr-auto
BaseNavBarItem(:path="route.path" :key='route.name' v-for="route in navRoutes") {{ route.name }}
.d-flex.ml-auto
.btn.b-clickable.px-1(v-if='showAbout' @mousedown.prevent="" @click="$emit('toggle-about')"
data-toggle="tooltip" data-placement="bottom" title="About this application")
i.align-middle.fas.fa-info-circle.fa-lg.text-white
slot(name='icons' v-bind='{ isAdmin }')
// @mousedown.prevent is used to prevent taking focus
.btn.b-clickable(@mousedown.prevent="" @click="toggleKeyboardShortcuts()"
data-toggle="tooltip" data-placement="bottom"
title="Press F1 for full Keyboard Shortcut List")
kbd.inverted.mr-2(v-if="showKeyHints") Ctrl+K
i.align-middle.fas.fa-keyboard.fa-lg(:class="showKeyHints ? 'text-info' : 'text-white'")
.btn.b-clickable(@click="toggleErrors()" v-if="errorsExist"
data-toggle="tooltip" data-placement="bottom" title="Show errors")
kbd.inverted.mr-2(v-if="showKeyHints") Ctrl+E
i.align-middle.fas.fa-exclamation-triangle.fa-lg.text-danger
.d-flex(v-if="username && $router").ml-2
router-link.text-muted.my-auto.mr-1(v-if='hasRoute("/me")' to='/me') {{ username }}
.text-muted.my-auto.mr-1(v-else) {{ username }}
a.btn.btn-sm(:href="$butils.currentUrl() + '/auth/logout'"
:class='{ "btn-danger": isAdmin, "btn-dark": !isAdmin && !darkMode,"btn-light": !isAdmin && darkMode }') Sign out
.d-flex(v-if="showThemeSwitcher").ml-2
ThemeSwitcher
</template>
<script>
export { default } from "./BaseNavBar.vue.js";
</script>
<style>
.b-navbar-container {
z-index: 1030;
}
.b-navbar-container ~ .b-viewport {
/* pad viewport that's sibling with this navbar */
padding-top: 55px !important;
}
@media all and (display-mode: fullscreen) {
.b-navbar-container {
z-index: 1035;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 55px;
}
.b-navbar-container ~ .b-viewport {
/* reset viewport because navbar is now fixed */
padding-top: 0px !important;
}
.b-navbar-container:hover nav.b-navbar-autohide {
transform: translateY(0);
}
nav.b-navbar-autohide {
transform: translateY(-100%); /* hidden by default */
transition: transform .1s cubic-bezier(.17,.67,.83,.67);
}
}
nav.b-navbar {
z-index: 1030;
min-height: 55px;
/* FIXME light/dark */
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, .75);
}
nav.bg-danger .text-muted {
color: rgb(255, 120, 120) !important;
}
.tiny {
font-size: 60%;
}
.kActive {
color: deepskyblue !important;
}
kbd.inverted {
color: black;
background-color: white;
}
</style>
|