added side menu

pull/49/head
A1Gard 5 months ago
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

@ -3,7 +3,7 @@ import {tns} from "tiny-slider/src/tiny-slider";
var treeSlider,treeSliderX, treeSliderY ;
document.addEventListener('DOMContentLoaded', () => {
console.log('3 slider');
console.log('3 slider 1');
document.querySelectorAll('.tree-grid .section-main')?.forEach(function (el) {
if (el.classList.contains('.tns-slider')){
console.log('ignore');

Loading…
Cancel
Save