github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

added horizontal sidebar with grid layout

pull/3698/head
Daniel 2021-05-11 04:42:10 +05:30
parent fcbcda9ec6
commit 0c1b79e627
17 changed files with 328 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
build/scss/_layout.scss
View File

@ -1,87 +1,14 @@
//
// Core: Layout
//
.wrapper {
align-items: stretch;
display: flex;
width: 100%;
.sidebar-rtl {
flex-direction: row-reverse;
}
.layout-fixed & .sidebar {
// stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
}
.layout-fixed.text-sm & .sidebar {
// stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
}
}
.content-wrapper {
display: flex;
width: 100%;
min-width: 0;
min-height: 100vh;
background-color: $main-bg;
color: $main-color;
flex-direction: column;
overflow: hidden;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
z-index: $zindex-content-wrapper;
@include transition($sidebar-transition);
}
.content {
flex: 1;
width: 100%;
max-width: 100vw;
padding: 1rem;
}
.sidebar-close .main-sidebar {
margin-left: -250px;
}
.layout-fixed {
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: 0;
}
.sidebar-close {
.content-wrapper {
margin-left: 0;
}
}
}
@include media-breakpoint-up(sm) {
body:not(.sidebar-close).layout-fixed {
.content-wrapper {
margin-left: $sidebar-width;
}
&.sidebar-collapse .content-wrapper {
margin-left: $sidebar-mini-width;
}
}
}
// @debug $sidebar-fixed;
// @debug $sidebar-fixed;
@include dark-mode() {
.content-wrapper {
background-color: $main-bg-alt;
color: $main-color-alt;
}
}
@import "layout/brand";
@import "layout/content-wrapper";
@import "layout/content";
@import "layout/layout-fixed";
@import "layout/main-footer";
@import "layout/main-header";
@import "layout/main-sidebar";
@import "layout/sidebar-close";
@import "layout/sidebar-horizontal";
@import "layout/sidebar-mini";
@import "layout/sidebar";
@import "layout/wrapper";
//

9
build/scss/_variables.scss
View File

@ -16,7 +16,7 @@ $transition-fn: ease-in-out !default;
// --------------------------------------------------------
$sidebar-width: 250px !default;
$sidebar-padding-x: .5rem !default;
$sidebar-padding-y: 0 !default;
$sidebar-padding-y: .5rem !default;
$sidebar-custom-height: 4rem !default;
$sidebar-custom-height-lg: 6rem !default;
$sidebar-custom-height-xl: 8rem !default;
@ -24,6 +24,7 @@ $sidebar-custom-padding-x: .85rem !default;
$sidebar-custom-padding-y: .5rem !default;
$sidebar-transition: min-width $transition-speed $transition-fn,
max-width $transition-speed $transition-fn,
margin-top $transition-speed $transition-fn,
margin-left $transition-speed $transition-fn,
margin-right $transition-speed $transition-fn,
transform $transition-speed $transition-fn;
@ -63,6 +64,11 @@ $sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem)
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
// SIDEBAR HORIZONTAL
// --------------------------------------------------------
$sidebar-horizontal-width: 100%;
$sidebar-horizontal-height: 80px !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$control-sidebar-width: $sidebar-width !default;
@ -104,6 +110,7 @@ $brand-link-border-buttom: 1px;
$zindex-main-header: $zindex-fixed + 4 !default;
$zindex-sidebar: $zindex-fixed + 8 !default;
$zindex-main-footer: $zindex-fixed + 2 !default;
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
$zindex-control-sidebar: $zindex-fixed + 1 !default;
$zindex-toasts: $zindex-sidebar + 2 !default;
$zindex-content-wrapper: $zindex-sidebar - 2 !default;

1
build/scss/_brand.scss → build/scss/layout/_brand.scss
View File

