prework
This commit is contained in:
parent
2103ef609f
commit
5c81a67f18
@ -6,78 +6,82 @@
|
|||||||
?>
|
?>
|
||||||
<!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 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 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">
|
||||||
<!-- DataTables CSS -->
|
|
||||||
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
table {
|
table {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
body {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width: 200px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: -250px;
|
|
||||||
width: 250px;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #0d6dfda6;
|
|
||||||
color: white;
|
|
||||||
padding-top: 1rem;
|
|
||||||
transition: left 0.3s ease;
|
|
||||||
z-index: 1040;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.show {
|
|
||||||
left: 0;
|
left: 0;
|
||||||
|
height: 100vh;
|
||||||
|
background: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
#sidebar.collapsed {
|
||||||
.sidebar .nav-link {
|
width: 70px;
|
||||||
color: #ffffff;
|
|
||||||
border-radius: 6px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
#sidebar .nav-link {
|
||||||
/* Hover - biru lembut transparan */
|
color: #adb5bd;
|
||||||
.sidebar .nav-link:hover {
|
display: flex;
|
||||||
background-color: #0d6efd20;
|
align-items: center;
|
||||||
/* biru muda transparan */
|
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;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
#content {
|
||||||
/* Active - biru solid */
|
margin-left: 200px;
|
||||||
.sidebar .nav-link.active {
|
transition: all 0.3s;
|
||||||
background-color: #0d6efd;
|
padding: 20px;
|
||||||
/* biru solid Bootstrap */
|
}
|
||||||
color: #fff !important;
|
#content.fullwidth {
|
||||||
font-weight: 600;
|
margin-left: 70px;
|
||||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.4);
|
}
|
||||||
/* efek glow lembut */
|
.toggle-btn {
|
||||||
|
position: fixed;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
transition: margin-left 0.3s ease;
|
transition: margin-left 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main.shifted {
|
.main.shifted {
|
||||||
margin-left: 250px;
|
margin-left: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 200px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main.shifted {
|
.main.shifted {
|
||||||
margin-left: 200px;
|
margin-left: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -199,37 +203,19 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="main" class="main p-3">
|
<button class="btn btn-sm btn-secondary toggle-btn" id="toggleSidebar"> <i class="bi bi-list"></i> </button>
|
||||||
<button id="menuBtn" class="btn btn-primary btn-sm mb-1 p-2">☰ MENU</button>
|
|
||||||
<?= $this->renderSection('content'); ?>
|
<div id="sidebar" class="collapsed">
|
||||||
|
<h5 class="p-3 text-center text-truncate"> <span class="sidebar-title">5Panda</span> </h5>
|
||||||
|
<nav class="nav flex-column px-2">
|
||||||
|
<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>
|
||||||
|
|
||||||
<div id="sidebar" class="sidebar">
|
<div id="content" class="main p-1 fullwidth"> <?= $this->renderSection('content'); ?> </div>
|
||||||
|
|
||||||
<ul class="nav flex-column">
|
|
||||||
<li class="nav-item">
|
|
||||||
<!-- 2_Digunakan Untuk Nav Link Pada Side Bar Yg Aktif dan Tidak -->
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
console.log("Jangan Nakal Yaa😏😏😏");
|
console.log("Jangan Nakal Yaa😏😏😏");
|
||||||
@ -242,26 +228,20 @@
|
|||||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||||
|
|
||||||
<!-- DataTables JS -->
|
<!-- DataTables JS -->
|
||||||
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.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>
|
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.bootstrap5.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const sidebar = document.getElementById('sidebar');
|
const sidebar = document.getElementById('sidebar');
|
||||||
const main = document.getElementById('main');
|
const main = document.getElementById('main');
|
||||||
const menuBtn = document.getElementById('menuBtn');
|
|
||||||
|
|
||||||
// Digunakan Button Menu
|
|
||||||
menuBtn.addEventListener('click', () => {
|
|
||||||
const isOpen = sidebar.classList.toggle('show');
|
|
||||||
main.classList.toggle('shifted', isOpen);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Datatable
|
// Datatable
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
$('#datatables').DataTable({
|
$('#datatables').DataTable({
|
||||||
pageLength: 100, // jumlah baris per halaman
|
order: [[0, 'asc'], [3, 'asc']],
|
||||||
lengthMenu: [10, 25, 50, 75, 100],
|
paging: false,
|
||||||
order: [[0, 'asc'], [1, 'asc']],
|
scrollCollapse: true,
|
||||||
|
scrollY: '650px',
|
||||||
columnDefs: [{
|
columnDefs: [{
|
||||||
className: 'text-center',
|
className: 'text-center',
|
||||||
targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
targets: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
||||||
@ -279,8 +259,20 @@
|
|||||||
// previous: "Sebelumnya",
|
// previous: "Sebelumnya",
|
||||||
// next: "Berikutnya"
|
// next: "Berikutnya"
|
||||||
// }
|
// }
|
||||||
}
|
},
|
||||||
|
responsive: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#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>
|
</script>
|
||||||
<?= $this->renderSection('script'); ?>
|
<?= $this->renderSection('script'); ?>
|
||||||
|
|||||||
@ -6,11 +6,12 @@
|
|||||||
|
|
||||||
<?= $this->section('content') ?>
|
<?= $this->section('content') ?>
|
||||||
|
|
||||||
<div class="container-fluid px-5">
|
<div class="container-fluid px-3">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<!-- Accordion Search Detail -->
|
<!-- Accordion Search Detail -->
|
||||||
|
<!--
|
||||||
<div class="col col-12 mt-3">
|
<div class="col col-12 mt-3">
|
||||||
<div class="accordion" id="accordionPanelsStayOpenExample">
|
<div class="accordion" id="accordionPanelsStayOpenExample">
|
||||||
<div class="accordion-item">
|
<div class="accordion-item">
|
||||||
@ -108,13 +109,55 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<form method="GET" action='<?= base_url('/admin') ?>'>
|
||||||
|
<div class="row align-items-center g-3 mt-3">
|
||||||
|
<div class="col-auto fw-semibold text-muted">
|
||||||
|
Date :
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Card Status Semua Counter -->
|
<div class="col-auto">
|
||||||
|
<input type="date" class="form-control form-control-sm" name="date1"
|
||||||
|
value="<?php echo $date1; ?>" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto">-</div>
|
||||||
|
|
||||||
|
<div class="col-auto">
|
||||||
|
<input type="date" class="form-control form-control-sm" name="date2"
|
||||||
|
value="<?php echo $date2; ?>" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto">
|
||||||
|
<button type="submit" class="btn btn-sm btn-primary">Search</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-auto"> <button type="button" class="btn btn-sm btn-outline-dark" onclick="window.location.href='<?=base_url();?>';"> RESET </button> </div>
|
||||||
|
<div class="col-auto"> <button type="button" class="btn btn-sm btn-dark" data-bs-toggle="offcanvas" data-bs-target="#offcanvasFilter" aria-controls="offcanvasFilter"> Adv.Filter </button> </div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasFilter" aria-labelledby="offcanvasFilterLabel">
|
||||||
|
<div class="offcanvas-header">
|
||||||
|
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Advanced Filter</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="offcanvas-body">
|
||||||
|
orang dalam
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Card Status Semua Counter
|
||||||
<div class="row justify-content-evenly mt-4">
|
<div class="row justify-content-evenly mt-4">
|
||||||
<!-- Pending -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center">
|
<div class="card status-card text-center">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -124,7 +167,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Partial Collected -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center PartColl">
|
<div class="card status-card text-center PartColl">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -134,7 +176,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Collected -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center Collected">
|
<div class="card status-card text-center Collected">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -144,7 +185,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Partial Received -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center PartRecv">
|
<div class="card status-card text-center PartRecv">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -154,7 +194,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Received -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center Received">
|
<div class="card status-card text-center Received">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -164,7 +203,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Incomplete -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center Incomplete">
|
<div class="card status-card text-center Incomplete">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -174,7 +212,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Printed not Complete -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center Final">
|
<div class="card status-card text-center Final">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -184,7 +221,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Complete -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center FinVerification">
|
<div class="card status-card text-center FinVerification">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -194,7 +230,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 1-validation -->
|
|
||||||
<div class="col-auto mb-2">
|
<div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center PenVerification">
|
<div class="card status-card text-center PenVerification">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -204,7 +239,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 2-validation -->
|
|
||||||
<!-- <div class="col-auto mb-2">
|
<!-- <div class="col-auto mb-2">
|
||||||
<div class="card status-card text-center">
|
<div class="card status-card text-center">
|
||||||
<div class="card-body p-2">
|
<div class="card-body p-2">
|
||||||
@ -212,13 +246,13 @@
|
|||||||
<div class="status-label text-success">-</div>
|
<div class="status-label text-success">-</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
<!-- Semua Tabel -->
|
<!-- Semua Tabel -->
|
||||||
<div class="col">
|
|
||||||
<div class="table-responsive">
|
<div class="table table-responsive-scroll">
|
||||||
<table id="datatables" class="table table-sm table-hover table-bordered align-middle">
|
<table id="datatables" class="table table-sm table-hover table-bordered align-middle table-striped">
|
||||||
<thead class="table-primary">
|
<thead class="table-primary">
|
||||||
<tr>
|
<tr>
|
||||||
<th>S</th>
|
<th>S</th>
|
||||||
@ -304,10 +338,9 @@
|
|||||||
<?= esc($row['stats']) ?>
|
<?= esc($row['stats']) ?>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<a href="#" class="text-primary">Preview</a>
|
<a href="#" class="text-primary">Preview</a> <br/>
|
||||||
<hr>
|
|
||||||
<a href="#" class="text-danger">Print</a> | <a href="#" class="text-danger">Eng</a>
|
<a href="#" class="text-danger">Print</a> | <a href="#" class="text-danger">Eng</a> <br/>
|
||||||
<hr>
|
|
||||||
<a href="#" class="text-primary">Pdf</a>
|
<a href="#" class="text-primary">Pdf</a>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -319,7 +352,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
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