tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

menu

Browse Source
This commit is contained in:
Tieptk
2024-05-16 11:38:34 +07:00
parent 48c9cba704
commit dccf38d6d3
3 changed files with 148 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
assets/script/pc_style.css
View File

@@ -322,9 +322,12 @@ a {
align-items: center; align-items: center;
transition: 0.3s all; transition: 0.3s all;
position: relative; position: relative;
margin: 5px;
background: #004e99;
border-radius: 4px;
} }
.admin-menu .item:hover, .admin-menu .item.current { .admin-menu .item:hover, .admin-menu .item.current {
background: #81b5e4; background: #22a2ff;
} }
.admin-menu .item:hover .icons, .admin-menu .item.current .icons { .admin-menu .item:hover .icons, .admin-menu .item.current .icons {
filter: brightness(100); filter: brightness(100);
@@ -423,78 +426,79 @@ a {
background: transparent; background: transparent;
} }
.admin-menu .icons { .admin-menu .icons {
width: 50px; width: 42px;
height: 40px; height: 31px;
} }
.admin-menu .icon-home { .admin-menu .icon-home {
background-position: 7px 3px; background-position: 4px -1px;
} }
.admin-menu .icon-sell { .admin-menu .icon-sell {
background-position: -29px 3px; background-position: -32px -1px;
} }
.admin-menu .icon-product { .admin-menu .icon-product {
background-position: -66px 3px; background-position: -68px -1px;
} }
.admin-menu .icon-user { .admin-menu .icon-user {
background-position: -103px 3px; background-position: -105px -1px;
} }
.admin-menu .icon-marketing { .admin-menu .icon-marketing {
background-position: -139px 3px; background-position: -142px -1px;
} }
.admin-menu .icon-content { .admin-menu .icon-content {
background-position: -172px 3px; background-position: -175px -1px;
} }
.admin-menu .icon-stats { .admin-menu .icon-stats {
background-position: -208px 3px; background-position: -210px -1px;
} }
.admin-menu .icon-system { .admin-menu .icon-system {
background-position: -247px 3px; background-position: -249px -1px;
} }
.admin-menu .icon-settings { .admin-menu .icon-settings {
background-position: -282px 2px; background-position: -285px -1px;
margin-left: -1px; margin-left: -1px;
} }
.admin-menu .icon-support { .admin-menu .icon-support {
background-position: -318px 3px; background-position: -320px -1px;
} }
.admin-menu .icon-account { .admin-menu .icon-account {
background-position: -354px 2px; background-position: -356px -1px;
} }
.admin-menu .icon-logout { .admin-menu .icon-logout {
background-position: 6px -34px; background-position: 4px -37px;
} }
.admin-menu .icon-investor_relation { .admin-menu .icon-investor_relation {
background-position: 6px -115px; background-position: 6px -115px;
} }
.admin-menu .icon-job { .admin-menu .icon-job {
background-position: -37px -114px; background-position: -41px -118px;
} }
.admin-menu .icon-pcbuilder { .admin-menu .icon-pcbuilder {
background-position: -83px -114px; background-position: -87px -118px;
} }
.admin-menu .icon-payinstall { .admin-menu .icon-payinstall {
background-position: -128px -114px; background-position: -130px -118px;
} }
.admin-menu .icon-distributor { .admin-menu .icon-distributor {
background-position: -173px -114px; background-position: -175px -114px;
} }
.admin-menu .logo { .admin-menu .logo {
position: relative; position: relative;
background: transparent;
border: 0;
} }
.admin-menu .icon-close { .admin-menu .icon-close {
position: absolute; width: 42px;
top: 12px;
right: -40px;
width: 40px;
display: block; display: block;
background-color: rgb(0 78 153/var(--tw-bg-opacity)); background-color: #22a2ff;
height: 36px; height: 31px;
margin: 0 auto;
border-radius: 4px;
} }
.admin-menu .icon-close i { .admin-menu .icon-close i {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 40px; line-height: 33px;
} }
.admin-content-container { .admin-content-container {

57
assets/script/pc_style.scss
View File

@@ -80,6 +80,7 @@ a {
width: 8px; width: 8px;
height: 10px; height: 10px;
} }
.clearfix { .clearfix {
&::after { &::after {
content: ""; content: "";
@@ -303,9 +304,12 @@ a {
align-items: center; align-items: center;
transition: 0.3s all; transition: 0.3s all;
position: relative; position: relative;
margin: 5px;
background: #004e99;
border-radius: 4px;
&:hover, &:hover,
&.current { &.current {
background: #81b5e4; background: #22a2ff;
.icons { .icons {
filter: brightness(100); filter: brightness(100);
} }
@@ -413,77 +417,78 @@ a {
} }
} }
.icons { .icons {
width: 50px; width: 42px;
height: 40px; height: 31px;
} }
.icon-home { .icon-home {
background-position: 7px 3px; background-position: 4px -1px;
} }
.icon-sell { .icon-sell {
background-position: -29px 3px; background-position: -32px -1px;
} }
.icon-product { .icon-product {
background-position: -66px 3px; background-position: -68px -1px;
} }
.icon-user { .icon-user {
background-position: -103px 3px; background-position: -105px -1px;
} }
.icon-marketing { .icon-marketing {
background-position: -139px 3px; background-position: -142px -1px;
} }
.icon-content { .icon-content {
background-position: -172px 3px; background-position: -175px -1px;
} }
.icon-stats { .icon-stats {
background-position: -208px 3px; background-position: -210px -1px;
} }
.icon-system { .icon-system {
background-position: -247px 3px; background-position: -249px -1px;
} }
.icon-settings { .icon-settings {
background-position: -282px 2px; background-position: -285px -1px;
margin-left: -1px; margin-left: -1px;
} }
.icon-support { .icon-support {
background-position: -318px 3px; background-position: -320px -1px;
} }
.icon-account { .icon-account {
background-position: -354px 2px; background-position: -356px -1px;
} }
.icon-logout { .icon-logout {
background-position: 6px -34px; background-position: 4px -37px;
} }
.icon-investor_relation { .icon-investor_relation {
background-position: 6px -115px; background-position: 6px -115px;
} }
.icon-job { .icon-job {
background-position: -37px -114px; background-position: -41px -118px;
} }
.icon-pcbuilder { .icon-pcbuilder {
background-position: -83px -114px; background-position: -87px -118px;
} }
.icon-payinstall { .icon-payinstall {
background-position: -128px -114px; background-position: -130px -118px;
} }
.icon-distributor { .icon-distributor {
background-position: -173px -114px; background-position: -175px -114px;
} }
.logo { .logo {
position: relative; position: relative;
background: transparent;
border: 0;
} }
.icon-close { .icon-close {
position: absolute; width: 42px;
top: 12px;
right: -40px;
width: 40px;
display: block; display: block;
background-color: rgb(0 78 153 / var(--tw-bg-opacity)); background-color: #22a2ff;
height: 36px; height: 31px;
margin: 0 auto;
border-radius: 4px;
i { i {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 40px; line-height: 33px;
} }
} }
} }

174
template/theme.html
View File

@@ -110,112 +110,112 @@
</div> </div>
<!-- Menu collapse --> <!-- Menu collapse -->
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh] hidden" <div class="admin-menu box-menu fixed top-0 bg-[#004180] pb-[20px] h-[100vh] hidden" id="js-menu-small">
id="js-menu-small"> <div class="flex flex-col justify-between">
<div> <div>
<div <div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]"> class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]">
<a href="/" class=""> <a href="/" class="">
<img src="{{ 'logo_small.png' | asset_url }}" alt=""> <img src="{{ 'logo_small.png' | asset_url }}" alt="">
</a> </a>
</div>
<a href="javascript:void(0)" title="Mở menu" class="icon-close" id="js-show-menu"> <a href="javascript:void(0)" title="Mở menu" class="icon-close" id="js-show-menu">
<i class="fa-solid fa-indent"></i> <i class="fa-solid fa-indent"></i>
</a> </a>
</div>
<div class="item"> <div class="item">
<a href="/" class="icons icon-home"> </a> <a href="/" class="icons icon-home"> </a>
</div> </div>
{% for _category in global.main_menu %} {% for _category in global.main_menu %}
{% assign _type = _category[0] %} {% assign _type = _category[0] %}
{% assign _menuArray = _category[1].menu %} {% assign _menuArray = _category[1].menu %}
{% if _category[1].enable == 1 %} {% if _category[1].enable == 1 %}
<div <div
class="item {% if _type == 'system' %} border-[rgba(255,255,255,0.15)] border-b{% endif %} {% if _type == global.module %} current {% endif %}"> class="item {% if _type == 'system' %} border-[rgba(255,255,255,0.15)] border-b{% endif %} {% if _type == global.module %} current {% endif %}">
{% if _type == 'order' %} <i class="icons icon-sell"> </i> {% if _type == 'order' %} <i class="icons icon-sell"> </i>
{% elsif _type == 'product' %} <i class="icons icon-product"> </i> {% elsif _type == 'product' %} <i class="icons icon-product"> </i>
{% elsif _type == 'customer' %}<i class="icons icon-user"> </i> {% elsif _type == 'customer' %}<i class="icons icon-user"> </i>
{% elsif _type == 'marketing' %} <i class="icons icon-marketing"> </i> {% elsif _type == 'marketing' %} <i class="icons icon-marketing"> </i>
{% elsif _type == 'investor_relation' %} <i class="icons icon-investor_relation"> </i> {% elsif _type == 'investor_relation' %} <i class="icons icon-investor_relation"> </i>
{% elsif _type == 'article' %} <i class="icons icon-content"> </i> {% elsif _type == 'article' %} <i class="icons icon-content"> </i>
{% elsif _type == 'job' %} <i class="icons icon-job"> </i> {% elsif _type == 'job' %} <i class="icons icon-job"> </i>
{% elsif _type == 'pcbuilder' %} <i class="icons icon-pcbuilder"> </i> {% elsif _type == 'pcbuilder' %} <i class="icons icon-pcbuilder"> </i>
{% elsif _type == 'payinstall' %} <i class="icons icon-payinstall"> </i> {% elsif _type == 'payinstall' %} <i class="icons icon-payinstall"> </i>
{% elsif _type == 'distributor' %} <i class="icons icon-distributor"> </i> {% elsif _type == 'distributor' %} <i class="icons icon-distributor"> </i>
{% elsif _type == 'report' %}<i class="icons icon-stats"></i> {% elsif _type == 'report' %}<i class="icons icon-stats"></i>
{% elsif _type == 'system' %}<i class="icons icon-system"></i> {% elsif _type == 'system' %}<i class="icons icon-system"></i>
{% endif %}
<div class="sub-menu">
<p class="font-bold"> {{ _category[1].name }} </p>
<div class="menu-list">
{% for _item in _menuArray %}
<a href="{{ _item.url }}" {% if _item.view==global.view %} class="current" {% endif %}>
{{ _item.name }}
</a>
{% endfor %}
</div>
</div>
</div>
{% endif %} {% endif %}
{% endfor %}
<div class="sub-menu"> <div class="item">
<p class="font-bold"> {{ _category[1].name }} </p> <a href="" class="icons icon-settings"> </a>
<div class="menu-list"> <div class="sub-menu">
{% for _item in _menuArray %} <p class="font-bold"> Cài đặt </p>
<a href="{{ _item.url }}" {% if _item.view==global.view %} class="current" {% endif %}>
{{ _item.name }} <div class="menu-list">
</a> {% for _item in global.main_menu.system.menu %}
{% endfor %} <a href="{{_item.url }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-support"> </a>
<div class="sub-menu">
<p class="font-bold"> Hỗ trợ </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-account"> </a>
<div class="sub-menu">
<p class="font-bold"> Quản lý tài khoản </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div> </div>
</div> </div>
</div> </div>
{% endif %}
{% endfor %}
<div class="item"> <div class="item">
<a href="" class="icons icon-settings"> </a> <a href="" class="icons icon-logout"> </a>
<div class="sub-menu"> <div class="sub-menu">
<p class="font-bold"> Cài đặt </p> <p class="font-bold"> Thoát quản trị </p>
<div class="menu-list">
{% for _item in global.main_menu.system.menu %}
<a href="{{_item.url }}"> {{_item.name }} </a>
{% endfor %}
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-support"> </a>
<div class="sub-menu">
<p class="font-bold"> Hỗ trợ </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-account"> </a>
<div class="sub-menu">
<p class="font-bold"> Quản lý tài khoản </p>
<div class="menu-list">
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
<a href=""> Menu title </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="item">
<a href="" class="icons icon-logout"> </a>
<div class="sub-menu">
<p class="font-bold"> Thoát quản trị </p>
</div>
</div>
</div> </div>
<div class="admin-content-container ml-[50px]" id="js-admin-content-container"> <div class="admin-content-container ml-[50px]" id="js-admin-content-container">