Base Directory:
/home/ecedu/public_html/cce/Views/layouts
View File: mobile-side.php
<!-- ░░░ Mobile-Side
<div class="mobile-side in-mobile">
<button id="back-menu"
class="back-menu back-menu-start border-0 bg-transparent"
aria-label="إغلاق القائمة">
<i class="bi bi-x-lg" style="font-size:2rem; line-height:1;"></i>
</button>
<nav id="mobile-menu"
class="menu-mobile d-flex flex-column push push-start shadow-r-sm bg-white"
aria-label="القائمة الجانبية">
<div class="logo-sidenav p-2 text-center bg-white">
<a href="index.php?lang=<?= $lang ?>" class="navbar-brand custom-logo-link">
<img src="<?= $logo1;?>"
class="img-fluid w-100" alt="شعار الموقع"
loading="lazy" decoding="async">
</a>
<?= edit_image(1);?>
</div>
<div class="mb-5"></div>
<div class="sidenav-menu">
<div id="sid-menu" class="nav flex-column list-unstyled px-3 sidenav-menu mt-1">
<?= renderMenu($menu, $lang, true); ?>
</div>
</div>
<div class="text-center py-3 mt-auto border-top">
<small><?= htmlspecialchars($L['copyright']) ?></small>
</div>
</nav>
</div>
░░░ -->
<?php
// ——— نقل الدوال المشتركة خارج الشرط ———
if (!function_exists('getLocalizedTitle')) {
function getLocalizedTitle($news, $lang){ return $news['title'] ?? ''; }
}
if (!function_exists('getImagePath')) {
function getImagePath($news, $type_id){ return $news['image'] ?? 'assets/img/placeholder.png'; }
}
if (!function_exists('formatNewsDate')) {
function formatNewsDate($news){ return $news['news_date'] ?? ''; }
}
if (!function_exists('getItemTitle')) {
function getItemTitle($title, $lang) {
return is_array($title) ? ($title[$lang] ?? $title['ar'] ?? '') : $title;
}
}
// aria-id مميز للـ dropdown
function buildDropdownId($prefix, $id) {
return $prefix . '-' . preg_replace('~[^a-zA-Z0-9_-]~','', (string)$id);
}
// ——— دالة الحالة 1 المعدلة ———
function renderMenuItem($item, $level = 0, $lang = 'ar', $isMobile = false) {
$type = $item['type'] ?? 'link';
$hasChildren = !empty($item['items']) && is_array($item['items']);
$type_id = $item['type_id'] ?? null;
$isMega = $type === 'mega';
$isDropdown = $type === 'dropdown';
$isLink = $type === 'link';
$layout = $item['layout'] ?? ($isMega ? 'grid' : 'list');
$liClasses = ['menu-item','nav-item'];
$aClasses = [];
if ($isMega || $isDropdown) {
$liClasses[] = 'menu-item-has-children';
$liClasses[] = 'dropdown';
if ($isMega) $liClasses[] = 'mega-dropdown';
}
// class للرابط حسب المستوى والنظام
if ($level === 0) {
$aClasses = $isMega || $isDropdown ? ['dropdown-toggle','nav-link'] : ['nav-link'];
} else {
$aClasses = ($isMega || $isDropdown) ? ['dropdown-toggle'] : ['dropdown-item'];
}
$dropId = ($isMega || $isDropdown) ? buildDropdownId('menu-item-dropdown', $item['id'] ?? uniqid()) : null;
$aria = ($isMega || $isDropdown) ? ' data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="'.$dropId.'"' : '';
// <li>
$html = '<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" class="'.implode(' ', $liClasses).'"';
if (!empty($item['id'])) $html .= ' id="menu-item-'.htmlspecialchars((string)$item['id'], ENT_QUOTES,'UTF-8').'"';
$html .= '>';
// <a>
$title = htmlspecialchars($item['title'] ?? '', ENT_QUOTES, 'UTF-8');
$href = htmlspecialchars($item['link'] ?? '#', ENT_QUOTES, 'UTF-8');
$html .= '<a title="'.$title.'" href="'.$href.'" class="'.implode(' ', $aClasses).'"'.($aria ?: '').'>'.$title.'</a>';
// الأطفال: dropdown عادي
if ($hasChildren && $isDropdown) {
$html .= '<ul class="dropdown-menu" role="menu" aria-labelledby="'.$dropId.'">';
foreach ($item['items'] as $child) {
$html .= renderMenuItem($child, $level + 1, $lang, $isMobile);
}
$html .= '</ul>';
}
// الأطفال: mega
if ($hasChildren && $isMega) {
if ($layout === 'list') {
$html .= '<ul class="dropdown-menu" role="menu" aria-labelledby="'.$dropId.'">';
foreach ($item['items'] as $child) {
$child = array_merge($child, ['type' => ($child['type'] ?? 'link')]);
$html .= renderMenuItem($child, $level + 1, $lang, $isMobile);
}
$html .= '</ul>';
} else {
// layout = grid (شبكة بطاقات المقالات)
$html .= '<div class="dropdown-menu mega w-100 shadow-lrb-lg px-3 py-0 depth_0" role="menu" aria-labelledby="'.$dropId.'">';
$html .= '<div class="block-area"><div class="row">';
foreach (array_slice($item['items'], 0, 4) as $news) {
$titleNews = htmlspecialchars(getLocalizedTitle($news, $lang), ENT_QUOTES, 'UTF-8');
$imagePath = htmlspecialchars(getImagePath($news, $type_id), ENT_QUOTES, 'UTF-8');
$dateStr = htmlspecialchars(formatNewsDate($news), ENT_QUOTES, 'UTF-8');
$newsId = (int)($news['news_id'] ?? 0);
$html .= '<article class="col-12 col-sm-6 col-md-4 while-post mb-4 col-lg-3">';
$html .= '<div class="card card-full hover-a">';
$html .= '<div class="ratio_203-114 image-wrapper">';
$html .= '<a href="article.php?id='.$newsId.'">';
$html .= '<img class="img-fluid lazy" src="assets/img/lazy-empty.png" data-src="'.$imagePath.'" alt="'.$titleNews.'">';
if ((int)$type_id === 6) {
$html .= '<div class="post-type-icon"><span class="fa-stack-sea text-primary">';
$html .= '<svg width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">';
$html .= '<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>';
$html .= '</svg>';
$html .= '</span></div>';
}
$html .= '</a>';
$html .= '</div>';
$html .= '<div class="card-body">';
$html .= '<h2 class="card-title h5"><a href="article.php?id='.$newsId.'">'.$titleNews.'</a></h2>';
$html .= '<div class="card-text text-muted small">'.$dateStr.'</div>';
$html .= '</div>';
$html .= '</div>';
$html .= '</article>';
}
$html .= '</div></div>';
$html .= '</div>';
}
}
$html .= '</li>';
return $html;
}
function renderNewMenu(array $items, string $lang = "ar", bool $isMobile = false, int $level = 0, bool $st = false): string
{
$html = '';
$m = '';
$currentId = $_GET['i'] ?? 1;
foreach ($items as $item) {
$title = getItemTitle($item['title'], $lang);
$id = $item['id']?? -1;
$icon = $item['icon'] ?? '';
$hasChildren = !empty($item['children']);
$link = $id == -1 ? '' : (($id == 0) ? 'index.php?lang=' . $lang : 'list-news.php?i=' . $id . '&lang=' . $lang);
$iconHtml = $icon ? "<i class='bi $icon me-2'></i>" : '';
$isActive = ($id == $currentId) ? ' active-text' : '';
$edit = ($id > 1) ? edit_news($id) : '';
// إنشاء IDs فريدة لكل عنصر أكورديون
$parentId = 'parent-' . ($item['parent_id'] ?? 'root');
$accordionId = 'accordion-' . $id . '-' . uniqid();
$headingId = 'heading-' . $accordionId;
$collapseId = 'collapse-' . $accordionId;
// إضافة كلاس بناءً على وجود أبناء
$itemClass = $hasChildren ? 'has-children' : 'no-children';
/* ---------------------------------------------------
* فرع الموبايل (أكورديون)
* --------------------------------------------------*/
if ($isMobile) {
if ($hasChildren) {
$html .= "
<div class='accordion-item $m $itemClass' data-parent='#$parentId'>
<h2 class='accordion-header' id='$headingId'>
<button class='accordion-button accordion-button-arrow collapsed'
type='button'
data-bs-toggle='collapse'
data-bs-target='#$collapseId'
aria-expanded='false'
aria-controls='$collapseId'>
$iconHtml $title
</button>
</h2>
<div id='$collapseId' class='accordion-collapse collapse'
aria-labelledby='$headingId'
data-bs-parent='#$parentId'>
<div class='accordion-body'>
" . renderNewMenu($item['children'], $lang, true, $level + 1, true, $accordionId) . "
</div>
</div>
</div>";
} else {
if (!$st) {
$html .= "
<a href='$link' class='$itemClass'>
<div class='accordion-item mb-1'>
<h2 class='accordion-header'>
<button class='accordion-button accordion-button-arrow-1 collapsed' type='button'>
$iconHtml $title
</button>
</h2>
</div>
</a>";
} else {
$html .= "
<a href='$link' class='$itemClass'>
<div class='accordion-item'>
<button class='accordion-button accordion-button-arrow-1 collapsed' type='button'>
$iconHtml $title
</button>
</div>
</a>";
}
}
} else {
// ↓↓ التعديل الرئيسى على المسافات ↓↓
$dropdownClass = $hasChildren ? 'dropdown' : '';
$aBaseClass = $hasChildren ? 'nav-link dropdown-toggle' : 'nav-link';
$aClass = $aBaseClass . ' py-2 px-2';
$aAttrs = $hasChildren
? "href='#' role='button' data-bs-toggle='dropdown' aria-expanded='false'"
: "href='$link'";
$edit = (!$hasChildren && $id > 1) ? edit_details($id) : '';
$html .= "
<li class='nav-item $dropdownClass li-nowrap $itemClass'>
<a class='$aClass text-capitalize d-inline-flex' $aAttrs>$iconHtml$title</a> $edit";
if ($hasChildren) {
$html .= "
<ul class='dropdown-menu p-4'>
" . renderNewMenu($item['children'], $lang, false, $level + 1) . "
</ul>";
}
$html .= "</li> ";
}
}
return $html;
}
// ——— الآن نبدأ الشرط ———
if ($showHeaderType == 1): ?>
<?php
// يرسم هيكل القائمة الجانبية للموبايل بالكامل للحالة 1
function renderMobileMenu($menuItems, $lang = 'ar') { ?>
<!-- mobile menu -->
<div class="mobile-side">
<!--Left Mobile menu-->
<div id="back-menu" class="back-menu back-menu-start">
<span class="hamburger-icon open">
<svg class="bi bi-x" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"></path>
</svg>
</span>
</div>
<nav id="mobile-menu" class="menu-mobile d-flex flex-column push push-start shadow-r-sm bg-white" aria-label="القائمة الجانبية">
<div class="mobile-content mb-auto">
<div class="logo-sidenav p-2">
<a href="index.php" class="navbar-brand custom-logo-link" rel="home">
<img src="<?= $logo1;?>"
class="img-fluid w-100" alt="شعار الموقع"
loading="lazy" decoding="async">
</a>
<?= edit_image(1);?>
</div>
<div class="sidenav-menu">
<nav class="navbar navbar-inverse">
<ul id="side-menu" class="nav navbar-nav list-group list-unstyled side-link">
<?php
foreach ($menuItems as $it) {
echo renderMenuItem($it, 0, $lang, true);
}
?>
</ul>
</nav>
</div>
</div>
<div class="text-center py-3 mt-auto border-top">
<small><?= htmlspecialchars($L['copyright']) ?></small>
</div>
</nav>
</div>
<?php }
// ——— الاستخدام ———
renderMobileMenu($menuItems, $lang ?? 'ar');
?>
<?php elseif ($showHeaderType == 2): ?>
<!-- ░░░ Mobile-Side ░░░ -->
<div class="mobile-side in-mobile">
<button id="back-menu"
class="back-menu back-menu-start border-0 bg-transparent"
aria-label="إغلاق القائمة">
<i class="bi bi-x-lg" style="font-size:2rem; line-height:1;"></i>
</button>
<nav id="mobile-menu"
class="menu-mobile d-flex flex-column push push-start shadow-r-sm bg-white"
aria-label="القائمة الجانبية">
<div class="logo-sidenav p-2 text-center bg-white">
<a href="index.php?lang=<?= $lang ?>" class="navbar-brand custom-logo-link">
<img src="<?= $logo1;?>"
class="img-fluid w-100" alt="شعار الموقع"
loading="lazy" decoding="async">
</a>
<?= edit_image(1);?>
</div>
<div class="mb-5"></div>
<div class="sidenav-menu">
<div id="sid-menu" class="nav flex-column list-unstyled px-3 sidenav-menu mt-1">
<?php
// استخدام دالة renderNewMenu الأصلية للحالة 2
echo renderNewMenu($menu, $lang, true);
?>
</div>
</div>
<div class="text-center py-3 mt-auto border-top">
<small><?= htmlspecialchars($L['copyright']) ?></small>
</div>
</nav>
</div>
<?php endif; ?>