mirror of https://github.com/4xmen/xshop.git
parent
e9595486f7
commit
8f0f9272d1
Binary file not shown.
|
After Width: | Height: | Size: 586 B |
@ -0,0 +1,18 @@
|
||||
window.addEventListener('load', function () {
|
||||
try {
|
||||
|
||||
document.querySelectorAll('#panel-navbar a')?.forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href[0] === '#'){
|
||||
e.preventDefault();
|
||||
document.querySelector('#panel').classList.add('sided');
|
||||
document.querySelector('#sidebar-panel').innerHTML = document.querySelector(href).outerHTML;
|
||||
}
|
||||
});
|
||||
})
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
|
||||
});
|
||||
@ -1,4 +1,29 @@
|
||||
.form-control:focus{
|
||||
.form-control:focus,.form-check-input:focus{
|
||||
box-shadow: 0 0 0 0.25rem rgba(133, 13, 253, 0.25);
|
||||
border-color: #bc86fe;
|
||||
}
|
||||
|
||||
.card{
|
||||
background-color: rgba(var(--bs-body-bg),.5);
|
||||
background-image: url("../images/pattern.png");
|
||||
backdrop-filter: blur(4px);
|
||||
box-shadow: -2px -2px 7px #560000, 2px 2px 7px #5e00b5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.form-check-input:checked,.btn-primary{
|
||||
background-color: #a60087;
|
||||
border-color: #ff0067;
|
||||
}
|
||||
|
||||
.btn-primary:hover{
|
||||
background-color: #ff0067;
|
||||
}
|
||||
|
||||
a,a:visited{
|
||||
color: #cb00a5;
|
||||
&:hover{
|
||||
color: #ff0067;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,76 @@
|
||||
#panel-navbar {
|
||||
background-color: #282c34;
|
||||
background-image: url("../images/pattern.png");
|
||||
height: calc(100vh - 55px);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
//border-right: 1px dashed gray;
|
||||
//border-left: 1px dashed gray;
|
||||
|
||||
|
||||
li {
|
||||
i {
|
||||
font-size: 28px;
|
||||
}
|
||||
ul{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
padding: 5px 9px 5px 11px;
|
||||
display: block;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
color: $indigo;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-panel {
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
transition: .5s;
|
||||
ul{
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
li{
|
||||
a{
|
||||
display: flex;
|
||||
padding: 7px ;
|
||||
color: white;
|
||||
transition: .7s;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
justify-self: center;
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,218 @@
|
||||
<nav id="panel-navbar">
|
||||
<ul>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("xShop")}}">
|
||||
<a href="{{route('welcome')}}" target="_blank">
|
||||
<i class="ri-home-smile-fill"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Shopping card")}}">
|
||||
<a href="#card">
|
||||
<i class="ri-shopping-cart-line"></i>
|
||||
</a>
|
||||
<ul id="card">
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-team-fill"></i>
|
||||
|
||||
{{__('Customers')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-file-list-3-fill"></i>
|
||||
{{__('Invoices')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-percent-fill"></i>
|
||||
{{__('Discounts')}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Catalog")}}">
|
||||
<a href="#catalog">
|
||||
<i class="ri-store-line"></i>
|
||||
</a>
|
||||
<ul id="catalog">
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-vip-diamond-fill"></i>
|
||||
{{__('Products')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-box-3-fill"></i>
|
||||
{{__('Product categories')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-file-list-3-fill"></i>
|
||||
{{__("Properties meta")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-truck-fill"></i>
|
||||
{{__('Transports')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-image-fill"></i>
|
||||
{{__("Slider")}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Contents")}}">
|
||||
<a href="#contents">
|
||||
<i class="ri-pages-line"></i>
|
||||
</a>
|
||||
<ul id="contents">
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-megaphone-fill"></i>
|
||||
{{__('Post')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-book-3-fill"></i>
|
||||
{{__('Groups')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-threads-line"></i>
|
||||
{{__("Advertise")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-gallery-fill"></i>
|
||||
{{__("Galleries")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-video-fill"></i>
|
||||
{{__("Video clips")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-attachment-2"></i>
|
||||
{{__("Attachments")}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Theme")}}">
|
||||
<a href="#themes">
|
||||
<i class="ri-palette-line"></i>
|
||||
</a>
|
||||
<ul id="themes">
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-list-check"></i>
|
||||
{{__("Menus")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-color-filter-line"></i>
|
||||
{{__("Graphic")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-paint-brush-line"></i>
|
||||
{{__("Design")}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Interaction")}}">
|
||||
<a href="#interaction">
|
||||
<i class="ri-chat-1-line"></i>
|
||||
</a>
|
||||
<ul id="interaction">
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-question-mark"></i>
|
||||
{{__('Questions')}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-mail-fill"></i>
|
||||
{{__('Tickets')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-chat-1-fill"></i>
|
||||
{{__('Comments')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-mail-unread-fill"></i>
|
||||
{{__("Contact us")}}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Managing")}}">
|
||||
<a href="#manage">
|
||||
<i class="ri-pie-chart-line"></i>
|
||||
</a>
|
||||
<ul id="manage">
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-folder-user-fill"></i>
|
||||
{{__("Users")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-list-check-3"></i>
|
||||
{{__('Logs')}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<i class="ri-global-fill"></i>
|
||||
{{__("Languages")}}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="ri-bar-chart-2-line"></i>
|
||||
{{__("Reports")}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="auto" data-bs-custom-class="custom-tooltip"
|
||||
data-bs-title="{{__("Setting")}}">
|
||||
<a href="">
|
||||
<i class="ri-settings-4-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue