This commit is contained in:
2025-02-08 22:55:01 +07:00
parent 7299751c83
commit 9bdd0e435a
4 changed files with 38 additions and 149 deletions

View File

@@ -173,16 +173,6 @@ a {
.admin-menu-container .menu-logo img {
height: 22px;
}
.admin-menu-container .menu-list {
margin: 50px 5px;
}
.admin-menu-container details {
position: relative;
width: 100%;
}
.admin-menu-container details .item {
background: #004e99;
}
.admin-menu-container details[open] svg {
transform: rotate(90deg);
}
@@ -198,42 +188,11 @@ a {
.admin-menu-container details[open] .fa-angle-right {
transform: rotate(90deg);
}
.admin-menu-container .box-item {
position: relative;
}
.admin-menu-container .box-item .item {
background: #004e99;
}
.admin-menu-container summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-right: 16px;
border-radius: 4px;
position: relative;
transition: 0.3s all;
}
.admin-menu-container summary a {
padding: 8px 16px;
display: flex;
align-items: center;
}
.admin-menu-container svg {
position: absolute;
right: 16px;
transition: 0.3s all;
}
.admin-menu-container .item {
display: flex;
align-items: center;
padding: 0 12px;
line-height: 36px;
transition: 0.3s all;
border-radius: 4px;
margin-bottom: 4px;
position: relative;
}
.admin-menu-container .item.active {
background: #22a2ff;
}
@@ -254,23 +213,6 @@ a {
height: 20px;
margin-right: 13px;
}
.admin-menu-container .sub-hover {
display: none;
position: absolute;
left: 100%;
top: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.admin-menu-container .sub-hover a {
display: block;
padding: 10px 10px 10px 45px;
position: relative;
}
.admin-menu-container .sub-hover a:hover {
text-decoration: underline;
}
.admin-menu-container .title-main {
width: 100%;
}

File diff suppressed because one or more lines are too long

View File

@@ -151,15 +151,7 @@ a {
height: 22px;
}
}
.menu-list {
margin: 50px 5px;
}
details {
position: relative;
width: 100%;
.item {
background: #004e99;
}
&[open] {
svg {
transform: rotate(90deg);
@@ -179,42 +171,12 @@ a {
}
}
.box-item {
position: relative;
.item {
background: #004e99;
}
}
summary {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding-right: 16px;
border-radius: 4px;
position: relative;
transition: 0.3s all;
a {
padding: 8px 16px;
display: flex;
align-items: center;
}
}
svg {
position: absolute;
right: 16px;
transition: 0.3s all;
}
.item {
display: flex;
align-items: center;
padding: 0 12px;
line-height: 36px;
transition: 0.3s all;
border-radius: 4px;
margin-bottom: 4px;
position: relative;
&.active {
background: #22a2ff;
.icons {
@@ -237,24 +199,6 @@ a {
margin-right: 13px;
}
}
.sub-hover {
display: none; // Ẩn mặc định
position: absolute;
left: 100%;
top: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
a {
display: block;
padding: 10px 10px 10px 45px;
position: relative;
&:hover {
text-decoration: underline;
}
}
}
.title-main {
width: 100%;
}

View File

@@ -34,8 +34,9 @@
<img src="{{ 'logo.png' | asset_url }}" />
</a>
<div class="menu-list">
<a href="/" class="item {% if global.module == 'home' %} active {% endif %}">
<div class="menu-list m-[50px_5px]">
<a href="/"
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px] {% if global.module == 'home' %} active {% endif %}">
<i class="icons icon-home"></i>
<span class="title"> Home </span>
</a>
@@ -44,23 +45,29 @@
{% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %}
<details class="dropdown dropdown-hover" {% if _type==global.module %} open {% endif %}>
<summary class="item {% if _type == global.module %} active {% endif %}" tabindex="{{_type}}"
role="button">
<details class="relative w-[100%]" {% if _type==global.module %} open {% endif %}>
<summary class="item flex items-center justify-between cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]
{% if _type == global.module %} active {% endif %}">
<div class="flex items-center">
{% if _type == 'order' %} <i class="icons icon-order"></i>
{% elsif _type == 'product' %} <i class="icons icon-product"></i>
{% elsif _type == 'customer' %}<i class="icons icon-customer"></i>
{% elsif _type == 'marketing' %}<i class="icons icon-marketing"></i>
{% elsif _type == 'investor_relation' %} <i class="icons icon-investor_relation"></i>
{% if _type == 'order' %} <i class="icons w-[20px] h-[20px] mr-[13px] icon-order"></i>
{% elsif _type == 'product' %} <i
class="icons w-[20px] h-[20px] mr-[13px] icon-product"></i>
{% elsif _type == 'customer' %}<i
class="icons w-[20px] h-[20px] mr-[13px] icon-customer"></i>
{% elsif _type == 'marketing' %}<i
class="icons w-[20px] h-[20px] mr-[13px] icon-marketing"></i>
{% elsif _type == 'investor_relation' %} <i
class="icons w-[20px] h-[20px] mr-[13px] icon-investor_relation"></i>
{% elsif _type == 'article' %} <i class="icons icon-content"></i>
{% elsif _type == 'job' %} <i class="icons icon-job"></i>
{% elsif _type == 'pcbuilder' %} <i class="icons icon-pcbuilder"></i>
{% elsif _type == 'payinstall' %} <i class="icons icon-payinstall"></i>
{% elsif _type == 'distributor' %} <i class="icons icon-distributor"></i>
{% elsif _type == 'report' %}<i class="icons icon-stats"></i>
{% elsif _type == 'system' %}<i class="icons icon-system"></i>
{% elsif _type == 'job' %} <i class="icons w-[20px] h-[20px] mr-[13px] icon-job"></i>
{% elsif _type == 'pcbuilder' %} <i
class="icons w-[20px] h-[20px] mr-[13px] icon-pcbuilder"></i>
{% elsif _type == 'payinstall' %} <i
class="icons w-[20px] h-[20px] mr-[13px] icon-payinstall"></i>
{% elsif _type == 'distributor' %} <i
class="icons w-[20px] h-[20px] mr-[13px] icon-distributor"></i>
{% elsif _type == 'report' %}<i class="icons w-[20px] h-[20px] mr-[13px] icon-stats"></i>
{% elsif _type == 'system' %}<i class="icons w-[20px] h-[20px] mr-[13px] icon-system"></i>
{% endif %}
<span class="title"> {{ _category[1].name }} </span>
@@ -69,18 +76,10 @@
<i class="fa-solid fa-chevron-right"></i>
</summary>
<div class="sub-hover dropdown-content" tabindex="{{_type}}">
{% for _item in _menuArray %}
<a href="{{ _item.url }}"
class="{% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
{{_item.name }} </a>
{% endfor %}
</div>
<div class="sub-menu">
{% for _item in _menuArray %}
<a href="{{ _item.url }}"
class="{% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
class="p-[8px_16px] flex items-center {% if _item.view == global.view and _item.module == global.module %}current {% endif %}">
{{_item.name }} </a>
{% endfor %}
</div>
@@ -92,24 +91,28 @@
<div class="menu-list">
<p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>
<a href="" class="item">
<i class="icons icon-settings"></i>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-settings"></i>
<span class="title"> Cài đặt </span>
</a>
<a href="" class="item">
<i class="icons icon-support"></i>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-support"></i>
<span class="title"> Hỗ trợ </span>
</a>
<a href="" class="item">
<i class="icons icon-account"></i>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-account"></i>
<span class="title"> Quản lý tài khoản </span>
</a>
</div>
<a href="" class="item">
<i class="icons icon-logout"></i>
<a href=""
class="item flex items-center cursor-pointer p-[0_12px] rounded-[4px] relative delay-300 transition-all bg-[#004e99] mb-[4px] leading-[36px]">
<i class="icons w-[20px] h-[20px] mr-[13px] icon-logout"></i>
<span class="title"> Thoát quản trị </span>
</a>
</div>