admin/37338-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MVP z ruchomym paskiem

Browse Source
This commit is contained in:
Flatlogic Bot 2026-01-11 17:41:41 +00:00
parent 803226678c
commit b6d5f17197
5 changed files with 279 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
_header.php
View File

@ -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>

3
_navbar.php
View File

@ -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>

50
assets/css/custom.css
View File

@ -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;
} }

16
assets/js/main.js
View File

@ -1,15 +1,20 @@
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);
}); });
// 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() { $(document).ready(function() {
// Handler for showing the edit person modal // Handler for showing the edit person modal
@ -245,3 +250,4 @@ $(document).ready(function() {
}); });
}); });
}); });
});

2
index.php
View File

@ -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']; ?>