Commit 899a19f8 authored by gj4210's avatar gj4210 👽
Browse files

Added sidebar with smoooth animation

parent 2dcc48f6
Pipeline #80252 passed with stages
in 4 minutes and 2 seconds
<template> <template>
<div id="app"> <div id="app">
<Navbar/> <Navbar/>
<div id="wrapper"> <div id="wrapper" :style="{paddingRight: show_sidebar ? '380px': 0}">
<div id="page-content-wrapper"> <div id="page-content-wrapper">
<div class="container"> <div class="container">
<b-breadcrumb :items="breadcrumbs"/> <b-breadcrumb :items="breadcrumbs"/>
...@@ -9,18 +9,13 @@ ...@@ -9,18 +9,13 @@
<Footer/> <Footer/>
</div> </div>
</div> </div>
<b-card id="sidebar-wrapper" :style="{right: show_sidebar ? 0: '-380px'}">
Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’s not a story the Jedi would tell you. It’s a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life… He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic. He could save others from death, but not himself.
</b-card>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
@import 'assets/css/net-suite.css';
@import 'assets/css/net-suite-devel.css';
@import 'assets/css/net-suite-test.css';
</style>
<script> <script>
import LoginService from '@/api-services/login.service' import LoginService from '@/api-services/login.service'
import Navbar from "./components/Navbar"; import Navbar from "./components/Navbar";
...@@ -31,18 +26,22 @@ ...@@ -31,18 +26,22 @@
data() { data() {
return { return {
breadcrumbs: [], breadcrumbs: [],
show_sidebar: false
} }
}, },
watch: { watch: {
$route() { $route() {
var m = this.$router.currentRoute.matched let m = this.$router.currentRoute.matched
m = m[m.length - 1] m = m[m.length - 1]
this.breadcrumbs = this.gen_bread(m) this.breadcrumbs = this.getBreadcrumbs(m)
} }
}, },
methods: { methods: {
gen_bread(m) { toggleSidebar() {
var res = [{text: m.meta.resolveName(this.$route.params), path: m.path}] this.show_sidebar = !this.show_sidebar
},
getBreadcrumbs(m) {
let res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
while ((m.meta && m.meta.resolveParents) || m.parent) { while ((m.meta && m.meta.resolveParents) || m.parent) {
if (m.meta && m.meta.resolveParents) { if (m.meta && m.meta.resolveParents) {
let parents = m.meta.resolveParents(this.$route.params) let parents = m.meta.resolveParents(this.$route.params)
...@@ -70,3 +69,26 @@ ...@@ -70,3 +69,26 @@
} }
} }
</script> </script>
<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
@import 'assets/css/net-suite.css';
@import 'assets/css/net-suite-devel.css';
@import 'assets/css/net-suite-test.css';
#wrapper {
transition: padding-right .5s;
}
#sidebar-wrapper {
height: 100%;
width: 380px;
position: fixed;
z-index: 1;
top: 0;
transition: right .5s;
padding-top: 50px;
background: #F7F7F7;
}
</style>
\ No newline at end of file
...@@ -245,52 +245,6 @@ table.collapse.in { ...@@ -245,52 +245,6 @@ table.collapse.in {
margin-bottom: 15px; margin-bottom: 15px;
} }
#wrapper {
padding-left: 0;
padding-right: 0;
transition: none;
}
#wrapper.toggled {
padding-right: 380px;
padding-left: 0 !important;
}
#sidebar-wrapper {
left: auto;
right: 0;
margin-top: -20px;
background: #efefef;
margin-left: 0;
margin-right: -380px;
padding-top: 25px;
width: 380px;
transition: none;
}
.ease {
transition: all 0.5s ease !important;
}
.sidebar_cont {
padding-bottom: 100px;
}
#wrapper.toggled #sidebar-wrapper {
margin-right: 0;
width: 380px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
margin-right: 0;
}
.cell-50 { .cell-50 {
width: 50%; width: 50%;
} }
......
<template> <template>
<b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`"> <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'"
:variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'" :class="`bg-${$sysinfo.host_oper_mode.mode}`">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<b-navbar-brand to="/"> <b-navbar-brand to="/">
<img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/> <img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
...@@ -11,10 +12,18 @@ ...@@ -11,10 +12,18 @@
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<b-collapse is-nav id="navbarNavDropdown"> <b-collapse is-nav id="navbarNavDropdown">
<b-navbar-nav> <b-navbar-nav>
<b-nav-item v-if="$sysinfo_mods_by_name['dnsvs']" to="/dnsvs/" :active="$route.path.startsWith('/dnsvs/')">DNSVS</b-nav-item> <b-nav-item v-if="$sysinfo_mods_by_name['dnsvs']" to="/dnsvs/"
<b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases']" to="/dhcp-leases/" :active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases</b-nav-item> :active="$route.path.startsWith('/dnsvs/')">DNSVS
<b-nav-item href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/" target="_blank">NATVS+</b-nav-item> </b-nav-item>
<b-nav-item href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/" target="_blank">NETDOC</b-nav-item> <b-nav-item v-if="$sysinfo_mods_by_name['dhcp_leases']" to="/dhcp-leases/"
:active="$route.path.startsWith('/dhcp-leases/')">DHCP-Leases
</b-nav-item>
<b-nav-item href="https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/" target="_blank">
NATVS+
</b-nav-item>
<b-nav-item href="https://www-net.scc.kit.edu/~netadmin/netdoc/user/wrapper.cgi/" target="_blank">
NETDOC
</b-nav-item>
</b-navbar-nav> </b-navbar-nav>
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-form> <b-nav-form>
...@@ -32,18 +41,22 @@ ...@@ -32,18 +41,22 @@
</div> </div>
</b-nav-form> </b-nav-form>
<b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item> <b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item>
<b-nav-item> <b-nav-item :active="$parent.show_sidebar" @click="$parent.toggleSidebar">
<i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span <font-awesome-icon :icon="['fas', 'tasks']"/>
class="badge badge-pill badge-success" Geplante Aktionen
id="trans_count">0</span> <b-badge variant="primary">1337</b-badge>
</b-nav-item> </b-nav-item>
<b-nav-item-dropdown v-if="$store.state.user" right :toggle-class="$route.path.startsWith('/user/')?'active':''"> <b-nav-item-dropdown v-if="$store.state.user" right
:toggle-class="$route.path.startsWith('/user/')?'active':''">
<template slot="button-content"> <template slot="button-content">
<font-awesome-icon :icon="['far', 'user']"></font-awesome-icon> <font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
<span v-if="$store.state.user"> {{$store.state.user.login_name}}</span> <span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
</template> </template>
<template v-if="$store.state.user"> <template v-if="$store.state.user">
<b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'"><font-awesome-icon icon="code"></font-awesome-icon> API-Tokens</b-dropdown-item> <b-dropdown-item to="/user/tokens" :active="$route.path === '/user/tokens'">
<font-awesome-icon icon="code"></font-awesome-icon>
API-Tokens
</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider> <b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item @click="logout()">Abmelden</b-dropdown-item> <b-dropdown-item @click="logout()">Abmelden</b-dropdown-item>
</template> </template>
......
...@@ -19,10 +19,11 @@ import { ...@@ -19,10 +19,11 @@ import {
faPlus, faPlus,
faChevronUp, faChevronUp,
faChevronDown, faChevronDown,
faCopy faCopy,
faTasks
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import {faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing} from '@fortawesome/free-regular-svg-icons' import {faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing} from '@fortawesome/free-regular-svg-icons'
library.add(faExclamationTriangle, faFilter, faInfoCircle, faBars, faArrowRight, faSort, faSortUp, faSortDown, faCode, faBug) library.add(faExclamationTriangle, faFilter, faInfoCircle, faBars, faArrowRight, faSort, faSortUp, faSortDown, faCode, faBug)
library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy) library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy, faTasks)
library.add(faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing) library.add(faUser, faEdit, faTrashAlt, faCheckSquare, faLifeRing)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment