wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

导航菜单 -> 手机端响应式

This commit is contained in:
pushuo 2022-09-01 08:54:32 +08:00 committed by Edward Yang
parent 3ddaec6960
commit ff87b819fc
14 changed files with 634 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
beike/Helpers.php
View File

@ -582,3 +582,9 @@ function installed()
{
return file_exists(storage_path('installed'));
}
function isMobile()
{
return (new \Jenssegers\Agent\Agent())->isMobile();
}

1
composer.json
View File

@ -15,6 +15,7 @@
"intervention/image": "^2.7",
"laravel/framework": "^9.0",
"laravel/tinker": "^2.7",
"jenssegers/agent": "^2.6",
"spatie/laravel-permission": "^5.5",
"srmklive/paypal": "^3.0",
"stripe/stripe-php": "^8.8",

214
composer.lock generated
View File

@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "d291ec39fe19eebe5c5e98e9014cda39",
"content-hash": "638306dddcdd0d2164cdbc1d4272416a",
"packages": [
{
"name": "asm89/stack-cors",
@ -1561,6 +1561,153 @@
],
"time": "2022-05-21T17:30:32+00:00"
},
{
"name": "jaybizzle/crawler-detect",
"version": "v1.2.111",
"source": {
"type": "git",
"url": "https://github.com/JayBizzle/Crawler-Detect.git",
"reference": "d572ed4a65a70a2d2871dc5137c9c5b7e69745ab"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/JayBizzle/Crawler-Detect/zipball/d572ed4a65a70a2d2871dc5137c9c5b7e69745ab",
"reference": "d572ed4a65a70a2d2871dc5137c9c5b7e69745ab",
"shasum": "",
"mirrors": [
{
"url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%",
"preferred": true
}
]
},
"require": {
"php": ">=5.3.0"
},
"require-dev": {
"phpunit/phpunit": "^4.8|^5.5|^6.5|^9.4"
},
"type": "library",
"autoload": {
"psr-4": {
"Jaybizzle\\CrawlerDetect\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Mark Beech",
"email": "m@rkbee.ch",
"role": "Developer"
}
],
"description": "CrawlerDetect is a PHP class for detecting bots/crawlers/spiders via the user agent",
"homepage": "https://github.com/JayBizzle/Crawler-Detect/",
"keywords": [
"crawler",
"crawler detect",
"crawler detector",
"crawlerdetect",
"php crawler detect"
],
"support": {
"issues": "https://github.com/JayBizzle/Crawler-Detect/issues",
"source": "https://github.com/JayBizzle/Crawler-Detect/tree/v1.2.111"
},
"time": "2022-03-15T22:19:01+00:00"
},
{
"name": "jenssegers/agent",
"version": "v2.6.4",
"source": {
"type": "git",
"url": "https://github.com/jenssegers/agent.git",
"reference": "daa11c43729510b3700bc34d414664966b03bffe"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/jenssegers/agent/zipball/daa11c43729510b3700bc34d414664966b03bffe",
"reference": "daa11c43729510b3700bc34d414664966b03bffe",
"shasum": "",
"mirrors": [
{
"url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%",
"preferred": true
}
]
},
"require": {
"jaybizzle/crawler-detect": "^1.2",
"mobiledetect/mobiledetectlib": "^2.7.6",
"php": ">=5.6"
},
"require-dev": {
"php-coveralls/php-coveralls": "^2.1",
"phpunit/phpunit": "^5.0|^6.0|^7.0"
},
"suggest": {
"illuminate/support": "Required for laravel service providers"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "3.0-dev"
},
"laravel": {
"providers": [
"Jenssegers\\Agent\\AgentServiceProvider"
],
"aliases": {
"Agent": "Jenssegers\\Agent\\Facades\\Agent"
}
}
},
"autoload": {
"psr-4": {
"Jenssegers\\Agent\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Jens Segers",
"homepage": "https://jenssegers.com"
}
],
"description": "Desktop/mobile user agent parser with support for Laravel, based on Mobiledetect",
"homepage": "https://github.com/jenssegers/agent",
"keywords": [
"Agent",
"browser",
"desktop",
"laravel",
"mobile",
"platform",
"user agent",
"useragent"
],
"support": {
"issues": "https://github.com/jenssegers/agent/issues",
"source": "https://github.com/jenssegers/agent/tree/v2.6.4"
},
"funding": [
{
"url": "https://github.com/jenssegers",
"type": "github"
},
{
"url": "https://tidelift.com/funding/github/packagist/jenssegers/agent",
"type": "tidelift"
}
],
"time": "2020-06-13T08:05:20+00:00"
},
{
"name": "laravel/framework",
"version": "v9.22.1",
@ -2244,6 +2391,68 @@
],
"time": "2022-04-17T13:12:02+00:00"
},
{
"name": "mobiledetect/mobiledetectlib",
"version": "2.8.39",
"source": {
"type": "git",
"url": "https://github.com/serbanghita/Mobile-Detect.git",
"reference": "0fd6753003fc870f6e229bae869cc1337c99bc45"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/serbanghita/Mobile-Detect/zipball/0fd6753003fc870f6e229bae869cc1337c99bc45",
"reference": "0fd6753003fc870f6e229bae869cc1337c99bc45",
"shasum": "",
"mirrors": [
{
"url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%",
"preferred": true
}
]
},
"require": {
"php": ">=5.0.0"
},
"require-dev": {
"phpunit/phpunit": "~4.8.35||~5.7"
},
"type": "library",
"autoload": {
"psr-0": {
"Detection": "namespaced/"
},
"classmap": [
"Mobile_Detect.php"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Serban Ghita",
"email": "serbanghita@gmail.com",
"homepage": "http://mobiledetect.net",
"role": "Developer"
}
],
"description": "Mobile_Detect is a lightweight PHP class for detecting mobile devices. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.",
"homepage": "https://github.com/serbanghita/Mobile-Detect",
"keywords": [
"detect mobile devices",
"mobile",
"mobile detect",
"mobile detector",
"php mobile detect"
],
"support": {
"issues": "https://github.com/serbanghita/Mobile-Detect/issues",
"source": "https://github.com/serbanghita/Mobile-Detect/tree/2.8.39"
},
"time": "2022-02-17T19:24:25+00:00"
},
{
"name": "monolog/monolog",
"version": "2.8.0",
@ -9686,9 +9895,10 @@
"prefer-lowest": false,
"platform": {
"php": "^8.0.2",
"ext-iconv": "*",
"ext-json": "*",
"ext-zip": "*"
},
"platform-dev": [],
"plugin-api-version": "2.3.0"
"plugin-api-version": "2.1.0"
}

