MVP z ruchomym paskiem
This commit is contained in:
Flatlogic Bot
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">
|
||||
|
||||
</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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@ -3,7 +3,7 @@ body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -12,35 +12,46 @@ body {
|
||||
padding: 48px 0 0;
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||
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;
|
||||
}
|
||||
|
||||
.sidebar-collapsed .nav-link-text {
|
||||
body.sidebar-collapsed #main-content {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed #sidebar .nav-link-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-collapsed .nav-link i {
|
||||
body.sidebar-collapsed #sidebar .nav-link i {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
transition: margin-left 0.3s;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.main-content-collapsed {
|
||||
margin-left: 80px;
|
||||
body.sidebar-collapsed #sidebar .nav-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-link i {
|
||||
margin-right: 10px;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
@ -144,5 +155,14 @@ body {
|
||||
.navbar-logo {
|
||||
height: 30px;
|
||||
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 () {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const sidebarToggler = document.getElementById('sidebar-toggler');
|
||||
|
||||
if (sidebarToggler) {
|
||||
sidebarToggler.addEventListener('click', function () {
|
||||
sidebar.classList.toggle('sidebar-collapsed');
|
||||
mainContent.classList.toggle('main-content-collapsed');
|
||||
const isCollapsed = document.body.classList.toggle('sidebar-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
|
||||
$('#editPersonModal').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget); // Button that triggered the modal
|
||||
@ -244,4 +249,5 @@ $(document).ready(function() {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -78,7 +78,7 @@ $status_colors = [
|
||||
<div class="row">
|
||||
<?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'])): ?>
|
||||
<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
|
||||
<?= $_SESSION['success_message']; ?>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user