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

57
assets/script/pc_style.scss
View File

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

10
template/theme.html
View File

@@ -110,19 +110,18 @@
</div>
<!-- Menu collapse -->
<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 class="admin-menu box-menu fixed top-0 bg-[#004180] pb-[20px] h-[100vh] hidden" id="js-menu-small">
<div class="flex flex-col justify-between">
<div>
<div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]">
<a href="/" class="">
<img src="{{ 'logo_small.png' | asset_url }}" alt="">
</a>
</div>
<a href="javascript:void(0)" title="Mở menu" class="icon-close" id="js-show-menu">
<i class="fa-solid fa-indent"></i>
</a>
</div>
<div class="item">
<a href="/" class="icons icon-home"> </a>
@@ -208,7 +207,6 @@
</div>
</div>
</div>
<div class="item">
<a href="" class="icons icon-logout"> </a>
@@ -218,6 +216,8 @@
</div>
</div>
</div>
<div class="admin-content-container ml-[50px]" id="js-admin-content-container">
<!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">