C4M
/
motorbike
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 Commits
1 Branch
0 Tags
97 MiB
 
 
 
 
 
 
Tree: 6f2b1d3661
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '6f2b1d3661'
${ noResults }
motorbike/app/Views/templates/header.php

912 lines
33 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $page_title; ?></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap/dist/css/bootstrap.min.css') ?>">
<!-- Font Awesome -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/font-awesome/css/font-awesome.min.css') ?>">
<!-- Ionicons -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/Ionicons/css/ionicons.min.css') ?>">
<!-- Theme style -->
<link rel="stylesheet" href="<?php echo base_url('assets/dist/css/AdminLTE.min.css') ?>">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<?php echo base_url('assets/dist/css/skins/_all-skins.min.css') ?>">
<!-- Morris chart -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/morris.js/morris.css') ?>">
<!-- jvectormap -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/jvectormap/jquery-jvectormap.css') ?>">
<!-- Date Picker -->
<link rel="stylesheet"
href="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') ?>">
<!-- Daterange picker -->
<link rel="stylesheet"
href="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.css') ?>">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet"
href="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') ?>">
<link rel="stylesheet"
href="<?php echo base_url('assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') ?>">
<!-- Select2 -->
<link rel="stylesheet" href="<?php echo base_url('assets/bower_components/select2/dist/css/select2.min.css') ?>">
<link rel="stylesheet" href="<?php echo base_url('assets/plugins/fileinput/fileinput.min.css') ?>">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- icheck -->
<!-- iCheck for checkboxes and radio inputs -->
<!-- <link rel="stylesheet" href="<?php echo base_url('assets/plugins/iCheck/all.css') ?>"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> -->
<!-- jQuery 3 -->
<script src="<?php echo base_url('assets/bower_components/jquery/dist/jquery.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bower_components/jquery-ui/jquery-ui.min.js') ?>"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="<?php echo base_url('assets/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- Morris.js charts -->
<script src="<?php echo base_url('assets/bower_components/raphael/raphael.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bower_components/morris.js/morris.min.js') ?>"></script>
<!-- Sparkline -->
<script
src="<?php echo base_url('assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') ?>"></script>
<!-- jvectormap -->
<script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') ?>"></script>
<script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') ?>"></script>
<!-- jQuery Knob Chart -->
<script src="<?php echo base_url('assets/bower_components/jquery-knob/dist/jquery.knob.min.js') ?>"></script>
<!-- daterangepicker -->
<script src="<?php echo base_url('assets/bower_components/moment/min/moment.min.js') ?>"></script>
<script src="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.js') ?>"></script>
<!-- datepicker -->
<script
src="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') ?>"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') ?>"></script>
<!-- Slimscroll -->
<script src="<?php echo base_url('assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
<!-- FastClick -->
<script src="<?php echo base_url('assets/bower_components/fastclick/lib/fastclick.js') ?>"></script>
<!-- Select2 -->
<script src="<?php echo base_url('assets/bower_components/select2/dist/js/select2.full.min.js') ?>"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url('assets/dist/js/adminlte.min.js') ?>"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="<?php echo base_url('assets/dist/js/pages/dashboard.js') ?>"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url('assets/dist/js/demo.js') ?>"></script>
<script src="<?php echo base_url('assets/plugins/fileinput/fileinput.min.js') ?>"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/all.min.js"></script> -->
<!-- jQuery UI 1.11.4 -->
<script src="<?php echo base_url('assets/plugins/iCheck/icheck.min.js') ?>"></script>
<!-- DataTables -->
<script src="<?php echo base_url('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
<script
src="<?php echo base_url('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<style>
/* Styles de base */
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
overflow-x: hidden;
min-height: 100vh;
background-color: #ecf0f5;
}
/* Wrapper principal */
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
position: relative;
}
/* Contenu principal */
.content-wrapper {
flex: 1;
overflow-y: auto;
padding-bottom: 60px;
margin-left: 230px;
padding-top: 50px;
transition: margin-left 0.3s ease;
}
/* Footer fixe - Même taille et position que le content-wrapper */
.main-footer {
position: fixed;
bottom: 0;
left: 230px; /* collé à la sidebar */
margin-left: 2px; /* petit espace de 2px */
right: 0;
z-index: 1000;
background-color: #ecf0f5;
padding: 10px 15px;
border-top: 1px solid #d2d6de;
display: flex;
align-items: center;
justify-content: space-between;
transition: left 0.3s ease, margin-left 0.3s ease;
}
/* Sidebar */
.main-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
overflow-y: auto;
z-index: 810;
width: 230px;
background-color: #222d32;
transition: width 0.3s ease;
}
/* Header */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #3c8dbc;
height: 50px;
transition: margin-left 0.3s ease;
}
/* Logo */
.logo {
display: block;
padding: 15px;
text-align: center;
background-color: #367fa9;
color: white;
font-size: 18px;
font-weight: bold;
overflow: hidden;
white-space: nowrap;
transition: padding 0.3s ease;
}
.logo-mini {
display: none;
}
.logo-lg {
display: inline;
}
/* Bouton sidebar-toggle uniquement dans le header */
/* Position du bouton sidebar-toggle */
.sidebar-toggle {
position: fixed; /* Aligné avec ton header (ajuste si besoin) */
left: 230px; /* Collé à la sidebar en mode normal */
z-index: 2000; /* Au-dessus de tout */
background: #3c8dbc;
color: #fff;
padding: 8px 12px;
border-radius: 3px;
cursor: pointer;
transition: left 0.3s ease; /* Animation fluide */
}
/* En mode réduit */
.sidebar-collapsed .sidebar-toggle {
left: 70px; /* Suit la sidebar réduite */
}
/* Menu */
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
}
.sidebar-menu > li > a {
padding: 12px 15px;
display: block;
color: #b8c7ce;
text-decoration: none;
border-left: 3px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
}
.sidebar-menu > li > a:hover {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc;
}
.sidebar-menu i {
width: 25px;
text-align: center;
margin-right: 10px;
}
/* Sous-menu */
.treeview-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
background: #2c3b41;
}
.treeview-menu > li {
margin: 0;
}
.treeview-menu > li > a {
padding: 10px 15px 10px 45px;
display: block;
font-size: 14px;
color: #8aa4af;
text-decoration: none;
transition: all 0.3s ease;
}
.treeview-menu > li > a:hover {
color: #fff;
background: #1e282c;
}
/* Flèche */
.pull-right-container {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.fa-angle-left {
transition: transform 0.3s ease;
}
/* Affichage normal des sous-menus */
.treeview.menu-open > .treeview-menu {
display: block;
}
.treeview.menu-open > a > .pull-right-container > .fa-angle-left {
transform: rotate(-90deg);
}
/* Notifications */
.navbar-badge {
font-size: 1.4rem;
font-weight: 300;
padding: 2px 4px;
position: absolute;
right: 5px;
top: 9px;
}
.badge-warning {
color: #1f2d3d;
background-color: #ffc107;
}
/* Dropdown */
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
min-width: 280px;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
}
.dropdown-menu.show {
display: block;
}
/* === MODE REDUIT === */
.sidebar-collapsed .main-sidebar {
width: 70px;
overflow-y: auto;
overflow-x: visible;
/* Scrollbar à gauche en mode réduit */
direction: rtl;
}
.sidebar-collapsed .main-sidebar .sidebar-menu {
direction: ltr; /* Rétablir la direction normale pour le contenu */
}
.sidebar-collapsed .content-wrapper {
margin-left: 70px;
}
.sidebar-collapsed .main-header {
width: 100%;
margin-left: 0;
}
/* Footer en mode sidebar réduite - Même taille que le content-wrapper réduit */
.sidebar-collapsed .main-footer {
left: 70px; /* Même position que le content-wrapper en mode réduit */
margin-left: 2px;
}
/* LOGO CENTRÉ EN MODE RÉDUIT - AMÉLIORATION */
.sidebar-collapsed .logo {
padding: 15px 5px; /* Padding réduit horizontalement */
text-align: center; /* Centrage du texte */
display: flex; /* Utilisation de flexbox pour un meilleur centrage */
align-items: center; /* Centrage vertical */
justify-content: center; /* Centrage horizontal */
width: 70px; /* Largeur fixe correspondant à la sidebar réduite */
box-sizing: border-box; /* Inclure le padding dans la largeur */
}
.sidebar-collapsed .logo-mini {
display: inline-block; /* Affichage du logo mini */
text-align: center;
width: 100%;
}
.sidebar-collapsed .logo-lg {
display: none; /* Masquer le logo long */
}
.sidebar-collapsed .sidebar-menu > li > a > span {
display: none;
}
.sidebar-collapsed .sidebar-menu > li > a .pull-right-container {
display: none;
}
/* Icônes centrées - AMÉLIORATION */
.sidebar-collapsed .sidebar-menu > li > a {
text-align: center;
padding: 12px 0;
position: relative;
display: flex; /* Utilisation de flexbox */
align-items: center; /* Centrage vertical */
justify-content: center; /* Centrage horizontal */
width: 70px; /* Largeur fixe */
box-sizing: border-box;
}
.sidebar-collapsed .sidebar-menu i {
margin-right: 0;
display: block;
font-size: 18px;
width: auto; /* Largeur automatique pour les icônes */
text-align: center;
}
/* Tooltip pour afficher le texte du menu principal au survol */
.sidebar-collapsed .sidebar-menu > li > a::before {
content: attr(data-tooltip);
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
background: #2c3b41;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 9998;
font-size: 14px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
border-left: 3px solid #3c8dbc;
pointer-events: none;
}
.sidebar-collapsed .sidebar-menu > li:hover > a::before {
opacity: 1;
visibility: visible;
left: 75px;
}
/* Flèche pour le tooltip */
.sidebar-collapsed .sidebar-menu > li > a::after {
content: "";
position: absolute;
left: 70px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 5px 0;
border-color: transparent #2c3b41 transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 9999;
}
.sidebar-collapsed .sidebar-menu > li:hover > a::after {
opacity: 1;
visibility: visible;
}
/* Masquer les tooltips pour les éléments avec sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a::before,
.sidebar-collapsed .sidebar-menu > li.treeview > a::after {
display: none;
}
/* Améliorations pour les sous-menus en mode réduit */
.sidebar-collapsed .sidebar-menu > li {
position: relative;
}
/* Sous-menus affichés au hover en mode réduit - POSITIONNÉS DANS LE CONTENT-WRAPPER */
.sidebar-collapsed .treeview-menu {
position: fixed; /* Position fixe par rapport à la fenêtre */
left: 80px; /* 70px (sidebar) + 10px de marge */
top: 0; /* Sera ajusté par JavaScript pour aligner avec l'élément parent */
width: 180px; /* Taille réduite (était 200px) */
max-width: calc(100vw - 100px); /* Éviter les débordements */
z-index: 9999;
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
border-radius: 4px; /* Border-radius plus petit */
border-left: 2px solid #3c8dbc; /* Bordure plus fine */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
display: block !important;
background: #fff; /* Fond blanc pour se démarquer du content-wrapper */
border: 1px solid #d2d6de;
pointer-events: none;
transform: translateX(-20px) scale(0.95);
transform-origin: left center;
margin-top: 50px; /* Prendre en compte la hauteur du header fixe */
}
/* Style spécial pour les sous-menus dans le content-wrapper */
.sidebar-collapsed .treeview-menu {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
backdrop-filter: blur(8px); /* Blur réduit */
border: 1px solid rgba(210, 214, 222, 0.8);
}
/* RENDRE LES SOUS-MENUS CLIQUABLES - TOUJOURS ACTIFS */
.sidebar-collapsed .treeview:hover .treeview-menu {
pointer-events: auto !important; /* Force l'activation des clics */
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
}
/* Maintenir l'affichage ET les clics du sous-menu quand on le survole directement */
.sidebar-collapsed .treeview-menu:hover {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important; /* Garantir la cliquabilité */
transform: translateX(0) scale(1) !important;
}
/* Maintenir l'affichage quand on survole les liens à l'intérieur */
.sidebar-collapsed .treeview-menu > li > a:hover {
pointer-events: auto !important;
}
/* Zone de transition invisible élargie pour maintenir l'affichage */
.sidebar-collapsed .treeview::after {
content: "";
position: absolute;
top: -5px; /* Zone étendue vers le haut */
right: -30px; /* Zone très élargie vers la droite */
bottom: -5px; /* Zone étendue vers le bas */
width: 40px; /* Zone large pour atteindre facilement le content-wrapper */
background: transparent;
z-index: 9998;
pointer-events: none;
}
.sidebar-collapsed .treeview:hover::after {
pointer-events: auto;
}
/* Zone de maintien au-dessus du sous-menu */
.sidebar-collapsed .treeview-menu::before {
content: "";
position: absolute;
top: -10px;
left: -30px;
right: -10px;
height: 15px;
background: transparent;
z-index: 9999;
pointer-events: auto; /* Permettre l'interaction */
}
/* Style des liens dans les sous-menus pour le content-wrapper - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu > li > a {
padding: 8px 12px; /* Padding réduit (était 10px 15px) */
color: #495057; /* Couleur sombre pour contraster avec le fond blanc */
white-space: nowrap;
border-bottom: 1px solid rgba(210, 214, 222, 0.4);
transition: all 0.3s ease;
font-size: 12px; /* Taille de police réduite (était 13px) */
font-weight: 500;
display: block;
position: relative;
cursor: pointer; /* Curseur pointer pour indiquer la cliquabilité */
text-decoration: none; /* Supprimer le soulignement */
}
/* S'assurer que les liens sont cliquables */
.sidebar-collapsed .treeview-menu > li > a {
pointer-events: auto !important;
z-index: 10000; /* Z-index élevé pour garantir la cliquabilité */
}
.sidebar-collapsed .treeview-menu > li:last-child > a {
border-bottom: none;
border-radius: 0 0 4px 4px; /* Border-radius réduit */
}
.sidebar-collapsed .treeview-menu > li:first-child > a {
border-radius: 4px 4px 0 0; /* Border-radius réduit */
}
.sidebar-collapsed .treeview-menu > li > a:hover {
background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
color: #fff;
padding-left: 15px; /* Padding réduit pour le hover (était 20px) */
transform: translateX(2px); /* Translation plus petite */
box-shadow: inset 0 0 10px rgba(255,255,255,0.1); /* Ombre réduite */
}
/* Icônes dans les sous-menus - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu > li > a i {
margin-right: 6px; /* Marge réduite (était 8px) */
width: 14px; /* Largeur réduite (était 16px) */
text-align: center;
font-size: 11px; /* Taille d'icône réduite (était 12px) */
opacity: 0.7;
transition: all 0.3s ease;
}
.sidebar-collapsed .treeview-menu > li > a:hover i {
opacity: 1;
transform: scale(1.05); /* Réduction de l'effet de zoom */
}
/* En-tête du sous-menu avec le titre du parent - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu::after {
content: attr(data-parent-title);
display: block;
padding: 6px 12px 5px 12px; /* Padding réduit (était 8px 15px 6px 15px) */
background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
color: #fff;
font-size: 10px; /* Taille de police réduite (était 11px) */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px; /* Espacement réduit */
border-radius: 4px 4px 0 0; /* Border-radius réduit */
border-bottom: 1px solid rgba(255,255,255,0.2); /* Bordure plus fine */
margin-bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
}
/* Ajuster l'espacement du premier élément pour l'en-tête */
.sidebar-collapsed .treeview-menu > li:first-child {
margin-top: 22px; /* Espace pour l'en-tête réduite (était 25px) */
}
/* Flèche pointant vers la sidebar - TAILLE RÉDUITE */
.sidebar-collapsed .treeview-menu::before {
content: "";
position: absolute;
left: -5px; /* Position ajustée (était -6px) */
top: 12px; /* Position ajustée (était 15px) */
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 5px 0; /* Taille réduite (était 6px) */
border-color: transparent #3c8dbc transparent transparent;
filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.2)); /* Ombre réduite */
}
/* Indicateur visuel pour les menus avec sous-menus en mode réduit */
.sidebar-collapsed .sidebar-menu > li.treeview > a::after {
content: "▶";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 9px; /* Taille réduite (était 10px) */
color: #8aa4af;
transition: all 0.3s ease;
display: block !important; /* Forcer l'affichage de la flèche */
}
.sidebar-collapsed .sidebar-menu > li.treeview:hover > a::after {
color: #3c8dbc; /* Couleur plus visible au hover */
right: 6px;
transform: translateY(-50%) scale(1.2) rotate(90deg); /* Rotation de la flèche */
}
/* Amélioration de l'indicateur de sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a {
position: relative;
}
/* Ajout d'un petit point pour indiquer la présence d'un sous-menu */
.sidebar-collapsed .sidebar-menu > li.treeview > a::before {
content: "●";
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
font-size: 5px; /* Taille réduite (était 6px) */
color: #3c8dbc;
opacity: 0.7;
transition: all 0.3s ease;
}
.sidebar-collapsed .sidebar-menu > li.treeview:hover > a::before {
opacity: 1;
color: #fff;
transform: translateX(-50%) scale(1.3); /* Effet réduit */
}
/* Tooltip spécial pour les menus avec sous-menus - MASQUÉ EN MODE RÉDUIT */
.sidebar-collapsed .sidebar-menu > li.treeview > a.tooltip-disabled::before {
display: none !important; /* Masquer le tooltip pour les menus avec sous-menus */
}
/* Amélioration du survol des éléments principaux en mode réduit */
.sidebar-collapsed .sidebar-menu > li > a:hover {
background-color: #1e282c;
border-left-color: #3c8dbc;
transform: scale(1.03); /* Léger agrandissement au hover (était 1.05) */
}
/* Effet spécial pour les menus avec sous-menus */
.sidebar-collapsed .sidebar-menu > li.treeview > a:hover {
background-color: #1e282c;
border-left-color: #3c8dbc;
transform: scale(1.03); /* Effet réduit */
box-shadow: 1px 0 8px rgba(60, 141, 188, 0.3); /* Ombre pour indiquer l'ouverture */
}
/* Animation d'ouverture du sous-menu dans le content-wrapper */
.sidebar-collapsed .treeview:hover .treeview-menu {
animation: slideInFromSidebar 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Durée réduite */
}
@keyframes slideInFromSidebar {
0% {
opacity: 0;
transform: translateX(-20px) scale(0.95); /* Distance réduite */
filter: blur(2px); /* Effet de flou réduit */
}
60% {
opacity: 0.8;
transform: translateX(3px) scale(1.01); /* Distance réduite */
filter: blur(0.5px); /* Effet de flou réduit */
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
}
}
/* Positionnement dynamique basé sur la position de l'élément parent */
.sidebar-collapsed .sidebar-menu > li.treeview {
position: relative;
}
/* Ajustement automatique de la position verticale */
.sidebar-collapsed .sidebar-menu > li:nth-child(1) .treeview-menu { top: 50px; } /* 0px + header */
.sidebar-collapsed .sidebar-menu > li:nth-child(2) .treeview-menu { top: 94px; } /* ~44px par item */
.sidebar-collapsed .sidebar-menu > li:nth-child(3) .treeview-menu { top: 138px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(4) .treeview-menu { top: 182px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(5) .treeview-menu { top: 226px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(6) .treeview-menu { top: 270px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(7) .treeview-menu { top: 314px; }
.sidebar-collapsed .sidebar-menu > li:nth-child(8) .treeview-menu { top: 358px; }
/* Adaptation responsive du sous-menu dans le content-wrapper - TAILLES RÉDUITES */
@media (max-width: 992px) {
.sidebar-collapsed .treeview-menu {
width: 150px; /* Largeur réduite pour tablettes (était 170px) */
left: 75px;
}
}
@media (max-width: 768px) {
.sidebar-collapsed .treeview-menu {
width: 130px; /* Largeur réduite pour mobile (était 150px) */
left: 10px;
right: auto;
max-width: calc(100vw - 20px);
}
/* Réduire encore plus les éléments sur mobile */
.sidebar-collapsed .treeview-menu > li > a {
padding: 6px 10px; /* Padding réduit (était 8px 12px) */
font-size: 11px; /* Taille réduite (était 12px) */
}
.sidebar-collapsed .treeview-menu > li > a i {
margin-right: 5px; /* Marge réduite (était 6px) */
width: 12px; /* Largeur réduite (était 14px) */
font-size: 10px; /* Taille réduite (était 11px) */
}
}
/* Scrollbar standard pour mode normal */
.main-sidebar::-webkit-scrollbar {
width: 8px;
}
.main-sidebar::-webkit-scrollbar-track {
background: #1a2226;
}
.main-sidebar::-webkit-scrollbar-thumb {
background: #3c8dbc;
border-radius: 4px;
}
.main-sidebar::-webkit-scrollbar-thumb:hover {
background: #367fa9;
}
/* Scrollbar très fine pour le mode réduit - POSITIONNÉE À GAUCHE */
.sidebar-collapsed .main-sidebar::-webkit-scrollbar {
width: 4px; /* Scrollbar très fine */
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-track {
background: rgba(26, 34, 38, 0.8);
border-radius: 0;
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb {
background: rgba(60, 141, 188, 0.7);
border-radius: 2px;
transition: all 0.3s ease;
}
.sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(54, 127, 169, 0.9);
}
/* Pour Firefox - Scrollbar fine en mode réduit */
.sidebar-collapsed .main-sidebar {
scrollbar-width: thin;
scrollbar-color: rgba(60, 141, 188, 0.7) rgba(26, 34, 38, 0.8);
}
/* Amélioration de la zone de scroll pour une meilleure UX */
.sidebar-collapsed .main-sidebar {
padding-left: 2px; /* Petit espace pour la scrollbar à gauche */
padding-right: 0;
}
/* Indicateur de scroll en mode réduit - À GAUCHE */
.sidebar-collapsed .main-sidebar::before {
content: "";
position: absolute;
top: 0;
left: 0; /* Indicateur positionné à gauche */
width: 1px;
height: 100%;
background: linear-gradient(to bottom,
rgba(60, 141, 188, 0.3) 0%,
rgba(60, 141, 188, 0.1) 50%,
rgba(60, 141, 188, 0.3) 100%);
pointer-events: none;
z-index: 1;
}
/* Animation douce pour le scroll */
.sidebar-collapsed .main-sidebar {
scroll-behavior: smooth;
}
/* Responsive */
@media (max-width: 768px) {
.main-sidebar {
margin-left: -230px;
}
.content-wrapper {
margin-left: 0;
}
.main-header {
width: 100%;
margin-left: 0;
}
/* Footer en mode mobile - Même taille que le content-wrapper */
.main-footer {
left: 0; /* Même position que le content-wrapper sur mobile */
}
.sidebar-mobile-open .main-sidebar {
margin-left: 0;
}
.sidebar-mobile-open .content-wrapper {
margin-left: 0;
}
.sidebar-mobile-open .main-footer {
left: 0; /* Footer suit le content-wrapper */
}
.sidebar-collapsed .treeview-menu {
left: 70px;
width: 150px; /* Largeur réduite (était 180px) */
}
}
</style>