prework
This commit is contained in:
parent
2103ef609f
commit
5c81a67f18
@ -1,289 +1,281 @@
|
|||||||
<?php
|
<?php
|
||||||
// 1_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak
|
// 1_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak
|
||||||
$uri = service('uri');
|
$uri = service('uri');
|
||||||
$path = $uri->getPath();
|
$path = $uri->getPath();
|
||||||
$activeUrls = ['/admin', '/cs', '/analyst', '/doctor'];
|
$activeUrls = ['/admin', '/cs', '/analyst', '/doctor'];
|
||||||
?>
|
?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="id">
|
<html lang="id">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<?= $this->renderSection('title'); ?>
|
<?= $this->renderSection('title'); ?>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
||||||
|
<link href="https://cdn.datatables.net/v/bs5/dt-2.3.4/r-3.0.7/datatables.min.css" rel="stylesheet" integrity="sha384-RaJlMsTv+nhuWA/3SQzc3dPVUOKfEb08YW4YZsaNK3UNFUhjvLkn/SwJEfKSavGD" crossorigin="anonymous">
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
|
body {
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
<!-- DataTables CSS -->
|
#sidebar {
|
||||||
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
width: 200px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#sidebar.collapsed {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
#sidebar .nav-link {
|
||||||
|
color: #adb5bd;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
#sidebar.collapsed .nav-link span {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
#sidebar .nav-link.active {
|
||||||
|
background: #495057;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
margin-left: 200px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
#content.fullwidth {
|
||||||
|
margin-left: 70px;
|
||||||
|
}
|
||||||
|
.toggle-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
transition: margin-left 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
.main.shifted {
|
||||||
table {
|
margin-left: 200px;
|
||||||
font-size: 0.7rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
@media (max-width: 768px) {
|
||||||
position: fixed;
|
.sidebar {
|
||||||
top: 0;
|
width: 150px;
|
||||||
left: -250px;
|
}
|
||||||
width: 250px;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #0d6dfda6;
|
|
||||||
color: white;
|
|
||||||
padding-top: 1rem;
|
|
||||||
transition: left 0.3s ease;
|
|
||||||
z-index: 1040;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.show {
|
.main.shifted {
|
||||||
left: 0;
|
margin-left: 150px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.sidebar .nav-link {
|
|
||||||
color: #ffffff;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hover - biru lembut transparan */
|
|
||||||
.sidebar .nav-link:hover {
|
|
||||||
background-color: #0d6efd20;
|
|
||||||
/* biru muda transparan */
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active - biru solid */
|
|
||||||
.sidebar .nav-link.active {
|
|
||||||
background-color: #0d6efd;
|
|
||||||
/* biru solid Bootstrap */
|
|
||||||
color: #fff !important;
|
|
||||||
font-weight: 600;
|
|
||||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.4);
|
|
||||||
/* efek glow lembut */
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
transition: margin-left 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main.shifted {
|
|
||||||
margin-left: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.sidebar {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main.shifted {
|
|
||||||
margin-left: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Untuk Card Status Counter */
|
/* Untuk Card Status Counter */
|
||||||
.status-card {
|
.status-card {
|
||||||
width: 123px;
|
width: 123px;
|
||||||
/* lebar tetap */
|
/* lebar tetap */
|
||||||
height: 60px;
|
height: 60px;
|
||||||
/* tinggi seragam */
|
/* tinggi seragam */
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border : solid 1px #ddd ;
|
border : solid 1px #ddd ;
|
||||||
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */
|
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08); */
|
||||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||||
display: flex;
|
display: flex;
|
||||||
/* flex untuk isi card */
|
/* flex untuk isi card */
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* tengah vertikal */
|
/* tengah vertikal */
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
/* tengah horizontal */
|
/* tengah horizontal */
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
/* urut atas ke bawah */
|
/* urut atas ke bawah */
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-card:hover {
|
.status-card:hover {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-icon {
|
.status-icon {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-count {
|
.status-count {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-label {
|
.status-label {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
/* biar teks tidak turun ke bawah */
|
/* biar teks tidak turun ke bawah */
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
/* kalau terlalu panjang, potong dengan "..." */
|
/* kalau terlalu panjang, potong dengan "..." */
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
/* biar rapih dalam box */
|
/* biar rapih dalam box */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
height: 7px;
|
height: 7px;
|
||||||
width: 7px;
|
width: 7px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Untuk Cursor di Tabel */
|
/* Untuk Cursor di Tabel */
|
||||||
.pointercol {
|
.pointercol {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 1 */
|
/* 1 */
|
||||||
.Pend {
|
.Pend {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 2 */
|
/* 2 */
|
||||||
.PartColl {
|
.PartColl {
|
||||||
background-color: #ff99aaaf !important;
|
background-color: #ff99aaaf !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3 */
|
/* 3 */
|
||||||
.Collected {
|
.Collected {
|
||||||
background-color: #d6303086 !important;
|
background-color: #d6303086 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4 */
|
/* 4 */
|
||||||
.PartRecv {
|
.PartRecv {
|
||||||
background-color: #a0c0d9af !important;
|
background-color: #a0c0d9af !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 5 */
|
/* 5 */
|
||||||
.Received {
|
.Received {
|
||||||
background-color: #0985e39d !important;
|
background-color: #0985e39d !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 6 */
|
/* 6 */
|
||||||
.Incomplete {
|
.Incomplete {
|
||||||
background-color: #fbff009a !important;
|
background-color: #fbff009a !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 7 */
|
/* 7 */
|
||||||
.Final {
|
.Final {
|
||||||
background-color: #90EE90 !important;
|
background-color: #90EE90 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 8 */
|
/* 8 */
|
||||||
.FinVerification {
|
.FinVerification {
|
||||||
background-color: #09ff00ab !important;
|
background-color: #09ff00ab !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 9 */
|
/* 9 */
|
||||||
.PenVerification {
|
.PenVerification {
|
||||||
background-color: #ee5a24c7 !important;
|
background-color: #ee5a24c7 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 10 */
|
/* 10 */
|
||||||
.Suspend {
|
.Suspend {
|
||||||
background-color: purple;
|
background-color: purple;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<?= $this->renderSection('css'); ?>
|
<?= $this->renderSection('css'); ?>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<button class="btn btn-sm btn-secondary toggle-btn" id="toggleSidebar"> <i class="bi bi-list"></i> </button>
|
||||||
|
|
||||||
<div id="main" class="main p-3">
|
<div id="sidebar" class="collapsed">
|
||||||
<button id="menuBtn" class="btn btn-primary btn-sm mb-1 p-2">☰ MENU</button>
|
<h5 class="p-3 text-center text-truncate"> <span class="sidebar-title">5Panda</span> </h5>
|
||||||
<?= $this->renderSection('content'); ?>
|
<nav class="nav flex-column px-2">
|
||||||
</div>
|
<a class="nav-link" href="<?=base_url('admin');?>"><i class="bi bi-house-door"></i> <span>Dashboard</span></a>
|
||||||
|
<a class="nav-link" href="<?=base_url('admin/user');?>"><i class="bi bi-people"></i> <span>Users</span></a>
|
||||||
|
<a class="nav-link" href="#"><i class="bi bi-graph-up"></i> <span>Reports</span></a>
|
||||||
|
<a class="nav-link" href="<?=base_url('logout');?>"><i class="bi bi-box-arrow-in-left"></i> <span>Log out</span></a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="sidebar" class="sidebar">
|
<div id="content" class="main p-1 fullwidth"> <?= $this->renderSection('content'); ?> </div>
|
||||||
|
|
||||||
<ul class="nav flex-column">
|
<script>
|
||||||
<li class="nav-item">
|
console.log("Jangan Nakal Yaa😏😏😏");
|
||||||
<!-- 2_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak -->
|
</script>
|
||||||
<a class="nav-link <?= (in_array($path, $activeUrls) ? 'active' : '') ?>"
|
|
||||||
href="<?= base_url('admin') ?>"><i class="bi bi-house-door"></i> Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php if ( session()->get('userlevel') == 1) : ?>
|
|
||||||
<li class="nav-item">
|
|
||||||
<!-- 3_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak -->
|
|
||||||
<a class="nav-link <?= (uri_string() == 'admin/user' ? 'active' : '') ?>"
|
|
||||||
href="<?= base_url('admin/user') ?>"><i class="bi bi-people"></i> User Management
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php endif; ?>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="<?= base_url('logout') ?>"><i class="bi bi-box-arrow-in-left"></i>
|
|
||||||
Logout
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
</div>
|
<!-- Bootstrap 5 JS Bundle -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<!-- jQuery (Wajib untuk DataTables) -->
|
||||||
console.log("Jangan Nakal Yaa😏😏😏");
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Bootstrap 5 JS Bundle -->
|
<!-- DataTables JS -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.datatables.net/v/bs5/dt-2.3.4/r-3.0.7/datatables.min.js" integrity="sha384-O4V7rOTTcSRflQBTMk8URAYWhGGEMgmmLFrqu3e83FQtze3vmndvrH3GcRdrfXRu" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
|
||||||
|
|
||||||
<!-- jQuery (Wajib untuk DataTables) -->
|
<script>
|
||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
const main = document.getElementById('main');
|
||||||
|
|
||||||
<!-- DataTables JS -->
|
// Datatable
|
||||||
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
|
$(document).ready(function () {
|
||||||
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
|
$('#datatables').DataTable({
|
||||||
|
order: [[0, 'asc'], [3, 'asc']],
|
||||||
|
paging: false,
|
||||||
|
scrollCollapse: true,
|
||||||
|
scrollY: '650px',
|
||||||
|
columnDefs: [{
|
||||||
|
className: 'text-center',
|
||||||
|
targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
||||||
|
}, // semua kolom di tengah
|
||||||
|
{
|
||||||
|
className: 'text-start',
|
||||||
|
targets: [12]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
language: {
|
||||||
|
// search: "Cari:",
|
||||||
|
// lengthMenu: "Tampilkan _MENU_ data",
|
||||||
|
// info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
||||||
|
// paginate: {
|
||||||
|
// previous: "Sebelumnya",
|
||||||
|
// next: "Berikutnya"
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
});
|
||||||
|
|
||||||
<script>
|
$('#toggleSidebar').on('click', function () {
|
||||||
const sidebar = document.getElementById('sidebar');
|
$('#sidebar').toggleClass('collapsed');
|
||||||
const main = document.getElementById('main');
|
$('#content').toggleClass('fullwidth');
|
||||||
const menuBtn = document.getElementById('menuBtn');
|
});
|
||||||
|
|
||||||
// Digunakan Button Menu
|
$('#sidebar .nav-link').on('click', function () {
|
||||||
menuBtn.addEventListener('click', () => {
|
$('#sidebar .nav-link').removeClass('active');
|
||||||
const isOpen = sidebar.classList.toggle('show');
|
$(this).addClass('active');
|
||||||
main.classList.toggle('shifted', isOpen);
|
});
|
||||||
});
|
|
||||||
|
|
||||||
// Datatable
|
});
|
||||||
$(document).ready(function () {
|
</script>
|
||||||
$('#datatables').DataTable({
|
<?= $this->renderSection('script'); ?>
|
||||||
pageLength: 100, // jumlah baris per halaman
|
|
||||||
lengthMenu: [10, 25, 50, 75, 100],
|
|
||||||
order: [[0, 'asc'], [1, 'asc']],
|
|
||||||
columnDefs: [{
|
|
||||||
className: 'text-center',
|
|
||||||
targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
|
||||||
}, // semua kolom di tengah
|
|
||||||
{
|
|
||||||
className: 'text-start',
|
|
||||||
targets: [12]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
language: {
|
|
||||||
// search: "Cari:",
|
|
||||||
// lengthMenu: "Tampilkan _MENU_ data",
|
|
||||||
// info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
||||||
// paginate: {
|
|
||||||
// previous: "Sebelumnya",
|
|
||||||
// next: "Berikutnya"
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<?= $this->renderSection('script'); ?>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
48
public/htaccess
Normal file
48
public/htaccess
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
# Disable directory browsing
|
||||||
|
Options -Indexes
|
||||||
|
|
||||||
|
# ----------------------------------------------------------------------
|
||||||
|
# Rewrite engine
|
||||||
|
# ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
# Turning on the rewrite engine is necessary for the following rules and features.
|
||||||
|
# FollowSymLinks must be enabled for this to work.
|
||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
Options +FollowSymlinks
|
||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
# If you installed CodeIgniter in a subfolder, you will need to
|
||||||
|
# change the following line to match the subfolder you need.
|
||||||
|
# http://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
|
||||||
|
|
||||||
|
# Redirect Trailing Slashes...
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteCond %{REQUEST_URI} (.+)/$
|
||||||
|
RewriteRule ^ %1 [L,R=301]
|
||||||
|
|
||||||
|
# Rewrite "www.example.com -> example.com"
|
||||||
|
RewriteCond %{HTTPS} !=on
|
||||||
|
RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
|
||||||
|
RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]
|
||||||
|
|
||||||
|
# Checks to see if the user is attempting to access a valid file,
|
||||||
|
# such as an image or css document, if this isn't true it sends the
|
||||||
|
# request to the front controller, index.php
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule ^([\s\S]*)$ index.php/$1 [L,NC,QSA]
|
||||||
|
|
||||||
|
# Ensure Authorization header is passed along
|
||||||
|
RewriteCond %{HTTP:Authorization} .
|
||||||
|
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
<IfModule !mod_rewrite.c>
|
||||||
|
# If we don't have mod_rewrite installed, all 404's
|
||||||
|
# can be sent to index.php, and everything works as normal.
|
||||||
|
ErrorDocument 404 index.php
|
||||||
|
</IfModule>
|
||||||
|
|
||||||
|
# Disable server signature start
|
||||||
|
ServerSignature Off
|
||||||
|
# Disable server signature end
|
||||||
117
public/test.html
117
public/test.html
@ -1,14 +1,103 @@
|
|||||||
<pre>
|
<!DOCTYPE html>
|
||||||
_______ __
|
<html lang="en">
|
||||||
/ | / |
|
<head>
|
||||||
$$$$$$$/ ______ ______ _______ ____$$ | ______
|
<meta charset="UTF-8">
|
||||||
$$ |____ / \ / \ / \ / $$ | / \
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
$$ \ /$$$$$$ | $$$$$$ |$$$$$$$ |/$$$$$$$ | $$$$$$ |
|
<title>Collapsible Sidebar (Icons Visible)</title>
|
||||||
$$$$$$$ |$$ | $$ | / $$ |$$ | $$ |$$ | $$ | / $$ |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
/ \__$$ |$$ |__$$ |/$$$$$$$ |$$ | $$ |$$ \__$$ |/$$$$$$$ |
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
|
||||||
$$ $$/ $$ $$/ $$ $$ |$$ | $$ |$$ $$ |$$ $$ |
|
<style>
|
||||||
$$$$$$/ $$$$$$$/ $$$$$$$/ $$/ $$/ $$$$$$$/ $$$$$$$/
|
body {
|
||||||
$$ |
|
overflow-x: hidden;
|
||||||
$$ |
|
}
|
||||||
$$/
|
#sidebar {
|
||||||
</pre>
|
width: 250px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#sidebar.collapsed {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
#sidebar .nav-link {
|
||||||
|
color: #adb5bd;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
#sidebar.collapsed .nav-link span {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
#sidebar .nav-link.active {
|
||||||
|
background: #495057;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
margin-left: 250px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
#content.fullwidth {
|
||||||
|
margin-left: 70px;
|
||||||
|
}
|
||||||
|
.toggle-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Toggle Button -->
|
||||||
|
<button class="btn btn-secondary toggle-btn" id="toggleSidebar">
|
||||||
|
<i class="bi bi-list"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<div id="sidebar">
|
||||||
|
<h5 class="p-3 border-bottom text-center text-truncate">
|
||||||
|
<span class="sidebar-title">My App</span>
|
||||||
|
</h5>
|
||||||
|
<nav class="nav flex-column px-2">
|
||||||
|
<a class="nav-link active" href="#"><i class="bi bi-house-door"></i> <span>Dashboard</span></a>
|
||||||
|
<a class="nav-link" href="#"><i class="bi bi-people"></i> <span>Users</span></a>
|
||||||
|
<a class="nav-link" href="#"><i class="bi bi-graph-up"></i> <span>Reports</span></a>
|
||||||
|
<a class="nav-link" href="#"><i class="bi bi-gear"></i> <span>Settings</span></a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div id="content">
|
||||||
|
<h2>Dashboard</h2>
|
||||||
|
<p>This is your main content area. Click the button to collapse or expand the sidebar. Icons stay visible when collapsed.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
$('#toggleSidebar').on('click', function () {
|
||||||
|
$('#sidebar').toggleClass('collapsed');
|
||||||
|
$('#content').toggleClass('fullwidth');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#sidebar .nav-link').on('click', function () {
|
||||||
|
$('#sidebar .nav-link').removeClass('active');
|
||||||
|
$(this).addClass('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user