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>
<div id="app">
<Navbar/>
<div id="wrapper">
<div id="wrapper" :style="{paddingRight: show_sidebar ? '380px': 0}">
<div id="page-content-wrapper">
<div class="container">
<b-breadcrumb :items="breadcrumbs"/>
......@@ -9,18 +9,13 @@
<Footer/>
</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>
</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>
import LoginService from '@/api-services/login.service'
import Navbar from "./components/Navbar";
......@@ -31,18 +26,22 @@
data() {
return {
breadcrumbs: [],
show_sidebar: false
}
},
watch: {
$route() {
var m = this.$router.currentRoute.matched
let m = this.$router.currentRoute.matched
m = m[m.length - 1]
this.breadcrumbs = this.gen_bread(m)
this.breadcrumbs = this.getBreadcrumbs(m)
}
},
methods: {
gen_bread(m) {
var res = [{text: m.meta.resolveName(this.$route.params), path: m.path}]
toggleSidebar() {
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) {
if (m.meta && m.meta.resolveParents) {
let parents = m.meta.resolveParents(this.$route.params)
......@@ -70,3 +69,26 @@
}
}
</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 {
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 {
width: 50%;
}
......
<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 -->
<b-navbar-brand to="/">
<img class="d-inline-block align-top scc-img" alt="SCC" src="@/assets/img/scc_logo_small.png"/>
......@@ -11,10 +12,18 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<b-collapse is-nav id="navbarNavDropdown">
<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['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-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['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 class="ml-auto">
<b-nav-form>
......@@ -32,18 +41,22 @@
</div>
</b-nav-form>
<b-nav-item><span class="d-none d-xl-inline">Erweiterte </span>Suche</b-nav-item>
<b-nav-item>
<i class="fas fa-tasks" aria-hidden="true"></i> Transaktion <span
class="badge badge-pill badge-success"
id="trans_count">0</span>
<b-nav-item :active="$parent.show_sidebar" @click="$parent.toggleSidebar">
<font-awesome-icon :icon="['fas', 'tasks']"/>
Geplante Aktionen
<b-badge variant="primary">1337</b-badge>
</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">
<font-awesome-icon :icon="['far', 'user']"></font-awesome-icon>
<span v-if="$store.state.user"> {{$store.state.user.login_name}}</span>
</template>
<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-item @click="logout()">Abmelden</b-dropdown-item>
</template>
......
......@@ -19,10 +19,11 @@ import {
faPlus,
faChevronUp,
faChevronDown,
faCopy
faCopy,
faTasks
} from '@fortawesome/free-solid-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(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy)
library.add(faCircleNotch, faPlus, faChevronUp, faChevronDown, faCopy, faTasks)
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