@ -3,6 +3,7 @@
//
.brand-container {
grid-area: brand;
display: flex;
font-size: $navbar-brand-font-size;
padding: $brand-link-padding-y $sidebar-padding-x;

12
build/scss/layout/_content-wrapper.scss Normal file
View File

@ -0,0 +1,12 @@
.content-wrapper {
grid-area: content-wrapper;
background-color: $main-bg;
color: $main-color;
}
@include dark-mode() {
.content-wrapper {
background-color: $main-bg-alt;
color: $main-color-alt;
}
}

43
build/scss/layout/_layout-fixed.scss Normal file
View File

@ -0,0 +1,43 @@
.layout-fixed:not(.sidebar-horizontal) {
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: 0;
}
.main-header,
.content-wrapper,
.main-footer {
margin-left: $sidebar-width;
transition: $transition-speed $transition-fn;
}
&.sidebar-collapse {
.main-header,
.content-wrapper,
.main-footer {
margin-left: $sidebar-mini-width;
}
}
&.sidebar-close {
.main-header,
.content-wrapper,
.main-footer {
margin-left: 0;
}
}
}
.layout-fixed .wrapper .sidebar {
// stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width}));
}
.layout-fixed.text-sm .wrapper .sidebar {
// stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
}
//

3
build/scss/_main-footer.scss → build/scss/layout/_main-footer.scss
View File

@ -3,6 +3,7 @@
//
.main-footer {
grid-area: main-footer;
background-color: $main-footer-bg;
border-top: $main-footer-border-top;
color: $main-footer-color;
@ -21,7 +22,7 @@
bottom: 0;
}
.content {
.content-wrapper {
margin-bottom: $main-footer-height;
}
}

7
build/scss/_main-header.scss → build/scss/layout/_main-header.scss
View File

