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