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

added main-brand

pull/3698/head
Daniel 2021-05-13 06:47:47 +05:30
parent bfaffd9ea8
commit 500ccad137
19 changed files with 340 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

@ -33,18 +33,23 @@
</nav> </nav>
<!-- /.navbar --> <!-- /.navbar -->
<!-- Main Sidebar Container --> <div class="main-brand">
<nav class="main-sidebar shadow">
<div class="brand-container">
<a href="#" class="brand-link"> <a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
<span class="brand-text fw-light">AdminLTE 4</span> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </a>
<a class="sidebar-mini-icon" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a> <div class="brand-icons mx-2">
<a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
<a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
</div> </div>
</div>
<!-- Main Sidebar Container -->
<aside class="main-sidebar shadow">
<!-- Sidebar --> <!-- Sidebar -->
<!-- Sidebar Menu -->
<nav class="sidebar"> <nav class="sidebar">
<!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active"> <a href="#" class="nav-link active">
@ -102,10 +107,26 @@
</ul> </ul>
</nav> </nav>
<!-- /.sidebar --> <!-- /.sidebar -->
</nav> </aside>
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<div class="fs-3">Dashboard</div>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-end">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid"> <div class="container-fluid">
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-secondary">Secondary</button>
@ -118,7 +139,8 @@
<button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-link">Link</button>
<!-- /.row --> <!-- /.row -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</main> </div>
</div>
<!-- /.content-wrapper --> <!-- /.content-wrapper -->
<!-- Main Footer --> <!-- Main Footer -->

4
scss/_custom-variables.scss
View File

@ -86,6 +86,10 @@ $nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default; $main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default; $main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
// Content padding
$content-padding-y: 0 !default;
$content-padding-x: .5rem !default;
// MAIN FOOTER // MAIN FOOTER
// -------------------------------------------------------- // --------------------------------------------------------
$main-footer-padding: 1rem !default; $main-footer-padding: 1rem !default;

6
scss/_layout.scss
View File

@ -1,11 +1,15 @@
@import "layout/wrapper"; @import "layout/wrapper";
@import "layout/main-header"; @import "layout/main-header";
@import "layout/main-brand";
@import "layout/main-sidebar"; @import "layout/main-sidebar";
@import "layout/brand";
@import "layout/sidebar"; @import "layout/sidebar";
@import "layout/nav-sidebar";
@import "layout/sidebar-close"; @import "layout/sidebar-close";
@import "layout/sidebar-mini"; @import "layout/sidebar-mini";
@import "layout/sidebar-horizontal"; @import "layout/sidebar-horizontal";
@import "layout/content-wrapper"; @import "layout/content-wrapper";
@import "layout/content-header";
@import "layout/content";
@import "layout/main-footer"; @import "layout/main-footer";
@import "layout/layout-fixed"; @import "layout/layout-fixed";
@import "layout/layout-mobile";

3
scss/_mixins.scss
View File

@ -4,5 +4,6 @@
@import "mixins/animations"; @import "mixins/animations";
@import "mixins/scrollbar"; @import "mixins/scrollbar";
@import "mixins/sidebar-theme"; @import "mixins/brand-variant";
@import "mixins/sidebar-variant";
@import "mixins/miscellaneous"; @import "mixins/miscellaneous";

9
scss/layout/_content-header.scss Normal file
View File

@ -0,0 +1,9 @@
.content-header {
padding: 1rem $content-padding-x;
.breadcrumb {
margin-bottom: 0;
padding: 0;
line-height: 2.5rem;
}
}

3
scss/layout/_content.scss Normal file
View File

@ -0,0 +1,3 @@
.content {
padding: $content-padding-y $content-padding-x;
}

20
scss/layout/_layout-fixed.scss
View File

