Base Directory:
/home/ecedu/public_html/cce/Views/layouts
View File: main-layout.php
<?php include __DIR__ .'/main-func.php'; ?>
<!DOCTYPE html>
<html lang="<?= $lang ?>" dir="<?= $dir ?>" data-bs-theme="light">
<head>
<!--Required Meta Tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Title -->
<title><?= htmlspecialchars($L['site_title']) ?></title>
<meta name="description" content="<?= htmlspecialchars($L['site_title']) ?>">
<meta name="keywords" content="<?= htmlspecialchars($L['site_title']) ?>">
<!--App manifest-->
<link rel="manifest" href="assets/js/manifest.json">
<!--Favicon-->
<link rel="shortcut icon" href="assets/img/favicon/favicon.ico" type="image/x-icon">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" href="assets/img/favicon/apple-icon.png">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!--Styles-->
<link rel="stylesheet" href="assets/css/css2.css">
<link rel="stylesheet" href="assets/css/<?= $theme ?>.css">
<link rel="stylesheet" href="assets/css/main.css">
<style>
/* ——— الأساس: البنود الرئيسية 100% ومنع القص ——— */
#side-menu { display:block !important; }
#side-menu > li { width:100% !important; flex:0 0 100% !important; }
#side-menu > li > a.nav-link,
#side-menu > li > a.nav-link.dropdown-toggle {
display:block !important;
width:100% !important; max-width:100% !important;
text-align:right !important;
white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
padding:12px 16px !important; border-bottom:1px solid #eee;
}
#side-menu > li > a.nav-link.dropdown-toggle::after { float:left !important; margin-left:0 !important; }
#side-menu .text-truncate,
#side-menu > li > a.nav-link.text-truncate { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
/* ——— تصحيح تموضع القوائم داخل السايدبار ——— */
#mobile-menu #side-menu > li { position:static; }
#mobile-menu .navbar, #mobile-menu .nav { display:block !important; }
/* جميع القوائم الفرعية: مغلقة افتراضياً ومتموضعة عمودياً تحت بندها */
#mobile-menu .dropdown-menu {
display:none !important;
position:static !important; float:none !important; inset:auto !important; transform:none !important;
width:100% !important; margin:0 !important; padding:0 !important;
border:0 !important; box-shadow:none !important; background:transparent;
}
/* 🔒 لا نستخدم :hover إطلاقاً داخل السايدبار */
#mobile-menu .dropdown:hover > .dropdown-menu { display:none !important; }
/* ✅ افتح فقط القائمة الشقيقة للرابط الذي عليه التركيز (أو focus-visible) */
#mobile-menu li.dropdown > a.dropdown-toggle:focus + .dropdown-menu,
#mobile-menu li.dropdown > a.dropdown-toggle:focus-visible + .dropdown-menu {
display:block !important;
}
/* ✅ للمستويات الأعمق نفس المبدأ (داخل القوائم الفرعية) */
#mobile-menu li.dropdown .dropdown > a.dropdown-toggle:focus + .dropdown-menu,
#mobile-menu li.dropdown .dropdown > a.dropdown-toggle:focus-visible + .dropdown-menu {
display:block !important;
}
/* تنسيق عناصر داخل القوائم الفرعية */
#mobile-menu .dropdown-menu .dropdown-item,
#mobile-menu .dropdown-menu > li > a {
display:block; width:100%;
padding:10px 16px;
white-space:normal; text-align:right; background:#fff;
border-bottom:1px solid #eee;
}
/* مسافة بادئة للمستويات الأعمق */
#mobile-menu .dropdown-menu .dropdown-menu {
padding-right:12px; border-right:2px solid #f7f7f7; /* RTL */
}
/* تجاهل أي .show يضيفها Bootstrap */
#mobile-menu .dropdown-menu.show { display:none !important; }
/* للعناصر التي تحتوي على dropdown-menu (لديها أبناء) */
.nav-item:has(.dropdown-menu) {
margin-bottom: 15px;
}
/* للعناصر التي لا تحتوي على dropdown-menu (ليس لديها أبناء) */
.nav-item:not(:has(.dropdown-menu)) {
margin-bottom: 8px;
}
/* للموبايل - العناصر التي تحتوي على accordion-body */
.accordion-item:has(.accordion-body) {
margin-bottom: 12px !important;
}
.accordion-item:not(:has(.accordion-body)) {
margin-bottom: 6px !important;
}
</style>
</head>
<body class="boxed bg-repeat font-family" dir="<?= $dir ?>">
<!-- Sprites مخفية -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<symbol id="ico-sun" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="5" fill="currentColor"/>
<g stroke="currentColor" stroke-width="2" stroke-linecap="round">
<line x1="12" y1="1" x2="12" y2="4"/>
<line x1="12" y1="20" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="6.34" y2="6.34"/>
<line x1="17.66" y1="17.66" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="4" y2="12"/>
<line x1="20" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="6.34" y2="17.66"/>
<line x1="17.66" y1="6.34" x2="19.78" y2="4.22"/>
</g>
</symbol>
<symbol id="ico-moon" viewBox="0 0 24 24">
<path d="M21 12.79A9 9 0 0111.21 3
7 7 0 1019 14.79 9.05 9.05 0 0121 12.79z"
fill="currentColor"/>
</symbol>
</svg>
<?php include 'body-layout.php'; ?>
<!-- Scripts -->
<script src="assets/jquery/jquery-3.5.1.min.js"></script>
<script src="assets/jquery/popper.min.js"></script>
<!-- Bootstrap Bundle JS -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!--Vendor js-->
<script src="assets/js/hc-sticky.js"></script>
<script src="assets/js/flickity.pkgd.min.js"></script>
<script src="assets/js/lazyload.min.js"></script>
<script src="assets/js/SmoothScroll.js"></script>
<!--Theme js-->
<script src="assets/js/theme-rtl.js"></script>
<!--Minify js-->
<!-- <script src="dist/js/bundle-rtl.min.js"></script> -->
<script>
// ==============================
// إدارة الثيم: localStorage + prefers-color-scheme + data-bs-theme
// ==============================
(function(){
const root = document.documentElement; // <html>
const saved = localStorage.getItem('theme'); // "dark" | "light" | null
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initialDark = saved ? (saved === 'dark') : prefersDark;
applyTheme(initialDark);
updateToggleIcons(initialDark);
// دعم عدة أزرار .theme-toggle
document.querySelectorAll('.theme-toggle').forEach(btn => {
btn.addEventListener('click', () => {
const dark = !root.classList.contains('dark-mode');
applyTheme(dark);
localStorage.setItem('theme', dark ? 'dark' : 'light');
updateToggleIcons(dark);
});
});
// اجعل Bootstrap يعرف الثيم
function applyTheme(dark){
root.classList.toggle('dark-mode', dark);
root.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
}
// بدّل أيقونة الشمس/القمر
function updateToggleIcons(dark){
document.querySelectorAll('.theme-toggle use').forEach(useEl => {
useEl.setAttribute('href', dark ? '#ico-sun' : '#ico-moon');
useEl.setAttribute('xlink:href', dark ? '#ico-sun' : '#ico-moon'); // توافق قديم
});
document.querySelectorAll('.theme-toggle').forEach(b=>{
b.setAttribute('aria-label', dark ? 'Light mode' : 'Dark mode');
});
}
// Tooltips إن وُجدت
const tts = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tts.map(el => new bootstrap.Tooltip(el));
// أحداث إضافية لديك
window.addEventListener('scroll', function () {
if (typeof isHandleScroll !== 'undefined' && isHandleScroll) handleScroll();
});
if (typeof isListComment !== 'undefined' && isListComment) listComment();
})();
</script>
</body>
</html>