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

layout rework

pull/4926/head
Daniel 2023-02-16 21:45:54 +05:30
parent 9a0d675a6d
commit 034bda7138
40 changed files with 478 additions and 665 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "." "path": "."
}) })
@ -19,8 +19,8 @@
"path": "." "path": "."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<!-- Small boxes (Stat box) --> <!-- Small boxes (Stat box) -->
<div class="row"> <div class="row">
@ -346,13 +346,13 @@
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</div> </div>
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "." "path": "."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "." "path": "."

12
src/index2.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="bg-body-tertiary"> <body class="bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "." "path": "."
}) })
@ -18,8 +18,8 @@
"path": "." "path": "."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -34,7 +34,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<!-- Info boxes --> <!-- Info boxes -->
<div class="row"> <div class="row">
@ -821,13 +821,13 @@
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</div> </div>
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "." "path": "."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "." "path": "."

12
src/index3.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "." "path": "."
}) })
@ -19,8 +19,8 @@
"path": "." "path": "."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
@ -283,13 +283,13 @@
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</div> </div>
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "." "path": "."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "." "path": "."

12
src/pages/UI/timeline.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<!-- Timelime example --> <!-- Timelime example -->
<div class="row"> <div class="row">
@ -145,13 +145,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

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

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row g-4"> <div class="row g-4">
<!-- Start column --> <!-- Start column -->
@ -80,13 +80,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/layout/fixed-sidebar.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -70,13 +70,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/layout/layout-rtl.html
View File

@ -8,7 +8,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -19,8 +19,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -71,13 +71,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/layout/sidebar-mini.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse"> <body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -70,13 +70,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/layout/unfixed-sidebar.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="bg-body-tertiary"> <body class="bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
@ -70,13 +70,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/tables/simple.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -319,13 +319,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/widgets/cards.html
View File

@ -7,7 +7,7 @@
}) })
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -18,8 +18,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<h4 class="mb-2">Cards</h4> <h4 class="mb-2">Cards</h4>
@ -295,13 +295,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/widgets/info-box.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -19,8 +19,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<h5 class="mb-2">Info Box</h5> <h5 class="mb-2">Info Box</h5>
<div class="row"> <div class="row">
@ -346,13 +346,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

