This commit is contained in:
KONE SOREL 2026-02-03 15:19:52 +00:00
parent 45699dd039
commit 1c22e0f758
4 changed files with 188 additions and 48 deletions

View File

@ -1006,4 +1006,143 @@ body {
.icon-wrapper i { .icon-wrapper i {
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
}
/* ==========================================================================
HEADER BREADCRUMB
========================================================================== */
.header-breadcrumb {
max-width: 500px;
}
.header-breadcrumb .breadcrumb {
background: transparent;
margin-bottom: 0;
padding: 0;
}
.header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
display: none !important;
content: none !important;
}
.header-breadcrumb .breadcrumb-item a {
color: #6c757d;
transition: var(--transition);
padding: 0.25rem 0.5rem;
border-radius: var(--border-radius);
}
.header-breadcrumb .breadcrumb-item a:hover {
color: var(--primary-color);
background-color: rgba(0, 136, 207, 0.1);
}
.header-breadcrumb .breadcrumb-item.active {
color: var(--primary-color);
font-weight: 600;
}
/* ==========================================================================
SECONDARY NAV FIXED
========================================================================== */
.secondary-nav-fixed-container {
position: fixed;
top: 60px;
left: 260px;
right: 0;
z-index: 1010;
background: white;
border-bottom: 1px solid var(--border-color);
transition: var(--transition);
}
.secondary-nav-fixed {
background: white;
padding: 0 1.5rem;
}
.secondary-nav-item {
min-width: 140px;
white-space: nowrap;
border-right: 1px solid var(--border-color);
padding: 1rem 1.5rem;
text-decoration: none;
color: var(--dark-color);
text-align: center;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.secondary-nav-item:hover {
background-color: rgba(0, 136, 207, 0.05);
color: var(--primary-color);
}
.secondary-nav-item.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: white !important;
font-weight: 600;
position: relative;
}
.secondary-nav-item.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 3px;
background: white;
}
.secondary-nav-item:last-child {
border-right: none;
}
/* Responsive adjustments */
@media (max-width: 1199px) {
.secondary-nav-fixed-container {
left: 0;
}
.toggle-sidebar .secondary-nav-fixed-container {
left: 260px;
}
}
@media (max-width: 768px) {
.header-breadcrumb {
display: none;
}
.secondary-nav-item {
min-width: 120px;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.secondary-nav-fixed {
padding: 0 1rem;
}
}
@media (max-width: 576px) {
.secondary-nav-item {
min-width: 100px;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
}
.secondary-nav-item i {
margin-right: 0.25rem !important;
}
.secondary-nav-item span:not(.badge) {
display: none;
}
} }

View File

@ -7,7 +7,7 @@
<div class="context-header bg-primary text-white py-3 px-4 d-flex justify-content-between align-items-center"> <div class="context-header bg-primary text-white py-3 px-4 d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i class="fas fa-cog fa-spin me-2"></i> <i class="fas fa-cog fa-spin me-2"></i>
<h6 class="mb-0 fw-bold"><?= _("Contexte d'utilisation") ?></h6> <h6 class="mb-0 fw-bold"><?= _("Panneau contexte") ?></h6>
</div> </div>
<button class="btn btn-sm btn-light" id="hideSideNav" title="<?= _("Cacher le contexte") ?>"> <button class="btn btn-sm btn-light" id="hideSideNav" title="<?= _("Cacher le contexte") ?>">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>

View File

