maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

added main-brand

Browse source
This commit is contained in:
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

70
index.html
View file

@ -33,18 +33,23 @@
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<nav class="main-sidebar shadow">
<div class="brand-container">
<a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<a class="sidebar-mini-icon" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
<div class="main-brand">
<a href="#" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
<span class="brand-text fw-light">AdminLTE 4</span>
</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>
<!-- Main Sidebar Container -->
<aside class="main-sidebar shadow">
<!-- Sidebar -->
<!-- Sidebar Menu -->
<nav class="sidebar">
<!-- Sidebar Menu -->
<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">
@ -102,23 +107,40 @@
</ul>
</nav>
<!-- /.sidebar -->
</nav>
</aside>
<!-- 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>
<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">
<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 -->
</div>
</div>
<!-- /.content-wrapper -->
<!-- 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: 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-padding: 1rem !default;

6
scss/_layout.scss
View file

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

3
scss/_mixins.scss
View file

@ -4,5 +4,6 @@
@import "mixins/animations";
@import "mixins/scrollbar";
@import "mixins/sidebar-theme";
@import "mixins/brand-variant";
@import "mixins/sidebar-variant";
@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;
}

72
scss/layout/_layout-fixed.scss
View file

@ -1,41 +1,51 @@
.layout-fixed:not(.sidebar-horizontal) {
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: 0;
}
@include media-breakpoint-up(md) {
.layout-fixed:not(.sidebar-horizontal) {
.main-brand {
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;
}
.main-sidebar {
bottom: 0;
float: none;
left: 0;
position: fixed;
top: auto;
}
&.sidebar-collapse {
.main-header,
.content-wrapper,
.main-footer {
margin-left: $sidebar-mini-width;
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;
}
}
}
&.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});
}
}
.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}));
// .layout-fixed.text-sm .wrapper .sidebar {
// // stylelint-disable-next-line
// 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;
}
}
}

40
scss/layout/_brand.scss → scss/layout/_main-brand.scss
View file

@ -2,8 +2,10 @@
// Core: Brand
//
.brand-container {
grid-area: brand;
@include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
.main-brand {
grid-area: main-brand;
display: grid;
grid-template-areas: "brand-link sidebar-mini-icon";
grid-auto-flow: column;
@ -12,6 +14,11 @@
padding: $brand-link-padding-y $sidebar-padding-x;
white-space: nowrap;
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 {
grid-area: brand-link;
@ -38,19 +45,42 @@
}
}
.brand-icons {
display: inline-flex;
> * {
color: $gray-400;
}
}
.sidebar-full-icon,
.header-full-icon {
display: none;
}
.sidebar-mini-icon {
grid-area: sidebar-mini-icon;
color: $gray-400;
}
}
.sidebar-collapse:not(.sidebar-hover) {
.brand-container {
.main-brand {
grid-template-areas: "sidebar-mini-icon brand-link";
justify-content: center;
min-width: $sidebar-mini-width;
max-width: $sidebar-mini-width;
.brand-link {
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;
width: inherit;
.text-sm &,
&.text-sm {
padding: $main-footer-padding-sm;
}
// .text-sm &,
// &.text-sm {
// padding: $main-footer-padding-sm;
// }
}
.layout-footer-fixed {

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

@ -3,7 +3,7 @@
//
// Default Sidebar Theme
@include sidebar-theme($sidebar-dark-bg, $sidebar-dark-color);
@include sidebar-variant($sidebar-dark-bg, $sidebar-dark-color);
.main-sidebar {
grid-area: main-sidebar;
@ -13,7 +13,11 @@
max-width: $sidebar-width;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
// .main-sidebar {
// display: block;
// position: fixed;
// }
// .main-sidebar {
// 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 {
margin-left: -250px;
.sidebar-close:not(.sidebar-horizontal) {
.main-sidebar {
margin-left: -#{$sidebar-width};
}
@include media-breakpoint-up(md) {
.main-brand {
margin-left: -#{$sidebar-width};
}
}
}
@include media-breakpoint-up(sm) {

99
scss/layout/_sidebar-horizontal.scss
View file

@ -1,62 +1,67 @@
.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;
}
@include media-breakpoint-up(md) {
.sidebar-horizontal {
.wrapper {
grid-template-areas:
"main-header"
"main-sidebar"
"content-wrapper"
"main-footer";
grid-template-columns: auto;
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 {
.main-sidebar {
display: grid;
list-style-type: none;
grid-auto-columns: 90px;
grid-auto-flow: column;
grid-gap: 5px;
height: $sidebar-horizontal-height;
min-width: $sidebar-horizontal-width;
max-width: $sidebar-horizontal-width;
justify-content: start;
z-index: $zindex-sidebar-horizontal;
}
.nav-header {
display: none;
}
.main-brand {
display: none;
}
.nav-item > .nav-link {
.sidebar {
// overflow: visible;
overflow-x: auto;
overflow-y: hidden;
// padding-top: .75rem;
.nav-sidebar {
display: grid;
grid-auto-flow: row;
justify-content: center;
list-style-type: none;
grid-auto-columns: 130px;
grid-auto-flow: column;
// grid-gap: 5px;
.nav-icon {
text-align: center;
padding-left: 0;
.nav-header {
display: none;
}
span {
padding-left: 0;
.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};
&.sidebar-close {
.main-sidebar {
margin-top: -#{$sidebar-horizontal-height};
}
}
}
}

6
scss/layout/_sidebar.scss
View file

@ -6,9 +6,5 @@
padding-right: $sidebar-padding-x;
padding-top: $sidebar-padding-y;
@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;
grid-gap: 0;
grid-template-areas:
"main-sidebar main-header"
"main-brand main-header"
"main-sidebar content-wrapper"
"main-sidebar main-footer";
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
//
@mixin sidebar-theme(
@mixin sidebar-variant(
$sidebar-bg,
$sidebar-color
) {
.wrapper {
background: $sidebar-bg;
}
// .wrapper {
// background: $sidebar-bg;
// }
.main-sidebar {
color: $sidebar-color;
@ -33,15 +33,15 @@
}
}
.sidebar-collapse:not(.layout-fixed) {
.sidebar {
.nav-sidebar .nav-item:hover {
.nav-link:not(.active) {
span {
background-color: $sidebar-bg;
}
}
}
}
}
// .sidebar-collapse:not(.layout-fixed) {
// .sidebar {
// .nav-sidebar .nav-item:hover {
// .nav-link:not(.active) {
// span {
// 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_CLOSE = 'sidebar-close'
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 Defaults = {
onLayouMobile: 768
}
class SidebarOverlay {
addSidebaBreakPoint(): void {
const bodyClass = document.body.classList
const widthOutput: number = window.innerWidth
if (widthOutput > 576) {
bodyClass.remove(CLASS_NAME_SIDEBAR_SM)
if (widthOutput > Defaults.onLayouMobile) {
bodyClass.remove(CLASS_NAME_LAYOUT_MOBILE)
} else {
bodyClass.add(CLASS_NAME_SIDEBAR_SM)
bodyClass.add(CLASS_NAME_LAYOUT_MOBILE)
}
}
removeOverlaySidebar(): void {
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_COLLAPSE)
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 {
const selSidebarSm = document.querySelector(SELECTOR_SIDEBAR_SM)
const selContentWrapper = selSidebarSm?.querySelector(SELECTOR_CONTENT_WRAPPER)
@ -57,6 +68,7 @@ domReady(() => {
data.addSidebaBreakPoint()
data.init()
data.closeSidebar()
window.addEventListener('resize', () => {
data.addSidebaBreakPoint()