@ -1,5 +1,6 @@
@include media-breakpoint-up(md) {
.layout-fixed:not(.sidebar-horizontal) { .layout-fixed:not(.sidebar-horizontal) {
.main-sidebar { .main-brand {
bottom: 0; bottom: 0;
float: none; float: none;
left: 0; left: 0;
@ -7,6 +8,14 @@
top: 0; top: 0;
} }
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: auto;
}
.main-header, .main-header,
.content-wrapper, .content-wrapper,
.main-footer { .main-footer {
@ -33,9 +42,10 @@
.layout-fixed .wrapper .sidebar { .layout-fixed .wrapper .sidebar {
// stylelint-disable-next-line // stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-inner} + #{$main-header-bottom-border-width})); height: calc(100vh - #{$main-header-height-inner});
} }
.layout-fixed.text-sm .wrapper .sidebar { // .layout-fixed.text-sm .wrapper .sidebar {
// stylelint-disable-next-line // // stylelint-disable-next-line
height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width})); // height: calc(100vh - (#{$main-header-height-sm-inner} + #{$main-header-bottom-border-width}));
// }
} }

41
scss/layout/_layout-mobile.scss Normal file
View File

@ -0,0 +1,41 @@
@include media-breakpoint-down(md) {
.wrapper {
grid-template-areas:
"main-sidebar main-brand main-header"
"main-sidebar content-wrapper main-header"
"main-sidebar main-footer main-header";
grid-template-columns: auto auto auto;
.main-sidebar {
position: fixed;
top: 0;
bottom: 0;
margin-left: -#{$sidebar-width};
min-height: 100vh;
.sidebar {
overflow-x: hidden;
overflow-y: auto;
}
}
.main-header {
display: none;
}
.brand-link {
animation: none;
}
.sidebar-full-icon,
.header-full-icon {
display: block;
}
}
.sidebar-open {
.main-sidebar {
margin-left: 0;
}
}
}

42
scss/layout/_brand.scss → scss/layout/_main-brand.scss
View File

@ -2,8 +2,10 @@
// Core: Brand // Core: Brand
// //
.brand-container { @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
grid-area: brand;
.main-brand {
grid-area: main-brand;
display: grid; display: grid;
grid-template-areas: "brand-link sidebar-mini-icon"; grid-template-areas: "brand-link sidebar-mini-icon";
grid-auto-flow: column; grid-auto-flow: column;
@ -12,6 +14,11 @@
padding: $brand-link-padding-y $sidebar-padding-x; padding: $brand-link-padding-y $sidebar-padding-x;
white-space: nowrap; white-space: nowrap;
border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%); border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
min-width: $sidebar-width;
max-width: $sidebar-width;
height: min-content;
@include transition($sidebar-transition);
z-index: $zindex-sidebar;
.brand-link { .brand-link {
grid-area: brand-link; grid-area: brand-link;
@ -38,19 +45,42 @@
} }
} }
.sidebar-mini-icon { .brand-icons {
grid-area: sidebar-mini-icon; display: inline-flex;
> * {
color: $gray-400; color: $gray-400;
} }
} }
.sidebar-full-icon,
.header-full-icon {
display: none;
}
.sidebar-mini-icon {
grid-area: sidebar-mini-icon;
}
}
.sidebar-collapse:not(.sidebar-hover) { .sidebar-collapse:not(.sidebar-hover) {
.brand-container { .main-brand {
grid-template-areas: "sidebar-mini-icon brand-link"; grid-template-areas: "sidebar-mini-icon brand-link";
justify-content: center; justify-content: center;
min-width: $sidebar-mini-width;
max-width: $sidebar-mini-width;
.brand-link { .brand-link {
display: none; display: none;
} }
} }
} }
@include media-breakpoint-down(md) {
.main-brand {
min-width: unset;
max-width: unset;
.sidebar-mini-icon {
display: none;
}
}
}

8
scss/layout/_main-footer.scss
View File

