update menu

This commit is contained in:
2024-05-07 13:34:07 +07:00
parent 7b96c6d976
commit 6415cca99f
3 changed files with 23 additions and 55 deletions

View File

@@ -156,7 +156,7 @@ a {
.admin-menu-container {
position: relative;
overflow: auto;
background: #004e99;
background: #004180;
color: #fff;
width: 18%;
padding: 20px 0;
@@ -174,7 +174,7 @@ a {
height: 22px;
}
.admin-menu-container .menu-list {
margin: 50px 0;
margin: 50px 5px;
}
.admin-menu-container details[open] svg {
transform: rotate(90deg);
@@ -214,15 +214,17 @@ a {
.admin-menu-container .item {
display: flex;
align-items: center;
padding: 0 16px;
padding: 0 12px;
line-height: 36px;
transition: 0.3s all;
border-radius: 4px;
background: #004e99;
margin-bottom: 4px;
}
.admin-menu-container .item:hover {
background: #81b5e4;
.admin-menu-container .item:hover, .admin-menu-container .item.active {
background: #22a2ff;
}
.admin-menu-container .item:hover .icons {
.admin-menu-container .item:hover .icons, .admin-menu-container .item.active .icons {
filter: brightness(100);
}
.admin-menu-container .item .icons {
@@ -237,15 +239,6 @@ a {
padding: 13px 13px 13px 45px;
position: relative;
}
.admin-menu-container .sub-menu::before {
content: "";
width: 1px;
height: calc(100% - 39px);
background: #79b0e2;
position: absolute;
left: 20px;
top: 20px;
}
.admin-menu-container .sub-menu a {
display: block;
margin-bottom: 15px;
@@ -258,16 +251,6 @@ a {
font-weight: 700;
text-decoration: none;
}
.admin-menu-container .sub-menu a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 6px;
left: -28px;
}
.admin-menu-container .sub-menu a:last-child {
margin: 0;
}

View File

@@ -134,7 +134,7 @@ a {
.admin-menu-container {
position: relative;
overflow: auto;
background: #004e99;
background: #004180;
color: #fff;
width: 18%;
padding: 20px 0;
@@ -151,7 +151,7 @@ a {
}
}
.menu-list {
margin: 50px 0;
margin: 50px 5px;
}
details {
&[open] {
@@ -195,12 +195,15 @@ a {
.item {
display: flex;
align-items: center;
padding: 0 16px;
padding: 0 12px;
line-height: 36px;
transition: 0.3s all;
border-radius: 4px;
&:hover {
background: #81b5e4;
background: #004e99;
margin-bottom: 4px;
&:hover,
&.active {
background: #22a2ff;
.icons {
filter: brightness(100);
}
@@ -217,15 +220,6 @@ a {
.sub-menu {
padding: 13px 13px 13px 45px;
position: relative;
&::before {
content: "";
width: 1px;
height: calc(100% - 39px);
background: #79b0e2;
position: absolute;
left: 20px;
top: 20px;
}
a {
display: block;
margin-bottom: 15px;
@@ -237,16 +231,6 @@ a {
font-weight: 700;
text-decoration: none;
}
&::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #79b0e2;
position: absolute;
top: 6px;
left: -28px;
}
&:last-child {
margin: 0;
}

View File

@@ -29,10 +29,11 @@
<div class="admin-global-container">
<!-- Menu full -->
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="js-menu-big">
<div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh]" id="js-menu-big">
<a href="javascript:void(0)" class="icon-close" title="Thu gọn menu" id="js-hide-menu">
<i class="fa-solid fa-outdent"></i>
</a>
@@ -42,9 +43,9 @@
</a>
<div class="menu-list">
<a href="/" class="item">
<a href="/" class="item {% if global.module == 'home' %} active {% endif %}">
<i class="icons icon-home"></i>
<span class="title"> Dashboard </span>
<span class="title"> Home </span>
</a>
{% for _category in global.main_menu %}
@@ -52,7 +53,7 @@
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<details {% if _type==global.module %} open {% endif %}>
<summary class="item">
<summary class="item {% if _type == global.module %} active {% endif %}">
<div class="flex items-center">
{% if _type == 'order' %} <i class="icons icon-order"></i>
@@ -72,7 +73,7 @@
<span class="title"> {{ _category[1].name }} </span>
</div>
<i class="fa-solid fa-angle-right"></i>
<i class="fa-solid fa-chevron-right"></i>
</summary>
<div class="sub-menu">
@@ -112,7 +113,7 @@
</div>
<!-- Menu collapse -->
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh]"
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh] hidden"
id="js-menu-small">
<div>
<div