mirror of https://github.com/4xmen/xshop.git
added homayon menu theme part
parent
6707a2055d
commit
54035e8caa
|
After Width: | Height: | Size: 4.5 KiB |
@ -0,0 +1,134 @@
|
|||||||
|
<header class='HomayonMenu'>
|
||||||
|
<div class="homayon-logo"
|
||||||
|
style="background-image: url('{{asset('upload/images/'.$data->area_name.'.'.$data->part.'.svg')}}')">
|
||||||
|
<div class="logo-container">
|
||||||
|
<img src="{{asset('upload/images/logo.png')}}" alt="logo">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="homayon-top">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row pt-4">
|
||||||
|
<div class="col-6">
|
||||||
|
<ul class="social mt-5">
|
||||||
|
@foreach(getSettingsGroup('social_')??[] as $k => $social)
|
||||||
|
<li class="d-inline-block mx-2">
|
||||||
|
<a href="{{$social}}">
|
||||||
|
<i class="ri-{{$k}}-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-6 text-end">
|
||||||
|
<a href="{{route('client.products')}}" class="btn btn-primary mt-5">
|
||||||
|
{{getSetting($data->area_name.'_'.$data->part.'_title')}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container homayon-middle">
|
||||||
|
<ul>
|
||||||
|
<li id="homa-toggle-menu" class="icon-menu ms-auto">
|
||||||
|
<a href="#">
|
||||||
|
<i class="ri-menu-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a data-bs-toggle="modal" data-bs-target="#homa-search">
|
||||||
|
<i class="ri-search-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@if(auth('customer')->check())
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a href="{{route('client.profile')}}">
|
||||||
|
<i class="ri-user-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@else
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a href="{{route('client.sign-in')}}">
|
||||||
|
<i class="ri-user-line"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endif
|
||||||
|
<li class="icon-menu">
|
||||||
|
<a href="{{route('client.card')}}">
|
||||||
|
<i class="ri-shopping-bag-2-line"></i>
|
||||||
|
<span class="badge bg-danger card-count">
|
||||||
|
@if(cardCount() > 0)
|
||||||
|
{{cardCount()}}
|
||||||
|
@endif
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="homayon-bottom">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
@php($items = getMenuBySetting($data->area_name.'_'.$data->part.'_menu')->items)
|
||||||
|
@php($menuShow = false)
|
||||||
|
@foreach($items as $i => $item)
|
||||||
|
{{-- find center --}}
|
||||||
|
@if(!$menuShow && ($i > (count($items) / 2) -1 ) )
|
||||||
|
@php($menuShow = true)
|
||||||
|
<li class="homayon-divider">
|
||||||
|
|
||||||
|
</li>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="homayon-resp-menu" style="display: none">
|
||||||
|
<ul >
|
||||||
|
@foreach(getMenuBySettingItems($data->area_name.'_'.$data->part.'_menu') as $item)
|
||||||
|
<li>
|
||||||
|
<a href="{{$item->webUrl()}}">
|
||||||
|
{{$item->title}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Modal -->
|
||||||
|
<div class="modal fade" id="homa-search" tabindex="-1" aria-labelledby="apl-search" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h4 class="modal-title fs-5" id="apl-search">
|
||||||
|
{{__("Search")}}
|
||||||
|
</h4>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form action="{{route('client.search')}}" class="side-data">
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<input type="search" name="q" class="form-control" placeholder="{{__('Search')}}...">
|
||||||
|
<button class="btn btn-outline-secondary" type="submit" id="button-addon2">
|
||||||
|
<i class="ri-search-2-line"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{{-- <div class="modal-footer">--}}
|
||||||
|
{{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>--}}
|
||||||
|
{{-- </div>--}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
const scrollBreakpoint = window.innerHeight * 0.2;
|
||||||
|
let fixmenu = function () {
|
||||||
|
if (window.scrollY > scrollBreakpoint){
|
||||||
|
document.querySelector('.HomayonMenu').classList.add('fix');
|
||||||
|
document.querySelector('.HomayonMenu').querySelector('.homayon-middle').classList.remove('container');
|
||||||
|
}else{
|
||||||
|
document.querySelector('.HomayonMenu').classList.remove('fix')
|
||||||
|
document.querySelector('.HomayonMenu').querySelector('.homayon-middle').classList.add('container');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll',fixmenu);
|
||||||
|
|
||||||
|
|
||||||
|
fixmenu();
|
||||||
|
const toggleSideMenu = function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
if (document.querySelector('.homayon-resp-menu').style.display == 'none'){
|
||||||
|
document.querySelector('.homayon-resp-menu').style.display = 'block';
|
||||||
|
}else{
|
||||||
|
document.querySelector('.homayon-resp-menu').style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('DOMContentLoaded',function () {
|
||||||
|
document.querySelector('#homa-toggle-menu')?.addEventListener('click',toggleSideMenu);
|
||||||
|
});
|
||||||
|
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"name": "HomayonMenu",
|
||||||
|
"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,74 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Resources\Views\Segments;
|
||||||
|
|
||||||
|
use App\Models\Menu;
|
||||||
|
use App\Models\Part;
|
||||||
|
use App\Models\Setting;
|
||||||
|
use Illuminate\Support\Facades\File;
|
||||||
|
|
||||||
|
class HomayonMenu
|
||||||
|
{
|
||||||
|
public static function onAdd(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_title';
|
||||||
|
$setting->value = __("Shop");
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->type = 'TEXT';
|
||||||
|
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part. ' title';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_menu';
|
||||||
|
$setting->value = Menu::first()->id;
|
||||||
|
$setting->type = 'MENU';
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' menu';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_bg';
|
||||||
|
$setting->value = '#dddddd';
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->data = json_encode(['name' => 'homayon-bg']);
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' background color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
$setting = new Setting();
|
||||||
|
$setting->section = 'theme';
|
||||||
|
$setting->key = $part->area_name . '_' . $part->part.'_bg2';
|
||||||
|
$setting->value = gfx()['primary'];
|
||||||
|
$setting->type = 'COLOR';
|
||||||
|
$setting->data = json_encode(['name' => 'homayon-bg-menu']);
|
||||||
|
$setting->size = 6;
|
||||||
|
$setting->title = $part->area_name . ' ' . $part->part .' background color';
|
||||||
|
$setting->save();
|
||||||
|
|
||||||
|
|
||||||
|
File::copy(__DIR__.'/../../default-assets/header-circle.svg',public_path('upload/images/').$part->area_name . '.' . $part->part.'.svg');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
public static function onRemove(Part $part = null)
|
||||||
|
{
|
||||||
|
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_title')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_bg')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_bg2')->first()?->delete();
|
||||||
|
Setting::where('key',$part->area_name . '_' . $part->part.'_menu')->first()?->delete();
|
||||||
|
}
|
||||||
|
public static function onMount(Part $part = null)
|
||||||
|
{
|
||||||
|
return $part;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,225 @@
|
|||||||
|
.HomayonMenu {
|
||||||
|
// scss
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
transition: 400ms;
|
||||||
|
|
||||||
|
.homayon-top {
|
||||||
|
background: var(--homayon-bg);
|
||||||
|
height: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social {
|
||||||
|
i {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-middle {
|
||||||
|
margin-top: -35px;
|
||||||
|
margin-bottom: -40px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 1.15rem;
|
||||||
|
border-radius: 75px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0 1rem;
|
||||||
|
color: var(--xshop-primary);
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#homa-toggle-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-logo {
|
||||||
|
text-align: center;
|
||||||
|
width: 365px;
|
||||||
|
height: 325px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 9px;
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
background: var(--homayon-bg);
|
||||||
|
margin: 40px auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 220px;
|
||||||
|
height: 220px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 128px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-bottom {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: -105px;
|
||||||
|
|
||||||
|
nav {
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--homayon-bg-menu);
|
||||||
|
border-bottom-right-radius: 35px;
|
||||||
|
border-bottom-left-radius: 35px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
transition: 500ms;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: .75rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-divider {
|
||||||
|
flex-grow: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--xshop-diff);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
transition: 700ms;
|
||||||
|
opacity: 0;
|
||||||
|
content: ' ';
|
||||||
|
background: var(--xshop-diff);
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transform: skew(35deg, 0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
content: ' ';
|
||||||
|
background: var(--xshop-diff);
|
||||||
|
opacity: .3;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
transform: skew(35deg, 0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-875px width*/
|
||||||
|
@media (max-width: 875px) {
|
||||||
|
ul {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
#homa-toggle-menu {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-bottom {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fix {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999;
|
||||||
|
|
||||||
|
.homayon-top {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.homayon-middle {
|
||||||
|
margin-top: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.homayon-logo {
|
||||||
|
top: -118px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-container {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 75px;
|
||||||
|
margin-top: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*-875px width*/
|
||||||
|
@media (max-width: 875px) {
|
||||||
|
.homayon-logo {
|
||||||
|
background: none !important;
|
||||||
|
img{
|
||||||
|
width: 40px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.homayon-resp-menu{
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: var(--homayon-bg);
|
||||||
|
top: 73px;
|
||||||
|
width: 200px;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 77;
|
||||||
|
inset-inline-end: 0;
|
||||||
|
ul{
|
||||||
|
padding-top: .5rem;
|
||||||
|
list-style: none;
|
||||||
|
a{
|
||||||
|
display: block;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Loading…
Reference in New Issue