12
src/pages/widgets/small-box.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed bg-body-tertiary"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="app-wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
}) })
@ -19,8 +19,8 @@
"path": "../.." "path": "../.."
}) })
<!-- Main content --> <!-- Main content -->
<main class="content-wrapper"> <main class="app-main">
<div class="content-header"> <div class="app-content-header">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="app-content">
<div class="container-fluid"> <div class="container-fluid">
<!-- Small Box (Stat card) --> <!-- Small Box (Stat card) -->
<h5 class="mb-2">Small Box</h5> <h5 class="mb-2">Small Box</h5>
@ -107,13 +107,13 @@
</div> </div>
<!-- /.content --> <!-- /.content -->
</main> </main>
<!-- /.content-wrapper --> <!-- /.app-content -->
@@include('./dashboard/_footer.html', { @@include('./dashboard/_footer.html', {
"path": "../.." "path": "../.."
}) })
</div> </div>
<!-- ./wrapper --> <!-- ./app-wrapper -->
@@include('./_scripts.html', { @@include('./_scripts.html', {
"path": "../.." "path": "../.."

4
src/partials/_scripts.html
View File

@ -14,7 +14,7 @@
<!-- OPTIONAL SCRIPTS --> <!-- OPTIONAL SCRIPTS -->
<script> <script>
const SELECTOR_SIDEBAR = '.sidebar' const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const Default = { const Default = {
scrollbarTheme: 'os-theme-light', scrollbarTheme: 'os-theme-light',
scrollbarAutoHide: 'leave' scrollbarAutoHide: 'leave'
@ -22,7 +22,7 @@
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') { if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), { OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
scrollbars: { scrollbars: {
theme: Default.scrollbarTheme, theme: Default.scrollbarTheme,
autoHide: Default.scrollbarAutoHide, autoHide: Default.scrollbarAutoHide,

2
src/partials/dashboard/_footer.html
View File

@ -1,5 +1,5 @@
<!-- Main Footer --> <!-- Main Footer -->
<footer class="main-footer"> <footer class="app-footer">
<!-- To the end --> <!-- To the end -->
<div class="float-end d-none d-sm-inline"> <div class="float-end d-none d-sm-inline">
Anything you want Anything you want

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

@ -1,17 +1,17 @@
<!-- Main Sidebar Container --> <!-- Sidebar Container -->
<aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow"> <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
<div class="brand-container"> <div class="sidebar-brand">
<a href="javascript:;" class="brand-link"> <a href="@@path/index.html" class="brand-link">
<img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow"> <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span> <span class="brand-text fw-light">AdminLTE 4</span>
</a> </a>
<a class="pushmenu mx-1 d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a> <a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<div class="sidebar"> <div class="sidebar-wrapper">
<nav class="mt-2"> <nav class="mt-2">
<!-- Sidebar Menu --> <!-- Sidebar Menu -->
<ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false"> <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
<li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}"> <li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
<a href="javascript:;" class="nav-link @@if (context.mainPage === 'dashboard') {active}"> <a href="javascript:;" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
<i class="nav-icon fa-solid fa-gauge-high"></i> <i class="nav-icon fa-solid fa-gauge-high"></i>

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

@ -1,5 +1,5 @@
<!-- Navbar --> <!-- Navbar -->
<nav class="main-header navbar navbar-expand bg-body"> <nav class="app-header navbar navbar-expand bg-body">
<div class="container-fluid"> <div class="container-fluid">
<!-- Start navbar links --> <!-- Start navbar links -->
<ul class="navbar-nav"> <ul class="navbar-nav">

14
src/scss/_app-footer.scss Normal file
View File

@ -0,0 +1,14 @@
//
// Core: Main Footer
//
.app-footer {
grid-area: #{$lte-prefix}app-footer;
width: inherit;
max-width: 100vw;
padding: $lte-app-footer-padding;
color: $lte-app-footer-color;
background-color: $lte-app-footer-bg;
border-top: $lte-app-footer-border-top;
}

8
src/scss/_main-header.scss → src/scss/_app-header.scss
View File

@ -2,11 +2,11 @@
// Core: Main Header // Core: Main Header
// //
.main-header { .app-header {
z-index: $lte-zindex-main-header; z-index: $lte-zindex-app-header;
grid-area: #{$lte-prefix}main-header; grid-area: #{$lte-prefix}app-header;
max-width: 100vw; max-width: 100vw;
border-bottom: $lte-main-header-bottom-border; border-bottom: $lte-app-header-bottom-border;
.nav-link { .nav-link {
position: relative; position: relative;

19
src/scss/_app-main.scss Normal file
View File

@ -0,0 +1,19 @@
.app-main {
grid-area: #{$lte-prefix}app-main;
max-width: 100vw;
padding-bottom: 1rem;
.app-content-header {
padding: 1rem $lte-content-padding-x;
.breadcrumb {
padding: 0;
margin-bottom: 0;
line-height: 2.5rem;
}
}
.app-content {
padding: $lte-content-padding-y $lte-content-padding-x;
}
}

198
src/scss/_app-sidebar.scss Normal file
View File

@ -0,0 +1,198 @@
.app-sidebar {
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg};
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color};
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg};
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
z-index: $lte-zindex-sidebar;
grid-area: #{$lte-prefix}app-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
@include transition($lte-sidebar-transition);
}
.sidebar-wrapper {
padding-top: $lte-sidebar-padding-y;
padding-right: $lte-sidebar-padding-x;
padding-bottom: $lte-sidebar-padding-y;
padding-left: $lte-sidebar-padding-x;
overflow-x: hidden;
overflow-y: auto;
@include scrollbar-color-gray();
@include scrollbar-width-thin();
// Sidebar Menu. First level links
.sidebar-menu > .nav-item {
// links
> .nav-link {
&:active,
&:focus {
color: var(--#{$lte-prefix}sidebar-color);
}
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
// background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-hover-color);
// background-color: var(--#{$lte-prefix}sidebar-hover-bg);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-header-color);
background-color: inherit;
}
// All links within the sidebar menu
a {
color: var(--#{$lte-prefix}sidebar-color);
&:hover,
&:focus {
text-decoration: none;
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
// background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
}
}
> .nav-link:hover {
background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
}
}
}
}
// Sidebar navigation menu
.sidebar-menu {
// All levels
.nav-item {
> .nav-link {
margin-bottom: .2rem;
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: none #{"/*rtl:rotate(180deg)*/"};
}
}
}
// All levels
.nav-link > .nav-arrow,
.nav-link > p > .nav-arrow {
position: absolute;
top: .7rem;
right: 1rem;
}
.nav-link {
position: relative;
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
@include transition(width $lte-transition-fn $lte-transition-speed);
@include border-radius($border-radius);
p {
display: inline;
padding-left: .5rem;
margin: 0;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
font-size: .9rem;
}
// Tree view menu
.nav-treeview {
display: none;
padding: 0;
list-style: none;
}
.menu-open {
> .nav-treeview {
display: block;
}
> .nav-link {
.nav-arrow {
transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
}
}
}
}
.hold-transition {
.app-sidebar {
@include transition(none !important);
animation: none !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
&.app-sidebar,
.app-sidebar {
--#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg-dark};
--#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
--#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
--#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
--#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
--#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
--#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
--#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};
--#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg-dark};
--#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color-dark};
--#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg-dark};
--#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color-dark};
}
}
}

10
src/scss/_wrapper.scss → src/scss/_app-wrapper.scss
View File

@ -2,13 +2,13 @@
// Core: Layout // Core: Layout
// //
.wrapper { .app-wrapper {
position: relative; position: relative;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"#{$lte-prefix}main-sidebar #{$lte-prefix}main-header" "#{$lte-prefix}app-sidebar #{$lte-prefix}app-header"
"#{$lte-prefix}main-sidebar #{$lte-prefix}content-wrapper" "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
"#{$lte-prefix}main-sidebar #{$lte-prefix}main-footer"; "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
grid-template-rows: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content;
grid-gap: 0; grid-gap: 0;
align-content: stretch; align-content: stretch;
@ -17,6 +17,6 @@
min-height: 100vh; min-height: 100vh;
} }
:not(.layout-mobile) .wrapper { :not(.layout-mobile) .app-wrapper {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
} }

72
src/scss/_brand-container.scss
View File

@ -1,72 +0,0 @@
//
// Core: Brand
//
.brand-container {
display: grid;
grid-template-areas: "#{$lte-prefix}brand-link #{$lte-prefix}pushmenu";
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
grid-area: #{$lte-prefix}brand-link;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.pushmenu {
grid-area: #{$lte-prefix}pushmenu;
}
.sidebar-bg-dark & {
border-bottom: $lte-brand-link-border-buttom solid $gray-700;
.brand-link,
.pushmenu {
color: rgba($white, .8);
&:hover {
color: $white;
}
}
}
.sidebar-bg-light & {
border-bottom: $lte-brand-link-border-buttom solid $gray-300;
.brand-link,
.pushmenu {
color: rgba($black, .8);
&:hover {
color: $black;
}
}
}
}
.sidebar-collapse:not(.sidebar-is-hover) {
.brand-container {
justify-content: center;
.brand-link {
width: 0;
}
}
}

9
src/scss/_content-header.scss
View File

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

5
src/scss/_content-wrapper.scss
View File

@ -1,5 +0,0 @@
.content-wrapper {
grid-area: #{$lte-prefix}content-wrapper;
max-width: 100vw;
padding-bottom: 1rem;
}

3
src/scss/_content.scss
View File

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

24
src/scss/_layout-fixed.scss
View File

@ -1,6 +1,6 @@
@include media-breakpoint-up($lte-sidebar-breakpoint) { @include media-breakpoint-up($lte-sidebar-breakpoint) {
.layout-fixed { .layout-fixed {
.main-sidebar { .app-sidebar {
position: fixed; position: fixed;
top: auto; top: auto;
bottom: 0; bottom: 0;
@ -8,30 +8,30 @@
float: none; float: none;
max-height: 100vh; max-height: 100vh;
.sidebar { .sidebar-wrapper {
height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width)); height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
} }
} }
.main-header, .app-header,
.content-wrapper, .app-main,
.main-footer { .app-footer {
margin-left: var(--#{$lte-prefix}sidebar-width); margin-left: var(--#{$lte-prefix}sidebar-width);
@include transition($lte-transition-speed $lte-transition-fn); @include transition($lte-transition-speed $lte-transition-fn);
} }
&.sidebar-collapse { &.sidebar-collapse {
.main-header, .app-header,
.content-wrapper, .app-main,
.main-footer { .app-footer {
margin-left: $lte-sidebar-mini-width; margin-left: $lte-sidebar-mini-width;
} }
} }
&.sidebar-close { &.sidebar-close {
.main-header, .app-header,
.content-wrapper, .app-main,
.main-footer { .app-footer {
margin-left: 0; margin-left: 0;
} }
} }

10
src/scss/_layout-mobile.scss
View File

@ -1,14 +1,14 @@
@include media-breakpoint-down($lte-sidebar-breakpoint) { @include media-breakpoint-down($lte-sidebar-breakpoint) {
.wrapper { .app-wrapper {
.main-sidebar { .app-sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
max-height: 100vh; max-height: 100vh;
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
.sidebar { .sidebar-wrapper {
height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width)); height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@ -16,7 +16,7 @@
} }
.sidebar-open { .sidebar-open {
.main-sidebar { .app-sidebar {
margin-left: 0; margin-left: 0;
} }
} }

14
src/scss/_main-footer.scss
View File

@ -1,14 +0,0 @@
//
// Core: Main Footer
//
.main-footer {
grid-area: #{$lte-prefix}main-footer;
width: inherit;
max-width: 100vw;
padding: $lte-main-footer-padding;
color: $lte-main-footer-color;
background-color: $lte-main-footer-bg;
border-top: $lte-main-footer-border-top;
}

220
src/scss/_main-sidebar.scss
View File

@ -1,220 +0,0 @@
//
// Core: Main Sidebar
//
.main-sidebar {
@include transition($lte-sidebar-transition);
z-index: $lte-zindex-sidebar;
grid-area: #{$lte-prefix}main-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
.nav-sidebar > .nav-item {
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
}
}
@each $color, $value in $theme-colors {
.sidebar-color-#{$color} {
--#{$lte-prefix}sidebar-menu-active-bg: #{$value};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($value)};
}
}
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
--#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
--#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
--#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
--#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
--#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
--#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
--#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
--#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
--#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-dark-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active {
color: var(--#{$lte-prefix}sidebar-dark-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-dark-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-dark-color);
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-dark-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg);
}
}
}
}
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
--#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
--#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
--#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
--#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
--#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
--#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
--#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
--#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
--#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
--#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-light-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
color: var(--#{$lte-prefix}sidebar-light-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-light-active-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-light-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-light-color);
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-light-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover {
color: var(--#{$lte-prefix}sidebar-light-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-active-bg);
}
}
> .nav-link:hover {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
}
}
.hold-transition {
.main-sidebar {
@include transition(none !important);
animation: none !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
}
}
}

65
src/scss/_nav-sidebar.scss
View File

@ -1,65 +0,0 @@
// Sidebar navigation menu
.nav-sidebar {
// All levels
.nav-item {
> .nav-link {
margin-bottom: .2rem;
.nav-arrow {
@include transition(transform $lte-transition-fn $lte-transition-speed);
transform: none #{"/*rtl:rotate(180deg)*/"};
}
}
}
// All levels
.nav-link > .nav-arrow,
.nav-link > p > .nav-arrow {
position: absolute;
top: .7rem;
right: 1rem;
}
.nav-link {
position: relative;
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
@include transition(width $lte-transition-fn $lte-transition-speed);
p {
display: inline;
padding-left: .5rem;
margin: 0;
}
.nav-icon {
padding-left: .3rem;
}
}
.nav-header {
padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
font-size: .9rem;
}
// Tree view menu
.nav-treeview {
display: none;
padding: 0;
list-style: none;
}
.menu-open {
> .nav-treeview {
display: block;
}
}
.menu-open,
.menu-is-opening {
> .nav-link {
.nav-arrow {
transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
}
}
}
}

56
src/scss/_sidebar-brand.scss Normal file
View File

@ -0,0 +1,56 @@
//
// Core: Brand
//
.sidebar-brand {
display: flex;
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
overflow: hidden;
font-size: $navbar-brand-font-size;
white-space: nowrap;
border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
flex: 1;
&:hover {
text-decoration: none;
}
.brand-image {
float: left;
width: auto;
max-height: 33px;
margin-top: -3px;
margin-right: .5rem;
margin-left: .8rem;
line-height: .8;
}
}
.pushmenu {
flex: 0;
margin-left: auto;
}
.brand-link,
.pushmenu {
color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
@include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
&:hover {
color: var(--#{$prefix}emphasis-color);
}
}
}
.sidebar-collapse:not(.sidebar-is-hover) {
.sidebar-brand {
.brand-link {
width: 0;
}
.pushmenu {
flex: auto;
}
}
}

2
src/scss/_sidebar-close.scss
View File

@ -1,5 +1,5 @@
.sidebar-close { .sidebar-close {
.main-sidebar { .app-sidebar {
// stylelint-disable-next-line // stylelint-disable-next-line
margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
} }

35
src/scss/_sidebar-collapse.scss
View File

@ -3,58 +3,56 @@
// //
// A fix for text overflow while transitioning from sidebar mini to full sidebar // A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar, .sidebar-menu,
.nav-sidebar > .nav-header, .sidebar-menu > .nav-header,
.nav-sidebar .nav-link { .sidebar-menu .nav-link {
white-space: nowrap; white-space: nowrap;
} }
.sidebar-collapse { .sidebar-collapse {
.main-sidebar { .app-sidebar {
min-width: $lte-sidebar-mini-width; min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width; max-width: $lte-sidebar-mini-width;
} }
// Make the sidebar headers // Make the sidebar headers
.nav-sidebar .nav-header { .sidebar-menu .nav-header {
display: none; display: none;
} }
.nav-sidebar { .sidebar-menu {
.nav-link { .nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2; width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
} }
} }
.nav-sidebar .nav-link p { .sidebar-menu .nav-link p {
width: 0; width: 0;
white-space: nowrap; white-space: nowrap;
} }
.nav-sidebar .nav-link p, .sidebar-menu .nav-link p,
.brand-link { .brand-link {
margin-left: -10px;
visibility: hidden;
animation-name: fadeOut; animation-name: fadeOut;
animation-duration: $lte-transition-speed; animation-duration: $lte-transition-speed;
animation-fill-mode: both; animation-fill-mode: both;
} }
&.sidebar-is-hover { &.sidebar-is-hover {
.main-sidebar { .app-sidebar {
min-width: var(--#{$lte-prefix}sidebar-width); min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width); max-width: var(--#{$lte-prefix}sidebar-width);
} }
.nav-sidebar .nav-header { .sidebar-menu .nav-header {
display: inline-block; display: inline-block;
} }
.nav-sidebar .nav-link { .sidebar-menu .nav-link {
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2); width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
} }
.nav-sidebar .nav-link p, .sidebar-menu .nav-link p,
.brand-link { .brand-link {
margin-left: 0; margin-left: 0;
visibility: visible; visibility: visible;
@ -63,4 +61,13 @@
animation-fill-mode: both; animation-fill-mode: both;
} }
} }
&:not(.sidebar-is-hover) {
.sidebar-menu .nav-link p {
.float-end {
// clear: both;
float: none !important;
}
}
}
} }

11
src/scss/_sidebar.scss
View File

@ -1,11 +0,0 @@
.sidebar {
// min-height: 100%;
padding-top: $lte-sidebar-padding-y;
padding-right: $lte-sidebar-padding-x;
padding-bottom: $lte-sidebar-padding-y;
padding-left: $lte-sidebar-padding-x;
overflow-x: hidden;
overflow-y: auto;
@include scrollbar-color-gray();
@include scrollbar-width-thin();
}

21
src/scss/_variables-dark.scss
View File

@ -1,9 +1,14 @@
// Body background (Affects main content background only) // SIDEBAR SKINS
$lte-main-bg-dark: $body-tertiary-bg-dark !default; // --------------------------------------------------------
$lte-main-color-dark: $body-color-dark !default;
// Dark sidebar $lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-bg-dark: $dark !default; $lte-sidebar-color-dark: #c2c7d0 !default;
$lte-sidebar-hover-color-dark: $white !default;
// Light sidebar $lte-sidebar-active-color-dark: $white !default;
$lte-sidebar-light-bg-dark: $light !default; $lte-sidebar-submenu-bg-dark: transparent !default;
$lte-sidebar-submenu-color-dark: $lte-sidebar-color-dark !default;
$lte-sidebar-submenu-hover-color-dark: $white !default;
$lte-sidebar-submenu-hover-bg-dark: $lte-sidebar-hover-bg-dark !default;
$lte-sidebar-submenu-active-color-dark: $white !default;
$lte-sidebar-submenu-active-bg-dark: rgba(255, 255, 255, .1) !default;
$lte-sidebar-header-color-dark: tint-color(#c2c7d0, 5%) !default;

137
src/scss/_variables.scss
View File

@ -1,13 +1,8 @@
// Custom AdminLTE Variables // Custom AdminLTE Variables
// Prefix for :root CSS variables // Prefix for :root CSS variables and others.
$lte-prefix: lte- !default; $lte-prefix: lte- !default;
// LAYOUT
// --------------------------------------------------------
$lte-font-size-root: 1rem !default;
// TRANSITIONS SETTINGS // TRANSITIONS SETTINGS
// -------------------------------------------------------- // --------------------------------------------------------
@ -21,11 +16,6 @@ $lte-sidebar-width: 250px !default;
$lte-sidebar-breakpoint: lg !default; $lte-sidebar-breakpoint: lg !default;
$lte-sidebar-padding-x: .5rem !default; $lte-sidebar-padding-x: .5rem !default;
$lte-sidebar-padding-y: .5rem !default; $lte-sidebar-padding-y: .5rem !default;
$lte-sidebar-custom-height: 4rem !default;
$lte-sidebar-custom-height-lg: 6rem !default;
$lte-sidebar-custom-height-xl: 8rem !default;
$lte-sidebar-custom-padding-x: .85rem !default;
$lte-sidebar-custom-padding-y: .5rem !default;
$lte-sidebar-transition: min-width $lte-transition-speed $lte-transition-fn, $lte-sidebar-transition: min-width $lte-transition-speed $lte-transition-fn,
max-width $lte-transition-speed $lte-transition-fn, max-width $lte-transition-speed $lte-transition-fn,
margin-left $lte-transition-speed $lte-transition-fn, margin-left $lte-transition-speed $lte-transition-fn,
@ -34,33 +24,17 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
// SIDEBAR SKINS // SIDEBAR SKINS
// -------------------------------------------------------- // --------------------------------------------------------
// Dark sidebar $lte-sidebar-hover-bg: rgba($black, .1) !default;
$lte-sidebar-dark-bg: $gray-800 !default; $lte-sidebar-color: $gray-800 !default;
$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default; $lte-sidebar-hover-color: $gray-900 !default;
$lte-sidebar-dark-color: #c2c7d0 !default; $lte-sidebar-active-color: $black !default;
$lte-sidebar-dark-hover-color: $white !default; $lte-sidebar-submenu-bg: transparent !default;
$lte-sidebar-dark-active-color: $white !default; $lte-sidebar-submenu-color: #777 !default;
$lte-sidebar-dark-submenu-bg: transparent !default; $lte-sidebar-submenu-hover-color: $black !default;
$lte-sidebar-dark-submenu-color: $lte-sidebar-dark-color !default; $lte-sidebar-submenu-hover-bg: $lte-sidebar-hover-bg !default;
$lte-sidebar-dark-submenu-hover-color: $white !default; $lte-sidebar-submenu-active-color: $lte-sidebar-hover-color !default;
$lte-sidebar-dark-submenu-hover-bg: $lte-sidebar-dark-hover-bg !default; $lte-sidebar-submenu-active-bg: $lte-sidebar-submenu-hover-bg !default;
$lte-sidebar-dark-submenu-active-color: $lte-sidebar-dark-bg !default; $lte-sidebar-header-color: shade-color($gray-800, 5%) !default;
$lte-sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
$lte-sidebar-dark-header-color: tint-color(#c2c7d0, 5%) !default;
// Light sidebar
$lte-sidebar-light-bg: $white !default;
$lte-sidebar-light-hover-bg: rgba($black, .1) !default;
$lte-sidebar-light-color: $gray-800 !default;
$lte-sidebar-light-hover-color: $gray-900 !default;
$lte-sidebar-light-active-color: $black !default;
$lte-sidebar-light-submenu-bg: transparent !default;
$lte-sidebar-light-submenu-color: #777 !default;
$lte-sidebar-light-submenu-hover-color: $black !default;
$lte-sidebar-light-submenu-hover-bg: $lte-sidebar-light-hover-bg !default;
$lte-sidebar-light-submenu-active-color: $lte-sidebar-light-hover-color !default;
$lte-sidebar-light-submenu-active-bg: $lte-sidebar-light-submenu-hover-bg !default;
$lte-sidebar-light-header-color: shade-color($gray-800, 5%) !default;
// SIDEBAR MINI // SIDEBAR MINI
// -------------------------------------------------------- // --------------------------------------------------------
@ -68,64 +42,39 @@ $lte-sidebar-mini-width: ($nav-link-padding-x + $lte-sidebar-padding-x
$lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default; $lte-sidebar-nav-icon-width: $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
$lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default; $lte-sidebar-user-image-width: $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
// CONTROL SIDEBAR
// --------------------------------------------------------
$lte-control-sidebar-width: $lte-sidebar-width !default;
// MAIN HEADER // MAIN HEADER
// -------------------------------------------------------- // --------------------------------------------------------
$lte-main-header-bottom-border-width: $border-width !default; $lte-app-header-bottom-border-width: $border-width !default;
$lte-main-header-bottom-border-color: var(--#{$prefix}border-color) !default; $lte-app-header-bottom-border-color: var(--#{$prefix}border-color) !default;
$lte-main-header-bottom-border: $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default; $lte-app-header-bottom-border: $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
$lte-main-header-link-padding-y: $navbar-padding-y !default; $lte-app-header-link-padding-y: $navbar-padding-y !default;
$lte-main-header-height-inner: ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default; $lte-app-header-height-inner: ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
$lte-main-header-height: add($lte-main-header-height-inner, $lte-main-header-bottom-border-width) !default;
$lte-nav-link-sm-padding-y: .35rem !default;
$lte-nav-link-sm-height: ($font-size-sm * $line-height-sm + $lte-nav-link-sm-padding-y * 1.785) !default;
$lte-main-header-height-sm-inner: ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
$lte-main-header-height-sm: add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
// Content padding // Content padding
$lte-content-padding-y: 0 !default; $lte-content-padding-y: 0 !default;
$lte-content-padding-x: .5rem !default; $lte-content-padding-x: .5rem !default;
// IMAGE SIZES
// --------------------------------------------------------
$lte-img-size-sm: 1.875rem !default;
$lte-img-size-md: 3.75rem !default;
$lte-img-size-lg: 6.25rem !default;
$lte-img-size-push: .625rem !default;
// MAIN FOOTER // MAIN FOOTER
// -------------------------------------------------------- // --------------------------------------------------------
$lte-main-footer-padding: 1rem !default; $lte-app-footer-padding: 1rem !default;
$lte-main-footer-padding-sm: $lte-main-footer-padding * .812 !default; $lte-app-footer-border-top-width: 1px !default;
$lte-main-footer-border-top-width: 1px !default; $lte-app-footer-border-top-color: var(--#{$prefix}border-color) !default;
$lte-main-footer-border-top-color: var(--#{$prefix}border-color) !default; $lte-app-footer-border-top: $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
$lte-main-footer-border-top: $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default; $lte-app-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-main-footer-height-inner: (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default; $lte-app-footer-color: var(--#{$prefix}secondary-color) !default;
$lte-main-footer-height: add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
$lte-main-footer-height-sm: add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
$lte-main-footer-bg: var(--#{$prefix}body-bg) !default;
$lte-main-footer-color: var(--#{$prefix}secondary-color) !default;
// BRAND LINK // BRAND LINK
// -------------------------------------------------------- // --------------------------------------------------------
$lte-brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y !default; $lte-brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y !default;
$lte-brand-link-padding-x: $lte-sidebar-padding-x !default;
$lte-brand-link-border-buttom: 1px !default; $lte-brand-link-border-buttom: 1px !default;
// Cards // Cards
// -------------------------------------------------------- // --------------------------------------------------------
$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
$lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default; $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
$lte-card-title-font-size: 1.1rem !default; $lte-card-title-font-size: 1.1rem !default;
$lte-card-title-font-size-sm: 1rem !default;
$lte-card-title-font-weight: $font-weight-normal !default; $lte-card-title-font-weight: $font-weight-normal !default;
$lte-card-nav-link-padding-sm-y: .4rem !default;
$lte-card-nav-link-padding-sm-x: .8rem !default;
$lte-card-img-size: $lte-img-size-sm !default;
// PROGRESS BARS // PROGRESS BARS
// -------------------------------------------------------- // --------------------------------------------------------
@ -139,41 +88,5 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
// Z-INDEX // Z-INDEX
// -------------------------------------------------------- // --------------------------------------------------------
$lte-zindex-main-header: $zindex-fixed + 4 !default; $lte-zindex-app-header: $zindex-fixed + 4 !default;
$lte-zindex-sidebar: $zindex-fixed + 8 !default; $lte-zindex-sidebar: $zindex-fixed + 8 !default;
$lte-zindex-main-footer: $zindex-fixed + 2 !default;
$lte-zindex-control-sidebar: $zindex-fixed + 1 !default;
$lte-zindex-toasts: $lte-zindex-sidebar + 2 !default;
$lte-zindex-content-wrapper: $lte-zindex-sidebar - 2 !default;
$lte-zindex-preloader: $lte-zindex-toasts + 2 !default;
// Body background (Affects main content background only)
$lte-main-bg: #f4f6f9 !default;
$lte-main-color: $black !default;
// BUTTON
// --------------------------------------------------------
$lte-button-padding-y-xs: .125rem !default;
$lte-button-padding-x-xs: .25rem !default;
$lte-button-line-height-xs: $line-height-sm !default;
$lte-button-font-size-xs: ($font-size-base * .75) !default;
$lte-button-border-radius-xs: .15rem !default;
// RIBBON
// --------------------------------------------------------
$lte-ribbon-border-size: 3px !default;
$lte-ribbon-line-height: 100% !default;
$lte-ribbon-padding: .375rem 0 !default;
$lte-ribbon-font-size: .8rem !default;
$lte-ribbon-width: 90px !default;
$lte-ribbon-wrapper-size: 70px !default;
$lte-ribbon-top: 10px !default;
$lte-ribbon-right: -2px !default;
$lte-ribbon-lg-wrapper-size: 120px !default;
$lte-ribbon-lg-width: 160px !default;
$lte-ribbon-lg-top: 26px !default;
$lte-ribbon-lg-right: 0 !default;
$lte-ribbon-xl-wrapper-size: 180px !default;
$lte-ribbon-xl-width: 240px !default;
$lte-ribbon-xl-top: 47px !default;
$lte-ribbon-xl-right: 4px !default;

4
src/scss/mixins/_animations.scss
View File

@ -32,20 +32,24 @@
@keyframes fadeIn { @keyframes fadeIn {
from { from {
visibility: hidden;
opacity: 0; opacity: 0;
} }
to { to {
visibility: visible;
opacity: 1; opacity: 1;
} }
} }
@keyframes fadeOut { @keyframes fadeOut {
from { from {
visibility: visible;
opacity: 1; opacity: 1;
} }
to { to {
visibility: hidden;
opacity: 0; opacity: 0;
} }
} }

16
src/scss/parts/_core.scss
View File

@ -3,18 +3,14 @@
// //
@import "../root"; @import "../root";
@import "../wrapper"; @import "../app-wrapper";
@import "../main-header"; @import "../app-header";
@import "../brand-container"; @import "../app-sidebar";
@import "../main-sidebar"; @import "../sidebar-brand";
@import "../sidebar";
@import "../nav-sidebar";
@import "../sidebar-collapse"; @import "../sidebar-collapse";
@import "../sidebar-close"; @import "../sidebar-close";
@import "../content-wrapper"; @import "../app-main";
@import "../content-header"; @import "../app-footer";
@import "../content";
@import "../main-footer";
@import "../layout-fixed"; @import "../layout-fixed";
@import "../layout-mobile"; @import "../layout-mobile";
@import "../dropdown"; @import "../dropdown";

12
src/ts/push-menu.ts
View File

@ -30,14 +30,14 @@ const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
const CLASS_NAME_MENU_OPEN = 'menu-open' const CLASS_NAME_MENU_OPEN = 'menu-open'
const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile' const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
const SELECTOR_SIDEBAR = '.sidebar' const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
const SELECTOR_NAV_SIDEBAR = '.nav-sidebar' const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
const SELECTOR_NAV_ITEM = '.nav-item' const SELECTOR_NAV_ITEM = '.nav-item'
const SELECTOR_NAV_TREEVIEW = '.nav-treeview' const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]' const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]' const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}` const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
const SELECTOR_CONTENT_WRAPPER = '.content-wrapper' const SELECTOR_APP_MAIN = '.app-main'
const Defaults = { const Defaults = {
onLayoutMobile: 992 onLayoutMobile: 992
@ -70,7 +70,7 @@ class PushMenu {
navTree.style.removeProperty('height') navTree.style.removeProperty('height')
} }
const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR) const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU)
const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM) const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
if (navItem) { if (navItem) {
@ -111,7 +111,7 @@ class PushMenu {
} }
sidebarHover(): void { sidebarHover(): void {
const selSidebar = document.querySelector(SELECTOR_SIDEBAR) const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
if (selSidebar) { if (selSidebar) {
selSidebar.addEventListener('mouseover', () => { selSidebar.addEventListener('mouseover', () => {
@ -175,7 +175,7 @@ class PushMenu {
this.sidebarHover() this.sidebarHover()
const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE) const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_CONTENT_WRAPPER) const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_APP_MAIN)
if (targetContentWrapper) { if (targetContentWrapper) {
targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar) targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)