?
ELwebshll2019
<!-- ===== Signature visuelle des éléments IA (Ashkara) — dégradé + reflet au survol ===== -->
<style>
.ai-chip{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#0ec6d5 0%,#7a5cff 100%);color:#fff !important;border:none;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:600;line-height:1.2;box-shadow:0 3px 10px rgba(101,76,255,.22);position:relative;overflow:hidden;transition:box-shadow .3s ease;text-decoration:none;}
.ai-chip::before{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.ai-chip:hover,.ai-chip:focus{color:#fff !important;box-shadow:0 6px 16px rgba(101,76,255,.4);}
.ai-chip:hover::before,.ai-chip:focus::before{left:130%;}
.ai-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#0ec6d5 0%,#7a5cff 100%);color:#fff !important;border:none;border-radius:10px;padding:9px 18px;font-weight:600;box-shadow:0 4px 12px rgba(101,76,255,.25);position:relative;overflow:hidden;transition:box-shadow .3s ease;text-decoration:none;}
.ai-btn::before{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.ai-btn:hover,.ai-btn:focus{color:#fff !important;box-shadow:0 6px 20px rgba(101,76,255,.4);}
.ai-btn:hover::before,.ai-btn:focus::before{left:130%;}
.ai-accent{color:#7a5cff !important;}
</style>
<header class="main-header navbar-light header-sticky header-sticky-smart header-mobile-lg">
<div class="sticky-area">
<div class="container" dir="rtl">
<nav class="navbar navbar-expand-lg px-0">
<a class="navbar-brand" href="index.php">
<img src="images/ashkara5.png" alt="ashkara" style="width:160px;" class="d-none d-lg-inline-block">
<img src="images/ashkara5.png" alt="ashkara" style="width:160px;" class="d-inline-block d-lg-none">
</a>
<!-- Bouton hamburger pour mobile -->
<button class="navbar-toggler border-0 px-0" type="button" data-toggle="collapse" data-target="#primaryMenu01" aria-controls="primaryMenu01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mt-3 mt-lg-0 mx-auto flex-grow-0" id="primaryMenu01">
<!-- En-tête du menu mobile : logo (titre) + bouton fermer -->
<div class="mobile-menu-header d-lg-none">
<a href="index.php" class="mobile-menu-brand">
<img src="images/ashkara5.png" alt="אשכרה">
</a>
<button type="button" class="mobile-menu-close" aria-label="סגור תפריט">
<i class="far fa-times"></i>
</button>
</div>
<ul class="navbar-nav hover-menu main-menu px-0 mx-lg-n4" style="direction: rtl;">
<li id="navbar-item-home" aria-haspopup="true" aria-expanded="false" class="nav-item dropdown py-2 py-lg-5 px-0 px-lg-4">
<a class="nav-link p-0" href="index.php">
<i class="far fa-home"></i><span>ראשי</span>
</a>
</li>
<li id="navbar-item-property" aria-haspopup="true" aria-expanded="false" class="nav-item dropdown py-2 py-lg-5 px-0 px-lg-4">
<a class="nav-link p-0" href="listing-all-properties.php">
<i class="far fa-building"></i><span>נכסים להשכרה</span>
</a>
</li>
<li id="navbar-item-property" aria-haspopup="true" aria-expanded="false" class="nav-item dropdown py-2 py-lg-5 px-0 px-lg-4">
<a class="nav-link p-0" href="about-us.php">
<i class="far fa-info-circle"></i><span>אודותינו</span>
</a>
</li>
<li id="navbar-item-property" aria-haspopup="true" aria-expanded="false" class="nav-item dropdown py-2 py-lg-5 px-0 px-lg-4">
<a class="nav-link p-0" href="contact-us.php">
<i class="far fa-envelope"></i><span>צור קשר</span>
</a>
</li>
<!-- Options de connexion/compte pour mobile uniquement -->
<li class="nav-item d-lg-none mobile-user-section">
<?php if($_SESSION['user']['id'] !=""){ ?>
<a class="nav-link p-0" href="dashboard-home.php">
<i class="fas fa-user-circle"></i> שלום <?php echo $_SESSION['user']['name']; ?>
</a>
<?php }else{ ?>
<a class="nav-link p-0" data-toggle="modal" href="#login-register-modal">
<i class="fas fa-lock"></i> כניסת משתמש
</a>
<?php } ?>
</li>
<?php if($_SESSION['user']['id'] !=""){
$messages = mysqli_query($link, "SELECT m.*, u.name FROM `rent_messages` m
INNER JOIN `rent_users` u ON m.id_sender = u.id
WHERE (m.id_sender = ".$_SESSION['user']['id']." OR m.id_receiver = ".$_SESSION['user']['id'].") AND m.status_mess_read = 'לא נקראה'
ORDER BY m.date_message DESC");
$row_cnt_mess = mysqli_num_rows($messages);
?>
<li class="nav-item d-lg-none mobile-user-section">
<a class="nav-link p-0" href="dashboard-my-messages.php">
<i class="fad fa-envelope-square"></i> הודעות
<?php if($row_cnt_mess > 0){ ?>
<span class="badge badge-primary"><?=$row_cnt_mess?></span>
<?php } ?>
</a>
</li>
<?php } ?>
</ul>
</div>
<div class="d-none d-lg-block">
<ul class="navbar-nav flex-row justify-content-lg-end d-flex flex-wrap text-body py-2">
<li class="nav-item" style="padding-top:20px;"><?php
if($_SESSION['user']['id'] !=""){
echo "<a style=\"background-color: #0ec6d5; color: white; padding: 8px 16px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease;\" onmouseover=\"this.style.backgroundColor='#4dd4e0'\" onmouseout=\"this.style.backgroundColor='#0ec6d5'\" href=\"dashboard-home.php\">שלום ".$_SESSION['user']['name']."</a>";
}else{
?>
<a class="nav-link px-2" data-toggle="modal" href="#login-register-modal" style="background-color: #0ec6d5; color: white; padding: 8px 16px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#4dd4e0'" onmouseout="this.style.backgroundColor='#0ec6d5'">כניסת משתמש <i class="fas fa-lock"></i></a>
<?php }?>
</li>
<li class="nav-item">
<?php
if($_SESSION['user']['id'] !=""){
$messages = mysqli_query($link, "SELECT m.*, u.name FROM `rent_messages` m
INNER JOIN `rent_users` u ON m.id_sender = u.id
WHERE (m.id_sender = ".$_SESSION['user']['id']." OR m.id_receiver = ".$_SESSION['user']['id'].") AND m.status_mess_read = 'לא נקראה'
ORDER BY m.date_message DESC");
$row_cnt_mess = mysqli_num_rows($messages);
?>
<a class="nav-link px-2 position-relative" href="dashboard-my-messages.php" style="padding-top:20px;" title="הודעות">
<i class="fad fa-envelope-square fs-large-6"></i>
<span class="badge badge-primary badge-circle badge-absolute"><?=$row_cnt_mess?></span>
</a>
<a class="nav-link px-2" href="javascript:;" id="disconnect" style="padding-top:20px; padding-right:0 !important;" title="יציאה">
<i class="fad fa-sign-out-alt fs-large-6"></i>
</a>
<?php }?>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<!-- Styles pour le menu mobile hamburger -->
<style>
/* Style du bouton hamburger */
.navbar-toggler {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}
.navbar-toggler-icon {
width: 25px;
height: 2px;
background-color: #333;
display: block;
position: relative;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: '';
width: 25px;
height: 2px;
background-color: #333;
display: block;
position: absolute;
transition: all 0.3s ease;
}
.navbar-toggler-icon::before {
top: -8px;
}
.navbar-toggler-icon::after {
top: 8px;
}
/* Animation du hamburger quand ouvert */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
background-color: transparent;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
transform: rotate(45deg);
top: 0;
background-color: #fff;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
transform: rotate(-45deg);
top: 0;
background-color: #fff;
}
/* Quand le menu est ouvert, on masque le hamburger : le bouton fermer interne le remplace */
.navbar-toggler[aria-expanded="true"] {
display: none;
}
/* Menu mobile */
@media (max-width: 991px) {
.navbar-collapse {
position: fixed;
top: 0;
right: 0;
width: 84%;
max-width: 320px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
background-color: #ffffff !important;
background-image: none !important;
box-shadow: -6px 0 24px rgba(14, 198, 213, 0.18);
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
z-index: 999;
padding: 0 0 24px 0;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-collapse.show {
transform: translateX(0);
}
.navbar-collapse.collapsing {
transform: translateX(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* En-tête du menu : logo (titre) + bouton fermer */
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 auto;
padding: 18px 18px 14px;
margin-bottom: 6px;
border-bottom: 1px solid #eef2f4;
direction: rtl;
}
.mobile-menu-header .mobile-menu-brand img {
width: 128px;
height: auto;
}
.mobile-menu-close {
border: none;
background: #f3f6f7;
color: #8c99a2;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 15px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus {
background: #0ec6d5;
color: #ffffff;
outline: none;
}
.navbar-nav {
flex-direction: column;
width: 100%;
padding: 0 14px !important;
}
.navbar-nav .nav-item {
width: 100%;
padding: 0 !important;
margin-bottom: 0;
}
/* Fin séparateur entre les items principaux */
.navbar-nav > .nav-item:not(.mobile-user-section) + .nav-item:not(.mobile-user-section) {
border-top: 1px solid #f4f6f7;
}
.navbar-nav .nav-link {
padding: 13px 16px !important;
display: flex;
align-items: center;
width: 100%;
text-align: right;
color: #3a4750 !important;
font-weight: 500;
font-size: 15px;
border-radius: 8px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.navbar-nav .nav-link i {
width: 20px;
margin-left: 12px;
color: #0ec6d5;
font-size: 15px;
text-align: center;
flex: 0 0 auto;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
background-color: rgba(14, 198, 213, 0.08);
color: #0ec6d5 !important;
}
/* Section utilisateur : boutons fins */
.mobile-user-section {
margin-top: 10px;
padding: 0 4px;
}
.nav-item:not(.mobile-user-section) + .mobile-user-section {
margin-top: 18px;
}
.mobile-user-section .nav-link {
justify-content: center;
color: #ffffff !important;
font-weight: 600;
font-size: 14px;
background-color: #0ec6d5;
border-radius: 10px;
padding: 11px 16px !important;
box-shadow: 0 4px 12px rgba(14, 198, 213, 0.22);
}
.mobile-user-section .nav-link i {
color: #ffffff;
width: auto;
margin-left: 8px;
}
.mobile-user-section .nav-link:hover,
.mobile-user-section .nav-link:focus {
background-color: #0bb6c4;
color: #ffffff !important;
}
/* 2e bouton (הודעות) en version douce pour le différencier */
.mobile-user-section + .mobile-user-section .nav-link {
background-color: rgba(14, 198, 213, 0.10);
color: #0a8e99 !important;
box-shadow: none;
}
.mobile-user-section + .mobile-user-section .nav-link i {
color: #0a8e99;
}
.mobile-user-section + .mobile-user-section .nav-link:hover {
background-color: rgba(14, 198, 213, 0.18);
color: #0a8e99 !important;
}
.mobile-user-section .badge {
background-color: #ffffff;
color: #0ec6d5;
padding: 2px 7px;
border-radius: 10px;
font-size: 11px;
margin-right: 6px;
}
/* Voile sombre : élément dédié SOUS le panneau (n'assombrit plus le panneau) */
.menu-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(20, 30, 40, 0.45);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.menu-backdrop.show {
opacity: 1;
visibility: visible;
}
}
/* Espace entre l'icône et le titre dans le menu desktop (site RTL) */
@media (min-width: 992px) {
.navbar-nav .nav-link i {
margin-left: 8px;
}
}
</style>
<!-- Script pour améliorer le comportement du menu mobile -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Voile sombre derrière le menu (synchronisé avec l'ouverture/fermeture)
var backdrop = document.createElement('div');
backdrop.className = 'menu-backdrop';
document.body.appendChild(backdrop);
var $menu = $('#primaryMenu01');
$menu.on('show.bs.collapse', function() { backdrop.classList.add('show'); });
$menu.on('hide.bs.collapse', function() { backdrop.classList.remove('show'); });
// Bouton fermer interne (dans l'en-tête du menu)
var closeBtn = document.querySelector('.mobile-menu-close');
if (closeBtn) {
closeBtn.addEventListener('click', function() {
document.querySelector('.navbar-toggler').click();
});
}
// Fermer le menu en cliquant sur un lien
var navLinks = document.querySelectorAll('#primaryMenu01 .nav-link');
navLinks.forEach(function(link) {
link.addEventListener('click', function() {
var navbar = document.getElementById('primaryMenu01');
if (navbar.classList.contains('show')) {
var toggler = document.querySelector('.navbar-toggler');
toggler.click();
}
});
});
// Fermer le menu en cliquant en dehors
document.addEventListener('click', function(event) {
var navbar = document.getElementById('primaryMenu01');
var toggler = document.querySelector('.navbar-toggler');
if (navbar.classList.contains('show') &&
!navbar.contains(event.target) &&
!toggler.contains(event.target)) {
toggler.click();
}
});
// Script de déconnexion
$(document).on('click', "#disconnect", function() {
if (confirm('האם אתה בטוח שאתה רוצה להתנתק?')) {
$.post("disconnect.php");
setTimeout(function() {
window.location.href = "index.php";
}, 500);
}
});
});
</script>