@ -3,6 +3,7 @@
//
.main-header {
grid-area: main-header;
background-color: $white;
border-bottom: $main-header-bottom-border;
width: inherit;
@ -20,11 +21,11 @@
.layout-navbar-fixed {
.main-header {
position: fixed;
// position: fixed;
}
.content {
margin-top: $main-header-height;
.content-wrapper {
// margin-top: $main-header-height;
}
}

43
build/scss/_main-sidebar.scss → build/scss/layout/_main-sidebar.scss
View File

@ -6,6 +6,7 @@
@include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color);
.main-sidebar {
grid-area: main-sidebar;
@include transition($sidebar-transition);
z-index: $zindex-sidebar;
min-width: $sidebar-width;
@ -13,39 +14,25 @@
}
@include media-breakpoint-down(sm) {
.main-sidebar {
margin-left: -#{$sidebar-width};
// .main-sidebar {
// margin-left: -#{$sidebar-width};
.sidebar-open & {
transform: translateX($sidebar-width);
}
}
// .sidebar-open & {
// transform: translateX($sidebar-width);
// }
// }
.sidebar-mini-icon {
visibility: hidden;
}
// .sidebar-mini-icon {
// visibility: hidden;
// }
.sidebar-open {
.content-wrapper {
opacity: .9;
}
}
// .sidebar-open {
// .content-wrapper {
// opacity: .9;
// }
// }
}
.sidebar {
overflow-x: hidden;
overflow-y: auto;
padding-bottom: $sidebar-padding-y;
padding-left: $sidebar-padding-x;
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
@include scrollbar-color-gray();
@include scrollbar-width-none();
&:hover {
@include scrollbar-width-thin();
}
}
// Sidebar navigation menu
.nav-sidebar {

25
build/scss/layout/_sidebar-close.scss Normal file
View File

@ -0,0 +1,25 @@
.sidebar-close:not(.sidebar-horizontal) .main-sidebar {
margin-left: -250px;
}
@include media-breakpoint-up(sm) {
.layout-fixed {
// .main-header,
// .content-wrapper,
// .main-footer {
// margin-left: 0;
// }
// .main-header,
// .content-wrapper,
// .main-footer {
// margin-left: $sidebar-width;
// }
// &.sidebar-collapse {
// .main-header,
// .content-wrapper,
// .main-footer {
// margin-left: $sidebar-mini-width;
// }
// }
}
}

64
build/scss/layout/_sidebar-horizontal.scss Normal file
View File

@ -0,0 +1,64 @@
.sidebar-horizontal {
.wrapper {
grid-template-areas:
"main-header"
"main-sidebar"
"content-wrapper"
"main-footer";
grid-template-columns: 1fr;
grid-template-rows: max-content max-content auto max-content;
}
.main-sidebar {
display: grid;
height: $sidebar-horizontal-height;
min-width: $sidebar-horizontal-width;
max-width: $sidebar-horizontal-width;
justify-content: start;
z-index: $zindex-sidebar-horizontal;
}
.brand-container {
display: none;
}
.sidebar {
overflow: visible;
padding-top: .75rem;
.nav-sidebar {
display: grid;
list-style-type: none;
grid-auto-columns: 90px;
grid-auto-flow: column;
grid-gap: 5px;
.nav-header {
display: none;
}
.nav-item > .nav-link {
display: grid;
grid-auto-flow: row;
justify-content: center;
.nav-icon {
text-align: center;
padding-left: 0;
}
span {
padding-left: 0;
}
}
}
}
&.sidebar-close {
.main-sidebar {
margin-top: -#{$sidebar-horizontal-height};
}
}
}
//

0
build/scss/_sidebar-mini.scss → build/scss/layout/_sidebar-mini.scss
View File

14
build/scss/layout/_sidebar.scss Normal file
View File

@ -0,0 +1,14 @@
.sidebar {
overflow-x: hidden;
overflow-y: auto;
padding-bottom: $sidebar-padding-y;
padding-left: $sidebar-padding-x;
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
@include scrollbar-color-gray();
@include scrollbar-width-none();
&:hover {
@include scrollbar-width-thin();
}
}

19
build/scss/layout/_wrapper.scss Normal file
View File

@ -0,0 +1,19 @@
//
// Core: Layout
//
.wrapper {
align-content: stretch;
align-items: stretch;
display: grid;
grid-gap: 0;
grid-template-areas:
"main-sidebar main-header"
"main-sidebar content-wrapper"
"main-sidebar main-footer";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
//

6
build/scss/mixins/_sidebar-theme.scss
View File

@ -24,9 +24,13 @@
&:hover,
.active {
color: color-constract($sidebar-dark-color);
color: color-constract($sidebar-color);
}
}
.nav-treeview {
background-color: $sidebar-bg;
}
}
.sidebar-collapse:not(.layout-fixed) {

5
build/scss/parts/_core.scss
View File

@ -3,10 +3,5 @@
//
@import "../layout";
@import "../main-header";
@import "../main-footer";
@import "../main-sidebar";
@import "../sidebar-mini";
@import "../brand";
//

4
build/ts/sidebar-overlay.ts
View File

@ -21,7 +21,7 @@ const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm'
const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}`
const SELECTOR_CONTENT = '.content'
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
class SidebarOverlay {
addSidebaBreakPoint(): void {
@ -45,7 +45,7 @@ class SidebarOverlay {
init(): void {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
selContentWrapper?.addEventListener('touchstart', this.removeOverlaySidebar)
selContentWrapper?.addEventListener('click', this.removeOverlaySidebar)

210
index.html
View File

@ -9,8 +9,26 @@
<link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body class="sidebar-mini layout-fixed">
<body class="sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<nav class="main-sidebar shadow">
<div class="brand-container">
@ -21,117 +39,93 @@
<a class="sidebar-mini-icon" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
</div>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-th"></i>
<span>
Simple Link
</span>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
<span>
Level 1
<i class="right fas fa-angle-left"></i>
</span>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<span>
Level 2
<i class="right fas fa-angle-left"></i>
</span>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i>
<span>
Level 3
</span>
</a>
</li>
</ul>
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<span>
Level 2
</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<span>
Simple Link
</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Sidebar Menu -->
<nav class="sidebar">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-th"></i>
<span>
Simple Link
</span>
</a>
</li>
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
<span>
Level 1
<i class="right fas fa-angle-left"></i>
</span>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<span>
Level 2
<i class="right fas fa-angle-left"></i>
</span>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i>
<span>
Level 3
</span>
</a>
</li>
</ul>
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<span>
Level 2
</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<span>
Simple Link
</span>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar -->
</nav>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<!-- Main content -->
<main class="content">
<div class="container-fluid">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<!-- /.row -->
</div><!-- /.container-fluid -->
</main>
<!-- /.content -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-end d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>
<!-- Main content -->
<main class="content-wrapper">
<div class="container-fluid">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<!-- /.row -->
</div><!-- /.container-fluid -->
</main>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-end d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->