@ -26,9 +26,9 @@ $imgData = $_SESSION['photoAssureCrypte'];
// Get breadcrumb info // Get breadcrumb info
$infovue = $gabary->getInfosVue($_SESSION['vue']); $infovue = $gabary->getInfosVue($_SESSION['vue']);
$descriptionVue = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description']; $_SESSION['descriptionVue'] = est_anglophone() ? $infovue['DescriptionEng'] : $infovue['Description'];
$titreRetour = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour']; $_SESSION['titreRetour'] = est_anglophone() ? $infovue['titreRetourEng'] : $infovue['titreRetour'];
$retourVue = $infovue['lienRetour']; $_SESSION['retourVue'] = $infovue['lienRetour'];
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
@ -57,52 +57,34 @@ $retourVue = $infovue['lienRetour'];
<input type="hidden" id="nomSociete" value="<?= htmlspecialchars($_SESSION['nomSociete']) ?>"> <input type="hidden" id="nomSociete" value="<?= htmlspecialchars($_SESSION['nomSociete']) ?>">
<input type="hidden" id="modeDev" value="<?= $modeDev ?>"> <input type="hidden" id="modeDev" value="<?= $modeDev ?>">
<div class="container-fluid p-3 animate__animated animate__fadeIn"> <!-- Secondary Navigation Fixe -->
<?php if (isset($menusvue) && sizeof($menusvue) > 0): ?>
<!-- Breadcrumb --> <div class="secondary-nav-fixed-container">
<nav aria-label="breadcrumb" class="mb-4 px-2"> <div class="secondary-nav-fixed shadow-sm">
<ol class="breadcrumb bg-white shadow-sm rounded-pill py-2 px-4 border-0"> <div class="d-flex overflow-auto">
<li class="breadcrumb-item"> <?php foreach ($menusvue as $menu):
<a href="<?= $retourVue; ?>" $isActive = (basename($_SERVER['REQUEST_URI']) == basename($menu['lienMenu']));
class="text-decoration-none text-muted small d-flex align-items-center text-uppercase"> $activeClass = $isActive ? 'active' : '';
<?= $titreRetour ?> ?>
</a> <a class="secondary-nav-item p-3 <?= $activeClass ?>"
</li> href="<?= $menu['lienMenu']; ?>">
<li class="breadcrumb-item active text-primary fw-bold small text-uppercase" <?php if (!empty($menu['icone'])): ?>
aria-current="page"> <i class="<?= $menu['icone'] ?> me-2"></i>
<i class="fas fa-angle-right me-2 text-muted"></i> <?php endif; ?>
<?= $descriptionVue ?> <?= $menu['libeleMenu'] ?>
</li> <?php if ($isActive): ?>
</ol> <span class="badge bg-white text-primary ms-2 rounded-pill">
</nav> <i class="fas fa-check"></i>
</span>
<!-- Secondary Navigation --> <?php endif; ?>
<?php if (isset($menusvue) && sizeof($menusvue) > 0): ?> </a>
<div class="tabs-container mb-4 px-2"> <?php endforeach; ?>
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
<div class="d-flex overflow-auto secondary-nav-container">
<?php foreach ($menusvue as $menu):
$isActive = (basename($_SERVER['REQUEST_URI']) == basename($menu['lienMenu']));
$activeClass = $isActive ? 'active' : '';
?>
<a class="nav-link-sub p-3 <?= $activeClass ?>"
href="<?= $menu['lienMenu']; ?>">
<?php if (!empty($menu['icone'])): ?>
<i class="<?= $menu['icone'] ?> me-2"></i>
<?php endif; ?>
<?= $menu['libeleMenu'] ?>
<?php if ($isActive): ?>
<span class="badge bg-white text-primary ms-2 rounded-pill">
<i class="fas fa-check"></i>
</span>
<?php endif; ?>
</a>
<?php endforeach; ?>
</div>
</div> </div>
</div> </div>
<?php endif; ?> </div>
<?php endif; ?>
<div class="container-fluid p-3 animate__animated animate__fadeIn" style="margin-top: <?= isset($menusvue) && sizeof($menusvue) > 0 ? '70px' : '0' ?>;">
<!-- Main Content Area --> <!-- Main Content Area -->
<section class="section main-dashboard px-2"> <section class="section main-dashboard px-2">
<div id="contenu" class="animate__animated animate__fadeIn"> <div id="contenu" class="animate__animated animate__fadeIn">

View File

@ -28,6 +28,25 @@
<i class="fas fa-bars toggle-sidebar-btn" onclick="toggleSidebar()" style="cursor: pointer;"></i> <i class="fas fa-bars toggle-sidebar-btn" onclick="toggleSidebar()" style="cursor: pointer;"></i>
</div> </div>
<!-- Breadcrumb intégré dans le header -->
<div class="header-breadcrumb mx-4 flex-grow-1 d-none d-lg-block">
<nav aria-label="breadcrumb" class="mb-0">
<ol class="breadcrumb mb-0 bg-transparent p-0">
<li class="breadcrumb-item">
<a href="<?= $_SESSION['retourVue'] ?? '#' ?>"
class="text-decoration-none text-muted small d-flex align-items-center text-uppercase">
<?= $_SESSION['titreRetour'] ?? '' ?>
</a>
</li>
<li class="breadcrumb-item active text-primary fw-bold small text-uppercase"
aria-current="page">
<i class="fas fa-chevron-right mx-2 text-muted"></i>
<?= $_SESSION['descriptionVue'] ?? '' ?>
</li>
</ol>
</nav>
</div>
<!-- Navigation droite --> <!-- Navigation droite -->
<nav class="header-nav ms-auto"> <nav class="header-nav ms-auto">