mirror of https://github.com/4xmen/xshop.git
added side menu
parent
57ebac9f6a
commit
0d026213a6
@ -0,0 +1,29 @@
|
||||
<nav id='SideMenu' style="---side-bg: {{getSetting($data->area->name.'_'.$data->part.'_bg')}};">
|
||||
<div class="text-center py-3" id="side-menu-logo">
|
||||
<a href="{{url('/')}}">
|
||||
<img src="{{asset('upload/images/logo.svg')}}" alt="">
|
||||
{{-- <i class="ri-apple-line "></i>--}}
|
||||
</a>
|
||||
</div>
|
||||
<div id="side-menu-btn">
|
||||
<i class="ri-menu-line"></i>
|
||||
</div>
|
||||
<ul>
|
||||
@foreach(getMenuBySetting($data->area->name.'_'.$data->part.'_menu')->items as $item)
|
||||
<li>
|
||||
@if($item->meta == null)
|
||||
<a href="{{$item->dest->webUrl()}}">
|
||||
{{$item->title}}
|
||||
</a>
|
||||
@else
|
||||
<a href="{{$item->meta}}">
|
||||
{{$item->title}}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<div class="p-2" id="side-menu-content">
|
||||
{!! getSetting($data->area->name.'_'.$data->part.'_text') !!}
|
||||
</div>
|
||||
</nav>
|
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* trim char
|
||||
* @param s String
|
||||
* @param c char
|
||||
* @returns {*}
|
||||
*/
|
||||
function trimer (s, c) {
|
||||
if (c === "]") c = "\\]";
|
||||
if (c === "^") c = "\\^";
|
||||
if (c === "\\") c = "\\\\";
|
||||
return s.replace(new RegExp(
|
||||
"^[" + c + "]+|[" + c + "]+$", "g"
|
||||
), "");
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded',function () {
|
||||
|
||||
// make current page
|
||||
document.querySelectorAll('#SideMenu li').forEach(function (el) {
|
||||
if (trimer(el.querySelector('a').getAttribute('href'),'/') == trimer( window.location.href,'/')){
|
||||
el.classList.add('current-page');
|
||||
}
|
||||
});
|
||||
if (document.querySelectorAll('#SideMenu li.current-page').length == 0){
|
||||
document.querySelector('#SideMenu li:first-child').classList.add('current-page');
|
||||
}
|
||||
|
||||
// toggle menu for reposive
|
||||
document.querySelector('#side-menu-btn').addEventListener('click',function () {
|
||||
this.closest('nav').querySelector('ul').classList.toggle('active');
|
||||
});
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "SideMenu",
|
||||
"version": "1.0",
|
||||
"author": "xStack",
|
||||
"email": "xshop@xstack.ir",
|
||||
"license": "GPL-3.0-or-later",
|
||||
"url": "https:\/\/xstack.ir",
|
||||
"author_url": "https:\/\/4xmen.ir",
|
||||
"packages": []
|
||||
}
|
@ -0,0 +1,52 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Menu;
|
||||
use App\Models\Part;
|
||||
use App\Models\Setting;
|
||||
|
||||
class SideMenu
|
||||
{
|
||||
public static function onAdd(Part $part = null)
|
||||
{
|
||||
|
||||
$setting = new Setting();
|
||||
$setting->section = 'theme';
|
||||
$setting->key = $part->area->name . '_' . $part->part.'_menu';
|
||||
$setting->value = Menu::first()->id;
|
||||
$setting->type = 'MENU';
|
||||
$setting->size = 12;
|
||||
$setting->title = $part->area->name . ' ' . $part->part .' menu';
|
||||
$setting->save();
|
||||
|
||||
$setting = new Setting();
|
||||
$setting->section = 'theme';
|
||||
$setting->key = $part->area->name . '_' . $part->part.'_text';
|
||||
$setting->value = 'lorem ipsum';
|
||||
$setting->type = 'EDITOR';
|
||||
$setting->size = 12;
|
||||
$setting->title = $part->area->name . ' ' . $part->part .' text';
|
||||
$setting->save();
|
||||
|
||||
|
||||
$setting = new Setting();
|
||||
$setting->section = 'theme';
|
||||
$setting->key = $part->area->name . '_' . $part->part.'_bg';
|
||||
$setting->value = '#ececec';
|
||||
$setting->type = 'COLOR';
|
||||
$setting->size = 3;
|
||||
$setting->title = $part->area->name . ' ' . $part->part .' background';
|
||||
$setting->save();
|
||||
}
|
||||
public static function onRemove(Part $part = null)
|
||||
{
|
||||
Setting::where('key',$part->area->name . '_' . $part->part.'_menu')->first()?->delete();
|
||||
Setting::where('key',$part->area->name . '_' . $part->part.'_text')->first()?->delete();
|
||||
Setting::where('key',$part->area->name . '_' . $part->part.'bg')->first()?->delete();
|
||||
}
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
@ -0,0 +1,108 @@
|
||||
#SideMenu {
|
||||
// scss
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
z-index: 8;
|
||||
background: var(---side-bg);
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
img{
|
||||
width: 50% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
li{
|
||||
transition: 600ms;
|
||||
a{
|
||||
padding: .75rem 1rem;
|
||||
display: block;
|
||||
}
|
||||
text-align: center;
|
||||
|
||||
&:hover{
|
||||
background: var(--xshop-secondary);
|
||||
a{
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
|
||||
&.current-page{
|
||||
background: var(--xshop-primary);
|
||||
a{
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#side-menu-btn{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
main{
|
||||
position: relative;
|
||||
inset-inline-start: 20rem;
|
||||
width: calc(100% - 20rem);
|
||||
}
|
||||
|
||||
|
||||
/*-1024px width*/
|
||||
@media (max-width: 1024px) {
|
||||
main{
|
||||
position: static;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#SideMenu{
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
bottom: auto;
|
||||
overflow: visible !important;
|
||||
//position: relative;
|
||||
|
||||
#side-menu-logo{
|
||||
float: left;
|
||||
img{
|
||||
width: auto !important;
|
||||
height: 48px !important;
|
||||
margin-right: 1rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
ul{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--xshop-background);
|
||||
li{
|
||||
text-align: start;
|
||||
}
|
||||
&.active{
|
||||
display: block ;
|
||||
}
|
||||
}
|
||||
#side-menu-btn{
|
||||
display: block !important;
|
||||
float: right;
|
||||
padding: 1.7rem 2rem;
|
||||
&:hover{
|
||||
background: var(--xshop-primary);
|
||||
color: var(--xshop-diff);
|
||||
}
|
||||
}
|
||||
|
||||
#side-menu-content{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 240 KiB |
Loading…
Reference in New Issue