89
public/build/beike/shop/default/css/app.css vendored
View File

@ -621,6 +621,9 @@ header .header-mobile .mobile-content {
align-items: center;
justify-content: space-between;
}
header .header-mobile .mobile-content .mobile-open-menu {
cursor: pointer;
}
header .header-mobile .mobile-content > div {
width: 33.33%;
}
@ -673,6 +676,77 @@ header .header-mobile .mobile-content .right .nav-link i {
color: #999;
}
#offcanvas-mobile-menu {
width: 80%;
}
#offcanvas-mobile-menu .offcanvas-header {
padding: 10px 20px 10px 10px;
}
#offcanvas-mobile-menu .mobile-menu-wrap {
padding: 0;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion {
border-top: 1px solid #e5e5e5;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text {
display: flex;
align-items: center;
justify-content: space-between;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a {
flex: 1;
height: 44px;
padding-left: 10px;
display: flex;
align-items: center;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a .badge {
position: relative;
margin-left: 13px;
font-weight: 400;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > a .badge::before {
content: "";
position: absolute;
top: 50%;
right: 100%;
transform: translate(0, -50%);
border: 4px solid;
border-right-width: 7px;
border: 5px solid rgba(0, 0, 0, 0);
border-right-color: inherit;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span {
width: 44px;
height: 44px;
display: flex;
border-left: 1px solid #e5e5e5;
align-items: center;
justify-content: center;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span:active {
background-color: #eee;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span[aria-expanded=true] {
background-color: #eee;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .nav-item-text > span[aria-expanded=true] i {
transform: rotate(180deg);
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse {
padding: 10px;
border-top: 1px solid #e5e5e5;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse .children-group .group-name {
margin-bottom: 4px;
}
#offcanvas-mobile-menu .mobile-menu-wrap #menu-accordion .accordion-item .accordion-collapse .children-group .nav a {
color: #777;
}
footer {
background: #fafafa;
margin-top: 5rem;
@ -934,6 +1008,11 @@ body.page-product .variables-wrap .variable-info > div:not(.selected).disabled {
color: #999;
font-weight: initial;
}
@media (max-width: 768px) {
body.page-product .peoduct-info h1 {
font-size: 1.2rem;
}
}
body.page-product .peoduct-info .rating-wrap {
margin-bottom: 2rem;
}
@ -946,6 +1025,11 @@ body.page-product .peoduct-info .rating-wrap .rating i {
body.page-product .peoduct-info .price-wrap {
margin-bottom: 2.4rem;
}
@media (min-width: 768px) {
body.page-product .peoduct-info .quantity-btns {
display: flex;
}
}
body.page-product .peoduct-info .quantity-btns .quantity-input {
max-width: 5rem;
text-align: center;
@ -953,6 +1037,11 @@ body.page-product .peoduct-info .quantity-btns .quantity-input {
body.page-product .peoduct-info .quantity-btns .quantity-wrap {
height: 43px;
}
@media (max-width: 768px) {
body.page-product .peoduct-info .quantity-btns .quantity-wrap {
margin-bottom: 10px;
}
}
body.page-product .product-description .nav-tabs .nav-link {
border: none;
}

25
public/build/beike/shop/default/js/app.js vendored
View File

@ -2259,17 +2259,24 @@ __webpack_require__.r(__webpack_exports__);
// offcanvas-search-top
$(function () {
var myOffcanvas = document.getElementById('offcanvas-search-top');
if (!myOffcanvas) return;
myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
$('#offcanvas-search-top input').focus();
$('#offcanvas-search-top input').keydown(function (e) {
if (e.keyCode == 13) {
if ($(this).val() != '') {
location.href = 'products/search?keyword=' + $(this).val();
var myOffcanvas = document.getElementById("offcanvas-search-top");
if (myOffcanvas) {
myOffcanvas.addEventListener("shown.bs.offcanvas", function () {
$("#offcanvas-search-top input").focus();
$("#offcanvas-search-top input").keydown(function (e) {
if (e.keyCode == 13) {
if ($(this).val() != "") {
location.href = "products/search?keyword=" + $(this).val();
}
}
}
});
});
}
$(document).on("click", ".mobile-open-menu", function () {
var offcanvasMobileMenu = new bootstrap.Offcanvas('#offcanvas-mobile-menu');
offcanvasMobileMenu.show();
});
});

94
resources/beike/shop/default/css/header.scss vendored
View File

@ -177,6 +177,11 @@ header {
display: flex;
align-items: center;
justify-content: space-between;
.mobile-open-menu {
cursor: pointer;
}
> div {
width: 33.33%;
}
@ -252,4 +257,93 @@ header {
}
}
}
}
#offcanvas-mobile-menu {
width: 80%;
.offcanvas-header {
padding: 10px 20px 10px 10px;
}
.mobile-menu-wrap {
padding: 0;
#menu-accordion {
border-top: 1px solid #e5e5e5;
.accordion-item {
border-bottom: 1px solid #e5e5e5;
.nav-item-text {
display: flex;
align-items: center;
justify-content: space-between;
> a {
flex: 1;
height: 44px;
padding-left: 10px;
display: flex;
align-items: center;
.badge {
position: relative;
margin-left: 13px;
// padding: 2px 4px;
font-weight: 400;
&::before {
content: "";
position: absolute;
top: 50%;
right: 100%;
transform: translate(0, -50%);
border: 4px solid;
border-right-width: 7px;
border: 5px solid #0000;
border-right-color: inherit;
}
}
}
> span {
width: 44px;
height: 44px;
display: flex;
border-left: 1px solid #e5e5e5;
align-items: center;
justify-content: center;
&:active {
background-color: #eee;
}
&[aria-expanded="true"] {
background-color: #eee;
i {
transform:rotate(180deg);
}
}
}
}
.accordion-collapse {
padding: 10px;
border-top: 1px solid #e5e5e5;
.children-group {
.group-name {
margin-bottom: 4px;
}
.nav {
a {
color: #777;
}
}
}
}
}
}
}
}

12
resources/beike/shop/default/css/page-product.scss vendored
View File

@ -135,6 +135,11 @@ body.page-product {
}
.peoduct-info {
h1 {
@media (max-width: 768px) {
font-size: 1.2rem;
}
}
.rating-wrap {
margin-bottom: 2rem;
@ -151,6 +156,10 @@ body.page-product {
}
.quantity-btns {
@media (min-width: 768px) {
display: flex;
}
.quantity-input {
max-width: 5rem;
text-align: center;
@ -158,6 +167,9 @@ body.page-product {
.quantity-wrap {
height: 43px;
@media (max-width: 768px) {
margin-bottom: 10px;
}
}
}
}

33
resources/beike/shop/default/js/header.js vendored
View File

@ -1,16 +1,21 @@
// offcanvas-search-top
$(function() {
var myOffcanvas = document.getElementById('offcanvas-search-top')
if (!myOffcanvas) return;
myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
$('#offcanvas-search-top input').focus();
$('#offcanvas-search-top input').keydown(function (e) {
if (e.keyCode == 13) {
if ($(this).val() != '') {
location.href = 'products/search?keyword=' + $(this).val();
$(function () {
var myOffcanvas = document.getElementById("offcanvas-search-top");
if (myOffcanvas) {
myOffcanvas.addEventListener("shown.bs.offcanvas", function () {
$("#offcanvas-search-top input").focus();
$("#offcanvas-search-top input").keydown(function (e) {
if (e.keyCode == 13) {
if ($(this).val() != "") {
location.href = "products/search?keyword=" + $(this).val();
}
}
}
})
})
});
});
});
}
$(document).on("click", ".mobile-open-menu", function () {
const offcanvasMobileMenu = new bootstrap.Offcanvas('#offcanvas-mobile-menu')
offcanvasMobileMenu.show()
});
});

1
resources/lang/en/common.php
View File

@ -64,6 +64,7 @@ return [
'language' => 'Language',
'select_all' => 'Select All',
'sign_out' => 'Sign Out',
'menu' => 'Menu',
'id' => 'ID',
'created_at' => 'Created At',

1
resources/lang/zh_cn/common.php
View File

@ -63,6 +63,7 @@ return [
'language' => '语言',
'select_all' => '全选',
'sign_out' => '退出登录',
'menu' => '菜单',
'id' => 'ID',
'created_at' => '创建时间',

75
themes/default/layout/header.blade.php
View File

@ -62,63 +62,9 @@
<img src="{{ image_origin(system_setting('base.logo')) }}" class="img-fluid"></a>
</div>
<div class="menu-wrap">
<ul class="navbar-nav mx-auto">
@foreach ($menu_content as $menu)
<li
class="nav-item {{ isset($menu['children_group']) ? 'dropdown' : '' }} {{ isset($menu['isFull']) && $menu['isFull'] ? 'position-static' : '' }}">
<a class="nav-link fw-bold {{ isset($menu['children_group']) ? 'dropdown-toggle' : '' }}"
target="{{ isset($menu['new_window']) && $menu['new_window'] ? '_blank' : '_self' }}"
href="{{ $menu['link'] ?? '' }}">
{{ $menu['name'] }}
@if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }}
</span>
@endif
</a>
@if (isset($menu['children_group']) && $menu['children_group'])
<div class="dropdown-menu {{ $menu['isFull'] ? 'w-100' : '' }}"
style="min-width: {{ count($menu['children_group']) * 200 }}px">
<div class="card card-lg">
<div class="card-body">
<div class="container">
<div class="row">
@forelse ($menu['children_group'] as $group)
<div class="col-6 col-md">
@if ($group['name'])
<div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div>
@endif
@if ($group['type'] == 'image')
<a
target="{{ isset($group['image']['link']['new_window']) && $group['image']['link']['new_window'] ? '_blank' : '_self' }}"
href="{{ $group['image']['link'] }}"><img src="{{ $group['image']['image'] }}"
class="img-fluid"></a>
@else
<ul class="nav flex-column ul-children">
@foreach ($group['children'] as $children)
@if (!is_array($children['link']['text']))
<li class="nav-item">
<a
target="{{ isset($children['link']['new_window']) && $children['link']['new_window'] ? '_blank' : '_self' }}"
class="nav-link px-0"
href="{{ $children['link']['link'] }}">{{ $children['link']['text'] }}</a>
</li>
@endif
@endforeach
</ul>
@endif
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
@endif
</li>
@endforeach
</ul>
@if (!isMobile())
@include('shared.menu-pc')
@endif
</div>
<div class="right-btn">
<ul class="navbar-nav flex-row">
@ -168,7 +114,7 @@
<div class="header-mobile d-lg-none">
<div class="mobile-content">
<div class="left"><i class="bi bi-list"></i></div>
<div class="left mobile-open-menu"><i class="bi bi-list"></i></div>
<div class="center"><a href="{{ shop_route('home.index') }}">
<img src="{{ image_origin(system_setting('base.logo')) }}" class="img-fluid"></a>
</div>
@ -178,6 +124,19 @@
</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-mobile-menu">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">{{ __('common.menu') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body mobile-menu-wrap">
@if (isMobile())
@include('shared.menu-mobile')
@endif
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-right-cart"
aria-labelledby="offcanvasRightLabel"></div>

4
themes/default/product.blade.php
View File

@ -86,7 +86,7 @@
</div>
@if ($product['active'])
<div class="quantity-btns d-flex">
<div class="quantity-btns">
<div class="quantity-wrap">
<input type="text" class="form-control" :disabled="!product.quantity" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="quantity" name="quantity">
<div class="right">
@ -95,7 +95,7 @@
</div>
</div>
<button
class="btn btn-outline-dark ms-3 add-cart"
class="btn btn-outline-dark ms-md-3 add-cart"
:disabled="!product.quantity"
@click="addCart(false, this)"
><i class="bi bi-cart-fill me-1"></i>{{ __('shop/products.add_to_cart') }}

107
themes/default/shared/menu-mobile.blade.php Normal file
View File

@ -0,0 +1,107 @@
{{-- <ul class="navbar-nav">
@foreach ($menu_content as $menu)
<li
class="nav-item">
<div class="nav-item-text">
<a class="nav-link"
target="{{ isset($menu['new_window']) && $menu['new_window'] ? '_blank' : '_self' }}"
href="{{ $menu['link'] ?? '' }}">
{{ $menu['name'] }}
@if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }}
</span>
@endif
</a>
@if (isset($menu['children_group']) && $menu['children_group'])
<span><i class="bi bi-chevron-right"></i></span>
@endif
</div>
@if (isset($menu['children_group']) && $menu['children_group'])
<div class="dropdown-menu">
@forelse ($menu['children_group'] as $group)
<div class="children-group">
@if ($group['name'])
<div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div>
@endif
@if ($group['type'] == 'image')
<a
target="{{ isset($group['image']['link']['new_window']) && $group['image']['link']['new_window'] ? '_blank' : '_self' }}"
href="{{ $group['image']['link'] }}"><img src="{{ $group['image']['image'] }}"
class="img-fluid"></a>
@else
<ul class="nav flex-column ul-children">
@foreach ($group['children'] as $children)
@if (!is_array($children['link']['text']))
<li class="nav-item">
<a
target="{{ isset($children['link']['new_window']) && $children['link']['new_window'] ? '_blank' : '_self' }}"
class="nav-link px-0"
href="{{ $children['link']['link'] }}">{{ $children['link']['text'] }}</a>
</li>
@endif
@endforeach
</ul>
@endif
</div>
@endforeach
</div>
@endif
</li>
@endforeach
</ul> --}}
<div class="accordion accordion-flush" id="menu-accordion">
@foreach ($menu_content as $key => $menu)
<div class="accordion-item">
<div class="nav-item-text">
<a class="nav-link"
target="{{ isset($menu['new_window']) && $menu['new_window'] ? '_blank' : '_self' }}"
href="{{ $menu['link'] ?? '' }}">
{{ $menu['name'] }}
@if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }}
</span>
@endif
</a>
@if (isset($menu['children_group']) && $menu['children_group'])
<span class="collapsed" data-bs-toggle="collapse" data-bs-target="#flush-menu-{{ $key }}"><i class="bi bi-chevron-down"></i></span>
@endif
</div>
@if (isset($menu['children_group']) && $menu['children_group'])
<div class="accordion-collapse collapse" id="flush-menu-{{ $key }}" data-bs-parent="#menu-accordion">
@forelse ($menu['children_group'] as $group)
<div class="children-group mb-3">
@if ($group['name'])
<div class="group-name">{{ $group['name'] }}</div>
@endif
@if ($group['type'] == 'image')
<a
target="{{ isset($group['image']['link']['new_window']) && $group['image']['link']['new_window'] ? '_blank' : '_self' }}"
href="{{ $group['image']['link'] }}"><img src="{{ $group['image']['image'] }}"
class="img-fluid"></a>
@else
<ul class="nav flex-column ul-children">
@foreach ($group['children'] as $children)
@if (!is_array($children['link']['text']))
<li class="nav-item">
<a
target="{{ isset($children['link']['new_window']) && $children['link']['new_window'] ? '_blank' : '_self' }}"
class="nav-link px-0"
href="{{ $children['link']['link'] }}">{{ $children['link']['text'] }}</a>
</li>
@endif
@endforeach
</ul>
@endif
</div>
@endforeach
</div>
@endif
</div>
@endforeach
</div>

57
themes/default/shared/menu-pc.blade.php Normal file
View File

@ -0,0 +1,57 @@
<ul class="navbar-nav mx-auto">
@foreach ($menu_content as $menu)
<li
class="nav-item {{ isset($menu['children_group']) ? 'dropdown' : '' }} {{ isset($menu['isFull']) && $menu['isFull'] ? 'position-static' : '' }}">
<a class="nav-link fw-bold {{ isset($menu['children_group']) ? 'dropdown-toggle' : '' }}"
target="{{ isset($menu['new_window']) && $menu['new_window'] ? '_blank' : '_self' }}"
href="{{ $menu['link'] ?? '' }}">
{{ $menu['name'] }}
@if (isset($menu['badge']) && $menu['badge']['name'])
<span class="badge"
style="background-color: {{ $menu['badge']['bg_color'] }}; color: {{ $menu['badge']['text_color'] }}; border-color: {{ $menu['badge']['bg_color'] }}">
{{ $menu['badge']['name'] }}
</span>
@endif
</a>
@if (isset($menu['children_group']) && $menu['children_group'])
<div class="dropdown-menu {{ $menu['isFull'] ? 'w-100' : '' }}"
style="min-width: {{ count($menu['children_group']) * 200 }}px">
<div class="card card-lg">
<div class="card-body">
<div class="container">
<div class="row">
@forelse ($menu['children_group'] as $group)
<div class="col-6 col-md">
@if ($group['name'])
<div class="mb-3 fw-bold group-name">{{ $group['name'] }}</div>
@endif
@if ($group['type'] == 'image')
<a
target="{{ isset($group['image']['link']['new_window']) && $group['image']['link']['new_window'] ? '_blank' : '_self' }}"
href="{{ $group['image']['link'] }}"><img src="{{ $group['image']['image'] }}"
class="img-fluid"></a>
@else
<ul class="nav flex-column ul-children">
@foreach ($group['children'] as $children)
@if (!is_array($children['link']['text']))
<li class="nav-item">
<a
target="{{ isset($children['link']['new_window']) && $children['link']['new_window'] ? '_blank' : '_self' }}"
class="nav-link px-0"
href="{{ $children['link']['link'] }}">{{ $children['link']['text'] }}</a>
</li>
@endif
@endforeach
</ul>
@endif
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
@endif
</li>
@endforeach
</ul>