Commit 83d55f94 authored by gj4210's avatar gj4210 👽
Browse files

UPD: Made Sidebar responsive

parent 620a2101
Pipeline #87299 passed with stages
in 7 minutes and 41 seconds
<template>
<div id="app">
<Navbar/>
<div id="wrapper" :style="{paddingRight: show_sidebar ? '380px': 0}">
<div id="wrapper" :class="show_sidebar ? 'squished' : null">
<div id="page-content-wrapper">
<div class="container">
<b-breadcrumb :items="breadcrumbs"/>
......@@ -9,7 +9,7 @@
<Footer/>
</div>
</div>
<b-card id="sidebar-wrapper" :style="{right: show_sidebar ? 0: '-380px'}">
<b-card id="sidebar-wrapper" :class="show_sidebar ? 'hide' : null">
<Sidebar/>
</b-card>
</div>
......@@ -78,18 +78,48 @@
@import 'assets/css/net-suite-devel.css';
@import 'assets/css/net-suite-test.css';
#wrapper {
transition: padding-right .5s;
$sidebar-width: 380px;
@media screen and (min-width: 981px) {
#wrapper {
transition: padding-right .5s;
}
#wrapper.squished {
padding-right: $sidebar-width;
}
#sidebar-wrapper {
height: 100%;
width: $sidebar-width;
position: fixed;
z-index: 1;
top: 0;
right: -$sidebar-width;
transition: right .5s;
padding-top: 50px;
background: #F7F7F7;
}
#sidebar-wrapper.hide {
right: 0px;
}
}
#sidebar-wrapper {
height: 100%;
width: 380px;
position: fixed;
z-index: 1;
top: 0;
transition: right .5s;
padding-top: 50px;
background: #F7F7F7;
@media screen and (max-width: 980px) {
#sidebar-wrapper {
height: 100%;
width: 100%;
position: fixed;
z-index: 999;
top: -100%;
transition: top .5s;
padding-top: 50px;
background: #F7F7F7;
}
#sidebar-wrapper.hide {
top: 0;
}
}
</style>
\ No newline at end of file
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