From 01ef804c037a322963a2aa6ada98610b8d307bb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Tue, 4 Nov 2025 11:48:24 -0300
Subject: [PATCH] Add custom menu and navbar components: Introduced a new menu
 component to dynamically render menu items from the Pages model, including
 nested children. Added a social media navbar component for enhanced user
 engagement. Implemented an offcanvas footer for additional contact
 information and social links, improving overall site navigation and
 accessibility.

---
 .../views/components/custom/menu.blade.php    | 77 +++++++++++++++++++
 .../components/custom/navbar-other.blade.php  | 17 ++++
 .../components/custom/offcanvas.blade.php     | 13 ++++
 3 files changed, 107 insertions(+)
 create mode 100644 resources/views/components/custom/menu.blade.php
 create mode 100644 resources/views/components/custom/navbar-other.blade.php
 create mode 100644 resources/views/components/custom/offcanvas.blade.php

diff --git a/resources/views/components/custom/menu.blade.php b/resources/views/components/custom/menu.blade.php
new file mode 100644
index 0000000..3cd7efd
--- /dev/null
+++ b/resources/views/components/custom/menu.blade.php
@@ -0,0 +1,77 @@
+<?php 
+// Get menu items from Pages with nested children
+$menuItems = \App\Models\Page::with(['children' => function ($query) {
+    $query->where('status', 'published')
+        ->where('show_in_menu', true)
+        ->orderBy('sort_order', 'asc')
+        ->orderBy('title', 'asc');
+    }, 'children.children' => function ($query) {
+        $query->where('status', 'published')
+            ->where('show_in_menu', true)
+            ->orderBy('sort_order', 'asc')
+            ->orderBy('title', 'asc');
+    }])
+    ->whereNull('parent_id')
+    ->where('status', 'published')
+    ->where('show_in_menu', true)
+    ->orderBy('sort_order', 'asc')
+    ->orderBy('title', 'asc')
+    ->get();
+?>
+
+@if($menuItems->isNotEmpty())
+    <ul class="navbar-nav">
+        @foreach($menuItems as $item)
+            @php
+                $hasChildren = $item->children->isNotEmpty();
+            @endphp
+            <li class="nav-item {{ $hasChildren ? 'dropdown' : '' }}">
+                @if($hasChildren)
+                    <a class="nav-link dropdown-toggle font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]" 
+                       href="{{ route('page.show', $item->slug) }}" 
+                       data-bs-toggle="dropdown">
+                        {{ $item->title }}
+                    </a>
+                    <ul class="dropdown-menu">
+                        @foreach($item->children as $child)
+                            @php
+                                $childHasChildren = $child->children->isNotEmpty();
+                            @endphp
+                            @if($childHasChildren)
+                                <li class="dropdown dropdown-submenu dropend">
+                                    <a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" 
+                                       href="{{ route('page.show', $child->slug) }}" 
+                                       data-bs-toggle="dropdown">
+                                        {{ $child->title }}
+                                    </a>
+                                    <ul class="dropdown-menu">
+                                        @foreach($child->children as $grandChild)
+                                            <li class="nav-item">
+                                                <a class="dropdown-item hover:!text-[#e31e24]" 
+                                                   href="{{ route('page.show', $grandChild->slug) }}">
+                                                    {{ $grandChild->title }}
+                                                </a>
+                                            </li>
+                                        @endforeach
+                                    </ul>
+                                </li>
+                            @else
+                                <li class="nav-item">
+                                    <a class="dropdown-item hover:!text-[#e31e24]" 
+                                       href="{{ route('page.show', $child->slug) }}">
+                                        {{ $child->title }}
+                                    </a>
+                                </li>
+                            @endif
+                        @endforeach
+                    </ul>
+                @else
+                    <a class="nav-link font-bold !tracking-[normal] hover:!text-[#e31e24] !text-[.85rem]" 
+                       href="{{ route('page.show', $item->slug) }}">
+                        {{ $item->title }}
+                    </a>
+                @endif
+            </li>
+        @endforeach
+    </ul>
+@endif
\ No newline at end of file
diff --git a/resources/views/components/custom/navbar-other.blade.php b/resources/views/components/custom/navbar-other.blade.php
new file mode 100644
index 0000000..7a732e5
--- /dev/null
+++ b/resources/views/components/custom/navbar-other.blade.php
@@ -0,0 +1,17 @@
+<div class="navbar-other w-full !flex !ml-auto">
+            <ul class="navbar-nav !flex-row !items-center !ml-auto">
+              <li class="nav-item">
+                <nav class="nav social social-muted justify-end text-right">
+                  <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
+                  <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
+                  <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
+                  <a class="m-[0_0_0_.7rem] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
+                </nav>
+                <!-- /.social -->
+              </li>
+              <li class="nav-item xl:!hidden lg:!hidden">
+                <button class="hamburger offcanvas-nav-btn"><span></span></button>
+              </li>
+            </ul>
+            <!-- /.navbar-nav -->
+          </div>asdad
\ No newline at end of file
diff --git a/resources/views/components/custom/offcanvas.blade.php b/resources/views/components/custom/offcanvas.blade.php
new file mode 100644
index 0000000..87b4e0f
--- /dev/null
+++ b/resources/views/components/custom/offcanvas.blade.php
@@ -0,0 +1,13 @@
+ <div class="offcanvas-footer xl:!hidden lg:!hidden">
+                <div>
+                  <a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
+                  <br> 00 (123) 456 78 90 <br>
+                  <nav class="nav social social-white !mt-4">
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
+                  <a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
+                  </nav>
+                  <!-- /.social -->
+                </div>
+              </div>
\ No newline at end of file