@ -10,10 +10,10 @@
padding: $main-footer-padding; padding: $main-footer-padding;
width: inherit; width: inherit;
.text-sm &, // .text-sm &,
&.text-sm { // &.text-sm {
padding: $main-footer-padding-sm; // padding: $main-footer-padding-sm;
} // }
} }
.layout-footer-fixed { .layout-footer-fixed {

48
scss/layout/_main-sidebar.scss
View File

@ -3,7 +3,7 @@
// //
// Default Sidebar Theme // Default Sidebar Theme
@include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color); @include sidebar-variant($sidebar-dark-bg, $sidebar-dark-color);
.main-sidebar { .main-sidebar {
grid-area: main-sidebar; grid-area: main-sidebar;
@ -13,7 +13,11 @@
max-width: $sidebar-width; max-width: $sidebar-width;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
// .main-sidebar {
// display: block;
// position: fixed;
// }
// .main-sidebar { // .main-sidebar {
// margin-left: -#{$sidebar-width}; // margin-left: -#{$sidebar-width};
@ -33,43 +37,3 @@
// } // }
} }
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-link > .right,
.nav-link > span > .right {
position: absolute;
right: 1rem;
top: .7rem;
}
.nav-link {
position: relative;
span {
display: inline-block;
padding-left: .5rem;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
font-size: .9rem;
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
}
// Tree view menu
.nav-treeview {
display: none;
list-style: none;
padding: 0;
}
.menu-open > .nav-treeview {
display: block;
}
}

39
scss/layout/_nav-sidebar.scss Normal file
View File

@ -0,0 +1,39 @@
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-link > .right,
.nav-link > span > .right {
position: absolute;
right: 1rem;
top: .7rem;
}
.nav-link {
position: relative;
span {
display: inline-block;
padding-left: .5rem;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
font-size: .9rem;
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
}
// Tree view menu
.nav-treeview {
display: none;
list-style: none;
padding: 0;
}
.menu-open > .nav-treeview {
display: block;
}
}

11
scss/layout/_sidebar-close.scss
View File

@ -1,5 +1,12 @@
.sidebar-close:not(.sidebar-horizontal) .main-sidebar { .sidebar-close:not(.sidebar-horizontal) {
margin-left: -250px; .main-sidebar {
margin-left: -#{$sidebar-width};
}
@include media-breakpoint-up(md) {
.main-brand {
margin-left: -#{$sidebar-width};
}
}
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {

17
scss/layout/_sidebar-horizontal.scss
View File

@ -1,3 +1,4 @@
@include media-breakpoint-up(md) {
.sidebar-horizontal { .sidebar-horizontal {
.wrapper { .wrapper {
grid-template-areas: grid-template-areas:
@ -5,7 +6,7 @@
"main-sidebar" "main-sidebar"
"content-wrapper" "content-wrapper"
"main-footer"; "main-footer";
grid-template-columns: 1fr; grid-template-columns: auto;
grid-template-rows: max-content max-content auto max-content; grid-template-rows: max-content max-content auto max-content;
} }
@ -18,20 +19,23 @@
z-index: $zindex-sidebar-horizontal; z-index: $zindex-sidebar-horizontal;
} }
.brand-container { .main-brand {
display: none; display: none;
} }
.sidebar { .sidebar {
overflow: visible; // overflow: visible;
padding-top: .75rem; overflow-x: auto;
overflow-y: hidden;
// padding-top: .75rem;
.nav-sidebar { .nav-sidebar {
display: grid; display: grid;
list-style-type: none; list-style-type: none;
grid-auto-columns: 90px; grid-auto-columns: 130px;
grid-auto-flow: column; grid-auto-flow: column;
grid-gap: 5px; // grid-gap: 5px;
.nav-header { .nav-header {
display: none; display: none;
@ -60,3 +64,4 @@
} }
} }
} }
}

4
scss/layout/_sidebar.scss
View File

@ -6,9 +6,5 @@
padding-right: $sidebar-padding-x; padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y; padding-top: $sidebar-padding-y;
@include scrollbar-color-gray(); @include scrollbar-color-gray();
@include scrollbar-width-none();
&:hover {
@include scrollbar-width-thin(); @include scrollbar-width-thin();
} }
}

2
scss/layout/_wrapper.scss
View File

@ -8,7 +8,7 @@
display: grid; display: grid;
grid-gap: 0; grid-gap: 0;
grid-template-areas: grid-template-areas:
"main-sidebar main-header" "main-brand main-header"
"main-sidebar content-wrapper" "main-sidebar content-wrapper"
"main-sidebar main-footer"; "main-sidebar main-footer";
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;

9
scss/mixins/_brand-variant.scss Normal file
View File

@ -0,0 +1,9 @@
@mixin brand-variant(
$brand-bg,
$brand-color
) {
.main-brand {
background-color: $brand-bg;
color: $brand-color;
}
}

30
scss/mixins/_sidebar-theme.scss → scss/mixins/_sidebar-variant.scss
View File

@ -2,14 +2,14 @@
// Mixins: Sidebar Theme // Mixins: Sidebar Theme
// //
@mixin sidebar-theme( @mixin sidebar-variant(
$sidebar-bg, $sidebar-bg,
$sidebar-color $sidebar-color
) { ) {
.wrapper { // .wrapper {
background: $sidebar-bg; // background: $sidebar-bg;
} // }
.main-sidebar { .main-sidebar {
color: $sidebar-color; color: $sidebar-color;
@ -33,15 +33,15 @@
} }
} }
.sidebar-collapse:not(.layout-fixed) { // .sidebar-collapse:not(.layout-fixed) {
.sidebar { // .sidebar {
.nav-sidebar .nav-item:hover { // .nav-sidebar .nav-item:hover {
.nav-link:not(.active) { // .nav-link:not(.active) {
span { // span {
background-color: $sidebar-bg; // background-color: $sidebar-bg;
} // }
} // }
} // }
} // }
} // }
} }

