Commit 88604a18 authored by gj4210's avatar gj4210 👽
Browse files

FIX: Navigation & Sidebars

Refactored Navigation into it's own component, embedded in Sidenavbar & Navbar
parent cb19665a
......@@ -5,7 +5,7 @@
<Navbar/>
<div id="wrapper"
:class="{'squished-right': $store.state.show_sidebar_right, 'squished-left': $store.state.show_sidebar_left}">
<b-card class="sidebar-wrapper left" no-body :class="$store.state.show_sidebar_left ? 'show' : null">
<b-card class="sidebar-wrapper left bv-d-md-down-none" no-body :class="$store.state.show_sidebar_left ? 'show' : null">
<SideNavbar/>
</b-card>
<div id="page-content-wrapper">
......@@ -188,6 +188,14 @@ export default {
padding-left: $left-sidebar-width;
}
@include media-breakpoint-down(md) {
#wrapper,
#wrapper.squished-left {
transition: none;
padding-left: 0;
}
}
#wrapper.squished-right {
padding-right: $right-sidebar-width;
}
......@@ -200,7 +208,7 @@ export default {
.sidebar-wrapper {
height: 100%;
position: fixed;
z-index: 3;
z-index: 666;
top: 0;
padding-top: $navbar-height;
background: $sidebar-bg-color;
......@@ -234,13 +242,17 @@ export default {
z-index: 420;
top: -100%;
transition: top .5s;
padding-top: 50px;
padding-top: $navbar-height;
background: $sidebar-bg-color;
}
.sidebar-wrapper.show {
top: 0;
}
.sidebar-wrapper.right {
width: 100%;
}
}
.collapse-icon {
......
......@@ -14,6 +14,7 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<b-collapse is-nav id="navbarNavDropdown" ref="navdropdown">
<GlobalSearch v-if="$store.state.user" class="ml-auto"/>
<Navigation class="d-lg-none"/>
<b-navbar-nav class="ml-auto">
<b-nav-item :active="$store.state.show_sidebar_right" v-if="$store.state.token"
@click.stop="$store.commit('showSidebarRight', !$store.state.show_sidebar_right)">
......@@ -59,10 +60,11 @@
<script>
import LoginService from '@/api-services/login.service'
import GlobalSearch from '@/components/GlobalSearch'
import Navigation from '@/components/Navigation'
export default {
name: 'Navbar',
components: { GlobalSearch },
components: { Navigation, GlobalSearch },
data() {
return {
usr_ico: 'user',
......@@ -111,7 +113,7 @@ export default {
@import '../assets/css/variables.scss';
.navbar {
height: $navbar-height;
min-height: $navbar-height;
}
.navbar.navbar-dark.bg-dark,
......
<template>
<div class="links">
<div v-for="(group, key) in links" :key="key" class="my-2">
<div v-for="link in group" :key="key + link.label + link.address">
<template v-if="!('visible' in link) || link.visible()">
<div v-if="!$store.state.show_sidebar_left && !fullwidth" class="link-button-wrapper">
<button class="link-button" :id="'sidenavbar-link-button-' + key + link.label"
:class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
@click.stop="navigate(link.address)">
<span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
</button>
<b-popover :target="'sidenavbar-link-button-' + key + link.label" class="popover-wide" triggers="hover"
placement="right" container="sideNavbar"
:content="link.label" boundary="window" custom-class="popover-wide"/>
</div>
<div v-if="$store.state.show_sidebar_left || fullwidth" class="link-button-wrapper">
<button class="link-button"
:class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
@click.stop="navigate(link.address)">
<span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
{{ link.label }}
</button>
</div>
</template>
</div>
<hr class="mt-2">
</div>
</div>
</template>
<script>
export default {
name: 'Navigation',
data() {
const self = this
return {
links: {
systems: [
{
has_sub_pages: true,
label: 'DNSVS',
address: '/dnsvs/bcds',
icon: 'map-signs',
visible() {
return self.$sysinfo_js_mods.includes('dnsvs') && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'MACauth',
address: '/macauth',
icon: 'lock',
visible() {
return self.$sysinfo_js_mods.includes('macauth') && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'DHCP-Leases',
address: '/dhcp-leases',
icon: 'list-ol',
visible() {
return 'dhcp_leases' in self.$sysinfo_mods_by_name && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'NATVS+',
address: self.$sysinfo.host_oper_mode.is_prod ? 'https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/' : `https://www-net-${self.$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/`,
icon: 'fire'
},
{
has_sub_pages: true,
label: 'Netdoc',
address: '/netdoc',
icon: 'network-wired'
}
],
organizations: [
{ has_sub_pages: true, label: 'Organisationseinheiten', address: '/org/ou', icon: ['fas', 'building'] },
{
has_sub_pages: false,
label: 'OE-Typen',
address: '/org/type',
icon: ['far', 'building'],
visible() {
return self.$store.state.token && self.$store.state.xup_perm != null && 'org.rw_oet' in self.$store.state.xup_perm
}
},
{ has_sub_pages: true, label: 'Gruppen', address: '/cntl/groups', icon: 'users' }
],
tools: [
{
has_sub_pages: false,
label: 'MACfinder',
address: '/tools/macfinder',
icon: 'search-location',
visible() {
return self.$sysinfo_js_mods.includes('macfinder') && self.$store.state.token
}
},
{
has_sub_pages: false,
label: 'MAC-Vendor-Suche',
address: '/tools/oui_lookup',
icon: 'industry',
visible() {
return self.$sysinfo_js_mods.includes('macfinder')
}
},
{
has_sub_pages: false,
label: 'AP-Liste',
address: '/tools/ap_list',
icon: 'broadcast-tower',
visible() {
return self.$sysinfo_js_mods.includes('ap_list') && self.$store.state.token
}
}
],
requests: [
{
has_sub_pages: false,
label: 'Anträge',
address: '/requests',
icon: 'scroll'
}
]
},
fullwidth: true
}
},
methods: {
navigate(to) {
if (to.startsWith('https://')) {
window.open(to, '_blank').focus()
return
}
if (this.$route.path !== to) this.$router.push(to)
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/css/variables.scss';
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
.link-button-wrapper {
width: 100%;
padding: $sidenavbar-button-margin;
}
.link-button,
.collapse-button {
color: $sidenavbar-button-color;
}
.link-button {
width: 100%;
text-overflow: ellipsis;
overflow-x: hidden;
border: none;
border-radius: $border-radius;
height: $left-sidebar-hidden-width / 1.5;
background: none;
text-align: left;
padding: 0;
}
.link-button:hover,
.link-button.active {
background-color: $sidenavbar-active-hover-color;
}
.link-button.active {
font-weight: bold;
}
.sidebar-icon {
width: $left-sidebar-hidden-width;
text-align: center;
display: inline-block;
}
.link-button > .sidebar-icon {
margin: -$sidenavbar-button-margin;
}
.thicc {
min-width: $left-sidebar-width;
}
hr {
margin-top: 0;
margin-bottom: 0;
}
</style>
......@@ -28,7 +28,7 @@
<script>
export default {
name: 'NavbarContent',
name: 'OldNavbarContent',
props: {
n_style: {
type: String,
......
......@@ -13,34 +13,7 @@
<hr>
</div>
<div class="links">
<div v-for="(group, key) in links" :key="key" class="my-2">
<div v-for="link in group" :key="key + link.label + link.address">
<template v-if="!('visible' in link) || link.visible()">
<div v-if="!$store.state.show_sidebar_left" class="link-button-wrapper">
<button class="link-button" :id="'sidenavbar-link-button-' + key + link.label"
:class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
@click.stop="navigate(link.address)">
<span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
</button>
<b-popover :target="'sidenavbar-link-button-' + key + link.label" class="popover-wide" triggers="hover"
placement="right" container="sideNavbar"
:content="link.label" boundary="window" custom-class="popover-wide"/>
</div>
<div v-if="$store.state.show_sidebar_left" class="link-button-wrapper">
<button class="link-button"
:class="{'active': link.has_sub_pages? $route.path.startsWith(link.address):$route.path === link.address}"
@click.stop="navigate(link.address)">
<span class="sidebar-icon"><font-awesome-icon :icon="link.icon"/></span>
{{ link.label }}
</button>
</div>
</template>
</div>
<hr>
</div>
</div>
<Navigation/>
<div class="mt-auto">
<hr>
......@@ -58,115 +31,10 @@
</template>
<script>
import Navigation from '@/components/Navigation'
export default {
name: 'SideNavbar',
data() {
const self = this
return {
links: {
systems: [
{
has_sub_pages: true,
label: 'DNSVS',
address: '/dnsvs/bcds',
icon: 'map-signs',
visible() {
return self.$sysinfo_js_mods.includes('dnsvs') && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'MACauth',
address: '/macauth',
icon: 'lock',
visible() {
return self.$sysinfo_js_mods.includes('macauth') && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'DHCP-Leases',
address: '/dhcp-leases',
icon: 'list-ol',
visible() {
return 'dhcp_leases' in self.$sysinfo_mods_by_name && self.$store.state.token
}
},
{
has_sub_pages: true,
label: 'NATVS+',
address: self.$sysinfo.host_oper_mode.is_prod ? 'https://www-net.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/' : `https://www-net-${self.$sysinfo.host_oper_mode.mode}.scc.kit.edu/~netadmin/natvs/user/wrapper.cgi/`,
icon: 'fire'
},
{
has_sub_pages: true,
label: 'Netdoc',
address: '/netdoc',
icon: 'network-wired'
}
],
organizations: [
{ has_sub_pages: true, label: 'Organisationseinheiten', address: '/org/ou', icon: ['fas', 'building'] },
{
has_sub_pages: false,
label: 'OE-Typen',
address: '/org/type',
icon: ['far', 'building'],
visible() {
return self.$store.state.token && self.$store.state.xup_perm != null && 'org.rw_oet' in self.$store.state.xup_perm
}
},
{ has_sub_pages: true, label: 'Gruppen', address: '/cntl/groups', icon: 'users' }
],
tools: [
{
has_sub_pages: false,
label: 'MACfinder',
address: '/tools/macfinder',
icon: 'search-location',
visible() {
return self.$sysinfo_js_mods.includes('macfinder') && self.$store.state.token
}
},
{
has_sub_pages: false,
label: 'MAC-Vendor-Suche',
address: '/tools/oui_lookup',
icon: 'industry',
visible() {
return self.$sysinfo_js_mods.includes('macfinder')
}
},
{
has_sub_pages: false,
label: 'AP-Liste',
address: '/tools/ap_list',
icon: 'broadcast-tower',
visible() {
return self.$sysinfo_js_mods.includes('ap_list') && self.$store.state.token
}
}
],
requests: [
{
has_sub_pages: false,
label: 'Anträge',
address: '/requests',
icon: 'scroll'
}
]
}
}
},
methods: {
navigate(to) {
if (to.startsWith('https://')) {
window.open(to, '_blank').focus()
return
}
if (this.$route.path !== to) this.$router.push(to)
}
}
components: { Navigation }
}
</script>
......@@ -182,28 +50,6 @@ export default {
white-space: nowrap;
}
.link-button-wrapper {
width: 100%;
padding: $sidenavbar-button-margin;
}
.link-button,
.collapse-button {
color: $sidenavbar-button-color;
}
.link-button {
width: 100%;
text-overflow: ellipsis;
overflow-x: hidden;
border: none;
border-radius: $border-radius;
height: $left-sidebar-hidden-width / 1.5;
background: none;
text-align: left;
padding: 0;
}
.collapse-button {
width: 100%;
border: none;
......@@ -211,32 +57,19 @@ export default {
background: none;
text-align: left;
padding: 0;
color: $sidenavbar-button-color;
}
.link-button:hover,
.link-button.active,
.collapse-button:hover {
background-color: $sidenavbar-active-hover-color;
}
.link-button.active {
font-weight: bold;
}
.sidebar-icon {
width: $left-sidebar-hidden-width;
text-align: center;
display: inline-block;
}
.link-button > .sidebar-icon {
margin: -$sidenavbar-button-margin;
}
.thicc {
min-width: $left-sidebar-width;
}
hr {
margin-top: 0;
margin-bottom: 0;
......
......@@ -121,7 +121,7 @@
<script>
import GlobalSearch from '@/components/GlobalSearch'
import NavbarContent from '@/components/NavbarContent'
import NavbarContent from '@/components/OldNavbarContent'
import Footer from '@/components/Footer'
import LoginService from '@/api-services/login.service'
......
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