143 lines
4.9 KiB
JavaScript
143 lines
4.9 KiB
JavaScript
$(function() {
|
|
// 1. Pastikan #top_menu ada di lokasi yang kamu mau
|
|
if ($(".ol-sidebar-content").length && $("#top_menu").length === 0) {
|
|
$(".ol-sidebar-content").prepend('<div id="top_menu"></div>');
|
|
}
|
|
|
|
// 2. Ambil nav sidebar asli
|
|
const $origNav = $(".ol-sidebar .sidebar-nav").first();
|
|
const $clone = $origNav.clone(true, true);
|
|
|
|
// 3. Bersihkan & ubah class utk versi topnav
|
|
$clone
|
|
.removeClass() // hapus "sidebar-nav"
|
|
.attr("id", "topnav-nav")
|
|
.addClass("topnav-nav");
|
|
|
|
// ubah UL root
|
|
$clone.find("> ul, > .px-14px, ul.px-14px").each(function() {
|
|
$(this).removeClass().addClass("topnav-root");
|
|
});
|
|
|
|
// ===== LEVEL 1 (sidebar-first-li) -> .topnav-item
|
|
$clone.find("li.sidebar-first-li").each(function() {
|
|
const $li = $(this);
|
|
|
|
const hasSub = $li.find("ul.first-sub-menu").length > 0;
|
|
const isActive = $li.hasClass("active"); // <== gunakan langsung class active asli
|
|
|
|
$li
|
|
.removeClass("sidebar-first-li first-li-have-sub active showMenu")
|
|
.addClass("topnav-item")
|
|
.toggleClass("has-sub", hasSub)
|
|
.toggleClass("is-active", isActive);
|
|
|
|
// Ambil <a> asli supaya kita bisa buat struktur icon + label
|
|
const $a = $li.children("a").first();
|
|
if ($a.length) {
|
|
const $icon = $a.find(".icon").first();
|
|
const $textNode = $a.find(".text span").first(); // <div class="text"><span>Course</span></div>
|
|
|
|
const labelText = $textNode.length ?
|
|
$textNode.text().trim() :
|
|
$a.text().trim();
|
|
|
|
// rebuild isi <a>
|
|
$a.empty();
|
|
|
|
if ($icon.length) {
|
|
$icon.addClass("topnav-icon");
|
|
$a.append($icon);
|
|
}
|
|
|
|
// Label utama kita bungkus dengan span.topnav-mainlabel
|
|
const $labelSpan = $('<span class="topnav-mainlabel"></span>').text(
|
|
labelText
|
|
);
|
|
$a.append($labelSpan);
|
|
}
|
|
});
|
|
|
|
// ===== LEVEL 2 WRAPPER UL (first-sub-menu) -> .topnav-dropdown
|
|
$clone.find("ul.first-sub-menu").each(function() {
|
|
$(this).removeClass("first-sub-menu").addClass("topnav-dropdown");
|
|
});
|
|
|
|
// ===== LEVEL 2 LI (sidebar-second-li) -> .topnav-subitem
|
|
$clone.find("li.sidebar-second-li").each(function() {
|
|
const $li2 = $(this);
|
|
|
|
const hasSub2 = $li2.find("ul.second-sub-menu").length > 0;
|
|
const isActive2 = $li2.hasClass("active"); // <== gunakan langsung class active asli
|
|
|
|
$li2
|
|
.removeClass("sidebar-second-li second-li-have-sub active")
|
|
.addClass("topnav-subitem")
|
|
.toggleClass("has-sub2", hasSub2)
|
|
.toggleClass("is-active", isActive2); // <-- ini yg akan bikin highlight Manage Courses
|
|
});
|
|
|
|
// ===== LEVEL 3 WRAPPER UL (second-sub-menu) -> .topnav-subdropdown
|
|
$clone.find("ul.second-sub-menu").each(function() {
|
|
$(this).removeClass("second-sub-menu").addClass("topnav-subdropdown");
|
|
});
|
|
|
|
// ===== LEVEL 3 LI (sidebar-third-li) -> .topnav-subsubitem
|
|
$clone.find("li.sidebar-third-li").each(function() {
|
|
const $li3 = $(this);
|
|
const isActive3 = $li3.hasClass("active");
|
|
|
|
$li3
|
|
.removeClass("sidebar-third-li active")
|
|
.addClass("topnav-subsubitem")
|
|
.toggleClass("is-active", isActive3);
|
|
});
|
|
|
|
// group title
|
|
$clone.find(".first-sub-menu-title").each(function() {
|
|
$(this)
|
|
.removeClass("first-sub-menu-title fs-14px mb-18px")
|
|
.addClass("topnav-group-title");
|
|
});
|
|
|
|
// just in case
|
|
$clone.find("div.text").addClass("topnav-text");
|
|
$clone.find("span.icon").addClass("topnav-icon");
|
|
|
|
// 4. Masukkan clone ke #top_menu
|
|
$("#top_menu").empty().append($clone);
|
|
|
|
// 5. Dropdown hover behavior
|
|
// level 1 hover → show .topnav-dropdown
|
|
$("#top_menu .topnav-item").each(function() {
|
|
const $li = $(this);
|
|
const $dd = $li.children(".topnav-dropdown");
|
|
if ($dd.length) {
|
|
$li.css("position", "relative");
|
|
$li
|
|
.on("mouseenter", function() {
|
|
$dd.stop(true, true).fadeIn(120);
|
|
})
|
|
.on("mouseleave", function() {
|
|
$dd.stop(true, true).fadeOut(120);
|
|
});
|
|
}
|
|
});
|
|
|
|
// level 2 hover → show .topnav-subdropdown
|
|
$("#top_menu .topnav-subitem").each(function() {
|
|
const $li2 = $(this);
|
|
const $dd2 = $li2.children(".topnav-subdropdown");
|
|
if ($dd2.length) {
|
|
$li2.css("position", "relative");
|
|
$li2
|
|
.on("mouseenter", function() {
|
|
$dd2.stop(true, true).fadeIn(120);
|
|
})
|
|
.on("mouseleave", function() {
|
|
$dd2.stop(true, true).fadeOut(120);
|
|
});
|
|
}
|
|
});
|
|
});
|