update menu

This commit is contained in:
2024-01-24 11:26:10 +07:00
parent 0c85c7a6f1
commit 16d4c7cc31
3 changed files with 87 additions and 46 deletions

View File

@@ -373,18 +373,31 @@
$(id).show();
})
$('#js-show-menu').click(function () {
$('#menu-big').removeClass('hidden');
$('#menu-small').addClass('hidden');
$('#js-form-search').removeClass('menu-hide')
})
// $('#js-show-menu').click(function () {
// $('#menu-big').removeClass('hidden');
// $('#menu-small').addClass('hidden');
// $('#js-form-search').removeClass('menu-hide')
// localStorage.setItem('menu_big', 'hidden');
// localStorage.removeItem("menu_small");
// })
$('#js-hide-menu').click(function () {
$('#menu-big').addClass('hidden');
$('#menu-small').removeClass('hidden');
$('#js-form-search').addClass('menu-hide')
})
// $('#js-hide-menu').click(function () {
// $('#menu-big').addClass('hidden');
// $('#menu-small').removeClass('hidden');
// $('#js-form-search').addClass('menu-hide')
// localStorage.setItem('menu_small', 'hidden');
// localStorage.removeItem("menu_big");
// })
// if (localStorage.getItem('menu_big') == 'hidden') {
// $('#menu-big').removeClass('hidden');
// $('#menu-small').addClass('hidden');
// $('#js-form-search').removeClass('menu-hide')
// } else {
// $('#menu-big').addClass('hidden');
// $('#menu-small').removeClass('hidden');
// $('#js-form-search').addClass('menu-hide')
// }
})
@@ -709,4 +722,34 @@
}
}
// Hàm để cập nhật trạng thái hiển thị menu và localStorage
function capNhatTrangThaiMenu(hideMenuBig) {
$('#menu-big').toggleClass('hidden', hideMenuBig);
$('#menu-small').toggleClass('hidden', !hideMenuBig);
$('#js-form-search').toggleClass('menu-hide', hideMenuBig);
localStorage.setItem(hideMenuBig ? 'menu_big' : 'menu_small', 'hidden');
localStorage.removeItem(hideMenuBig ? 'menu_small' : 'menu_big');
}
$(document).ready(function () {
// Sự kiện click để hiển thị menu
$('#js-show-menu').click(function () {
capNhatTrangThaiMenu(false);
});
// Sự kiện click để ẩn menu
$('#js-hide-menu').click(function () {
capNhatTrangThaiMenu(true);
});
// Kiểm tra localStorage và thiết lập trạng thái ban đầu của menu
const hideMenuBig = localStorage.getItem('menu_big') === 'hidden';
capNhatTrangThaiMenu(hideMenuBig);
})
</script>

View File

@@ -1,5 +1,4 @@
<div class="w-[100%]">
<div class="w-[100%] mb-[50px]">
<div class="text-sm breadcrumbs ml-[10px]">
<ul>
@@ -18,11 +17,8 @@
{% for _menu in page.product_menu %}
<a role="tab" href="/?module=product&view=form&part={{ _menu.id }}"
class="py-[7px] px-[15px] text-[#919699] block border-b-[1px] border-[#fafafb]">
class="py-[7px] px-[15px] text-[#919699] block border-b-[1px] border-[#fafafb] {% if _menu.is_current == 1 %}bg-[#0041E8] text-[#fff]{% endif %}">
{{ _menu.name }}
{% if _menu.is_current == 1 %}
- (current)
{% endif %}
</a>
{% endfor %}

View File

@@ -12,12 +12,12 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v=1.99.21" />
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v=1.99.21" />
<script src="{{ 'tailwindcss.js' | asset_url }}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
@@ -27,11 +27,12 @@
<body>
{{global|show_var}}
{{page|show_var}}
<div class="admin-global-container">
<!-- Menu cũ -->
<div class="admin-menu-container sticky top-0 bottom-0 h-[100vh] hidden" id="menu-big">
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="menu-big">
<a href="javascript:void(0)" class="icon-close" id="js-hide-menu">
<i class="fa-solid fa-outdent"></i>
</a>
@@ -202,7 +203,8 @@
</div>
<!-- Menu mới -->
<div class="admin-menu sticky top-0 bottom-0 h-[100vh] bg-[#004E99] flex flex-col justify-between" id="menu-small">
<div class="admin-menu box-menu sticky top-0 bottom-0 h-[100vh] bg-[#004E99] flex flex-col justify-between"
id="menu-small">
<div>
<div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">