24
ts/sidebar-overlay.ts
View File

@ -18,31 +18,42 @@ import {
const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse' const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close' const CLASS_NAME_SIDEBAR_CLOSE = 'sidebar-close'
const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open' const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
const CLASS_NAME_SIDEBAR_SM = 'sidebar-sm' const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_SIDEBAR_SM}` const SELECTOR_SIDEBAR_SM = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper' const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
const Defaults = {
onLayouMobile: 768
}
class SidebarOverlay { class SidebarOverlay {
addSidebaBreakPoint(): void { addSidebaBreakPoint(): void {
const bodyClass = document.body.classList const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth const widthOutput: number = window.innerWidth
if (widthOutput > 576) { if (widthOutput > Defaults.onLayouMobile) {
bodyClass.remove(CLASS_NAME_SIDEBAR_SM) bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
} else { } else {
bodyClass.add(CLASS_NAME_SIDEBAR_SM) bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
} }
} }
removeOverlaySidebar(): void { removeOverlaySidebar(): void {
const bodyClass = document.body.classList const bodyClass = document.body.classList
if (bodyClass.contains(CLASS_NAME_SIDEBAR_SM)) { if (bodyClass.contains(CLASS_NAME_LAYOUT_MOBILE)) {
bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN) bodyClass.remove(CLASS_NAME_SIDEBAR_OPEN)
bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE) bodyClass.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE) bodyClass.add(CLASS_NAME_SIDEBAR_CLOSE)
} }
} }
closeSidebar(): void {
const widthOutput: number = window.innerWidth
if (widthOutput < Defaults.onLayouMobile) {
document.body.classList.add(CLASS_NAME_SIDEBAR_CLOSE)
}
}
init(): void { init(): void {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM) const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER) const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
@ -57,6 +68,7 @@ domReady(() => {
data.addSidebaBreakPoint() data.addSidebaBreakPoint()
data.init() data.init()
data.closeSidebar()
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
data.addSidebaBreakPoint() data.addSidebaBreakPoint()