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

main-header improved

pull/3729/head
Daniel 2021-05-21 04:34:22 +05:30
parent 0a2ac71002
commit a29afb44db
8 changed files with 115 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/demo.html
View File

@ -1,12 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
</body>
</html>

10
src/pages/forms/general.html
View File

@ -4,20 +4,20 @@
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../../",
"path": "../..",
"title": "AdminLTE 4 | General Form Elements"
})
</head>
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../../"
"path": "../.."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "forms",
"page": "general",
"path": "../../"
"path": "../.."
})
<!-- Main content -->
<div class="content-wrapper">
@ -73,13 +73,13 @@
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../../"
"path": "../.."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../../"
"path": "../.."
})
</body>
</html>

10
src/pages/widgets.html
View File

@ -4,7 +4,7 @@
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../",
"path": "..",
"title": "AdminLTE 4 | General Form Elements"
})
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@ -12,13 +12,13 @@
<body class="layout-fixed">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../"
"path": ".."
})
@@include('./dashboard/_sidenav.html', {
"mainPage": "pages",
"page": "widgets",
"path": "../"
"path": ".."
})
<!-- Main content -->
<div class="content-wrapper">
@ -407,13 +407,13 @@
<!-- /.content-wrapper -->
@@include('./dashboard/_footer.html', {
"path": "../"
"path": ".."
})
</div>
<!-- ./wrapper -->
@@include('./_scripts.html', {
"path": "../"
"path": ".."
})
</body>
</html>

6
src/partials/_head.html
View File

@ -4,9 +4,13 @@
<!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
<meta name="color-scheme" content="light dark">
<title>@@title</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
<link rel="stylesheet" href="@@path/css/adminlte.css">
<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">

75
src/partials/dashboard/_sidenav.html
View File

@ -24,25 +24,19 @@
<li class="nav-item">
<a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v1
</p>
<p>Dashboard v1</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v2
</p>
<p>Dashboard v2</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
Dashboard v3
</p>
<p>Dashboard v3</p>
</a>
</li>
</ul>
@ -68,16 +62,18 @@
<li class="nav-item">
<a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
<i class="nav-icon far fa-circle"></i>
<p>
General Elements
</p>
<p>General Elements</p>
</a>
</li>
</ul>
</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>
<p>Level 1</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
@ -87,6 +83,12 @@
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>Level 2</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
@ -99,9 +101,19 @@
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i>
<p>
Level 3
</p>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i>
<p>Level 3</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-dot-circle"></i>
<p>Level 3</p>
</a>
</li>
</ul>
@ -109,13 +121,36 @@
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle"></i>
<p>
Level 2
</p>
<p>Level 2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-circle"></i>
<p>Level 1</p>
</a>
</li>
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-danger"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-warning"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon far fa-circle text-info"></i>
<p>Informational</p>
</a>
</li>
</ul>
</nav>
</div>

43
src/partials/dashboard/_topbar.html
View File

@ -1,5 +1,5 @@
<!-- Navbar -->
<nav class="main-header navbar navbar-expand">
<nav class="main-header navbar navbar-expand navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
@ -11,16 +11,39 @@
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav mr-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge bg-danger navbar-badge">3</span>
</a>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge bg-warning navbar-badge">15</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>

10
src/scss/_main-header.scss
View File

@ -16,6 +16,16 @@
z-index: $zindex-main-header;
}
// Navbar badge
.navbar-badge {
font-size: .6rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
.layout-navbar-fixed {
.main-header {
// position: fixed;

4
src/scss/_variables.scss
View File

@ -419,7 +419,7 @@ $aspect-ratios: (
// scss-docs-start font-variables
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-sans-serif: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
@ -945,7 +945,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
$navbar-padding-y: $spacer / 2 !default;
$navbar-padding-x: null !default;
$navbar-nav-link-padding-x: .5rem !default;
$navbar-nav-link-padding-x: 1rem !default;
$navbar-brand-font-size: $font-size-lg !default;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link