MVP z ruchomym paskiem
This commit is contained in:
parent
803226678c
commit
b6d5f17197
@ -42,4 +42,11 @@ if (!isset($_SESSION['user_id'])) {
|
|||||||
<link rel="icon" href="assets/pasted-20260111-144117-aba8ec29.jpg" type="image/jpeg">
|
<link rel="icon" href="assets/pasted-20260111-144117-aba8ec29.jpg" type="image/jpeg">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="<?php echo isset($_COOKIE['sidebar_collapsed']) && $_COOKIE['sidebar_collapsed'] === 'true' ? 'sidebar-collapsed' : ''; ?>">
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
if (localStorage.getItem('sidebarCollapsed') === 'true') {
|
||||||
|
document.body.classList.add('sidebar-collapsed');
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||||
|
<button class="navbar-toggler d-none d-md-block" type="button" id="sidebar-toggler" aria-label="Toggle sidebar" aria-expanded="true">
|
||||||
|
<i class="bi bi-list"></i>
|
||||||
|
</button>
|
||||||
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#"><img src="assets/pasted-20260111-143449-befa41d3.png" class="d-inline-block align-top navbar-logo" alt=""> <?php echo getenv('PROJECT_NAME') ?: 'BNI obsługa regionu'; ?></a>
|
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#"><img src="assets/pasted-20260111-143449-befa41d3.png" class="d-inline-block align-top navbar-logo" alt=""> <?php echo getenv('PROJECT_NAME') ?: 'BNI obsługa regionu'; ?></a>
|
||||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ body {
|
|||||||
background-color: #f8f9fa;
|
background-color: #f8f9fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
#sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -12,35 +12,46 @@ body {
|
|||||||
padding: 48px 0 0;
|
padding: 48px 0 0;
|
||||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||||
width: 250px;
|
width: 250px;
|
||||||
transition: all 0.3s;
|
transition: width 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-collapsed {
|
#main-content {
|
||||||
|
margin-left: 250px;
|
||||||
|
transition: margin-left 0.3s ease-in-out;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.sidebar-collapsed #sidebar {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-collapsed .nav-link-text {
|
body.sidebar-collapsed #main-content {
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.sidebar-collapsed #sidebar .nav-link-text {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-collapsed .nav-link i {
|
body.sidebar-collapsed #sidebar .nav-link i {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.sidebar-collapsed #sidebar .nav-item {
|
||||||
.main-content {
|
text-align: center;
|
||||||
margin-left: 250px;
|
|
||||||
transition: margin-left 0.3s;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content-collapsed {
|
|
||||||
margin-left: 80px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
color: #333;
|
color: #333;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link i {
|
||||||
|
margin-right: 10px;
|
||||||
|
width: 24px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-link.active {
|
.nav-link.active {
|
||||||
@ -144,5 +155,14 @@ body {
|
|||||||
.navbar-logo {
|
.navbar-logo {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-right: 50px;
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggler i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make sidebar link text visible */
|
||||||
|
.nav-link-text {
|
||||||
|
display: inline;
|
||||||
}
|
}
|
||||||
@ -1,17 +1,22 @@
|
|||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const sidebar = document.getElementById('sidebar');
|
|
||||||
const mainContent = document.getElementById('main-content');
|
|
||||||
const sidebarToggler = document.getElementById('sidebar-toggler');
|
const sidebarToggler = document.getElementById('sidebar-toggler');
|
||||||
|
|
||||||
if (sidebarToggler) {
|
if (sidebarToggler) {
|
||||||
sidebarToggler.addEventListener('click', function () {
|
sidebarToggler.addEventListener('click', function () {
|
||||||
sidebar.classList.toggle('sidebar-collapsed');
|
const isCollapsed = document.body.classList.toggle('sidebar-collapsed');
|
||||||
mainContent.classList.toggle('main-content-collapsed');
|
localStorage.setItem('sidebarCollapsed', isCollapsed);
|
||||||
|
sidebarToggler.setAttribute('aria-expanded', !isCollapsed);
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).ready(function() {
|
// Set initial aria-expanded state
|
||||||
|
const isInitiallyCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
|
||||||
|
sidebarToggler.setAttribute('aria-expanded', !isInitiallyCollapsed);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- The rest of your original main.js --- //
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
// Handler for showing the edit person modal
|
// Handler for showing the edit person modal
|
||||||
$('#editPersonModal').on('show.bs.modal', function (event) {
|
$('#editPersonModal').on('show.bs.modal', function (event) {
|
||||||
var button = $(event.relatedTarget); // Button that triggered the modal
|
var button = $(event.relatedTarget); // Button that triggered the modal
|
||||||
@ -244,4 +249,5 @@ $(document).ready(function() {
|
|||||||
window.location.reload();
|
window.location.reload();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
@ -78,7 +78,7 @@ $status_colors = [
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<?php include '_sidebar.php'; ?>
|
<?php include '_sidebar.php'; ?>
|
||||||
|
|
||||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
|
<main id="main-content" class="col-md-9 col-lg-10 px-md-4">
|
||||||
<?php if (isset($_SESSION['success_message'])): ?>
|
<?php if (isset($_SESSION['success_message'])): ?>
|
||||||
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
|
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
|
||||||
<?= $_SESSION['success_message']; ?>
|
<?= $_SESSION['success_message']; ?>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user