diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index d8fcd40c4..20818c87d 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -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"; // diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss index 2e3f2e517..e67ad7447 100644 --- a/build/scss/_variables.scss +++ b/build/scss/_variables.scss @@ -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; diff --git a/build/scss/_brand.scss b/build/scss/layout/_brand.scss similarity index 96% rename from build/scss/_brand.scss rename to build/scss/layout/_brand.scss index ecdcf4814..a3c98d345 100644 --- a/build/scss/_brand.scss +++ b/build/scss/layout/_brand.scss @@ -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; diff --git a/build/scss/layout/_content-wrapper.scss b/build/scss/layout/_content-wrapper.scss new file mode 100644 index 000000000..b98769b72 --- /dev/null +++ b/build/scss/layout/_content-wrapper.scss @@ -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; + } +} diff --git a/build/scss/layout/_layout-fixed.scss b/build/scss/layout/_layout-fixed.scss new file mode 100644 index 000000000..048293ab5 --- /dev/null +++ b/build/scss/layout/_layout-fixed.scss @@ -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})); +} + +// diff --git a/build/scss/_main-footer.scss b/build/scss/layout/_main-footer.scss similarity index 91% rename from build/scss/_main-footer.scss rename to build/scss/layout/_main-footer.scss index fd4cc6627..09a0d3ba8 100644 --- a/build/scss/_main-footer.scss +++ b/build/scss/layout/_main-footer.scss @@ -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; } } diff --git a/build/scss/_main-header.scss b/build/scss/layout/_main-header.scss similarity index 83% rename from build/scss/_main-header.scss rename to build/scss/layout/_main-header.scss index ee85ebda6..c4568f5a2 100644 --- a/build/scss/_main-header.scss +++ b/build/scss/layout/_main-header.scss @@ -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; } } diff --git a/build/scss/_main-sidebar.scss b/build/scss/layout/_main-sidebar.scss similarity index 61% rename from build/scss/_main-sidebar.scss rename to build/scss/layout/_main-sidebar.scss index db24f8f11..480e400f0 100644 --- a/build/scss/_main-sidebar.scss +++ b/build/scss/layout/_main-sidebar.scss @@ -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 { diff --git a/build/scss/layout/_sidebar-close.scss b/build/scss/layout/_sidebar-close.scss new file mode 100644 index 000000000..28bb79896 --- /dev/null +++ b/build/scss/layout/_sidebar-close.scss @@ -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; + // } + // } + } +} diff --git a/build/scss/layout/_sidebar-horizontal.scss b/build/scss/layout/_sidebar-horizontal.scss new file mode 100644 index 000000000..2a62300d7 --- /dev/null +++ b/build/scss/layout/_sidebar-horizontal.scss @@ -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}; + } + } +} + +// diff --git a/build/scss/_sidebar-mini.scss b/build/scss/layout/_sidebar-mini.scss similarity index 100% rename from build/scss/_sidebar-mini.scss rename to build/scss/layout/_sidebar-mini.scss diff --git a/build/scss/layout/_sidebar.scss b/build/scss/layout/_sidebar.scss new file mode 100644 index 000000000..f3844e0ee --- /dev/null +++ b/build/scss/layout/_sidebar.scss @@ -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(); + } +} diff --git a/build/scss/layout/_wrapper.scss b/build/scss/layout/_wrapper.scss new file mode 100644 index 000000000..9f0ecc4db --- /dev/null +++ b/build/scss/layout/_wrapper.scss @@ -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; +} + +// diff --git a/build/scss/mixins/_sidebar-theme.scss b/build/scss/mixins/_sidebar-theme.scss index baaadd74a..e3c0b76f6 100644 --- a/build/scss/mixins/_sidebar-theme.scss +++ b/build/scss/mixins/_sidebar-theme.scss @@ -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) { diff --git a/build/scss/parts/_core.scss b/build/scss/parts/_core.scss index 8e895d31f..fa15cdf49 100644 --- a/build/scss/parts/_core.scss +++ b/build/scss/parts/_core.scss @@ -3,10 +3,5 @@ // @import "../layout"; -@import "../main-header"; -@import "../main-footer"; -@import "../main-sidebar"; -@import "../sidebar-mini"; -@import "../brand"; // diff --git a/build/ts/sidebar-overlay.ts b/build/ts/sidebar-overlay.ts index 49fdaffd7..d5dc0e600 100644 --- a/build/ts/sidebar-overlay.ts +++ b/build/ts/sidebar-overlay.ts @@ -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) diff --git a/index.html b/index.html index f58ead70e..d2a38cf14 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,26 @@ - +
+ + + + - -
- - - - - -
-
- - - - - - - - - - -
-
- - - -
- -
- Anything you want -
- - Copyright © 2014-2021 AdminLTE.io. All rights reserved. -
-
+ +
+
+ + + + + + + + + + +
+
+ + +