Mo Elzubeir
134 lines
2.0 KiB
SCSS
134 lines
2.0 KiB
SCSS
// Fixed Sidebar
|
|
|
|
.fixed-sidebar {
|
|
.app-sidebar {
|
|
position: fixed;
|
|
height: 100vh;
|
|
}
|
|
|
|
.app-main {
|
|
.app-main__outer {
|
|
z-index: 9;
|
|
padding-inline-start: $app-sidebar-width;
|
|
}
|
|
}
|
|
|
|
&.fixed-header {
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fixed-header) {
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.app-header {
|
|
margin-inline-start: $app-sidebar-width;
|
|
|
|
.app-header__logo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.app-main {
|
|
//z-index: 12;
|
|
}
|
|
}
|
|
|
|
&.closed-sidebar {
|
|
&:not(.fixed-header) {
|
|
.app-header {
|
|
margin-inline-start: $app-sidebar-width-collapsed;
|
|
}
|
|
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
width: $app-sidebar-width-collapsed;
|
|
padding: 0;
|
|
|
|
.logo-src {
|
|
display: none;
|
|
}
|
|
|
|
.header__pane {
|
|
margin-inline-end: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Right to Left language
|
|
|
|
[dir='rtl'] .fixed-sidebar {
|
|
.app-sidebar {
|
|
position: fixed;
|
|
height: 100vh;
|
|
}
|
|
|
|
.app-main {
|
|
.app-main__outer {
|
|
z-index: 9;
|
|
padding-right: $app-sidebar-width;
|
|
}
|
|
}
|
|
|
|
&.fixed-header {
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.fixed-header) {
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.app-header {
|
|
margin-right: $app-sidebar-width;
|
|
|
|
.app-header__logo {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.app-main {
|
|
//z-index: 12;
|
|
}
|
|
}
|
|
|
|
&.closed-sidebar {
|
|
&:not(.fixed-header) {
|
|
.app-header {
|
|
margin-right: $app-sidebar-width-collapsed;
|
|
}
|
|
|
|
.app-sidebar {
|
|
.app-header__logo {
|
|
width: $app-sidebar-width-collapsed;
|
|
padding: 0;
|
|
|
|
.logo-src {
|
|
display: none;
|
|
}
|
|
|
|
.header__pane {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|