From 8675325f504ee1a87bbd8374c4792c53f3f2e7d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 21 May 2026 20:54:28 +0300
Subject: [PATCH] feat: enhance header component with responsive navigation and
 tooltip support, improving user experience and accessibility

---
 .../views/components/front/header.blade.php   | 183 ++++++++++++++++-
 resources/views/partials/header.blade.php     | 192 ++++++++++++++----
 2 files changed, 336 insertions(+), 39 deletions(-)

diff --git a/resources/views/components/front/header.blade.php b/resources/views/components/front/header.blade.php
index dc82893..5a4e52b 100644
--- a/resources/views/components/front/header.blade.php
+++ b/resources/views/components/front/header.blade.php
@@ -50,15 +50,15 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
               <a class="transition-none hidden lg:!flex xl:!flex" href="/"><img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image" loading="lazy">
                 <img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy"></a>
             </div>
-            <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
-              <ul class="navbar-nav lg:!ml-auto xl:!ml-auto">                  
+            <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body homepage-nav-panel homepage-nav-left">
+              <ul class="navbar-nav">                  
                 @foreach($menuItems->slice(0, ceil($menuItems->count() / 2)) as $item)
                     <x-front.menu-item :item="$item" />
                 @endforeach
               </ul>
             </div>
-            <div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body">
-              <ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
+            <div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body homepage-nav-panel homepage-nav-right">
+              <ul class="navbar-nav">
                 @foreach($menuItems->slice(ceil($menuItems->count() / 2)) as $item)
                     <x-front.menu-item :item="$item" />
                 @endforeach
@@ -143,6 +143,131 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
 
 @push('styles')
 <style>
+/* Logo Visibility Fix */
+.logo-dark, .logo-light { display: none !important; }
+.navbar-light .logo-dark, .navbar-dark .logo-light { display: block !important; }
+
+/* Sticky scroll: açık arka planda koyu logo */
+.navbar.fixed.navbar-light .logo-dark,
+.navbar.transparent.fixed .logo-dark,
+.navbar-clone.navbar-light .logo-dark {
+    display: block !important;
+}
+.navbar.fixed.navbar-light .logo-light,
+.navbar.transparent.fixed .logo-light,
+.navbar-clone.navbar-light .logo-light {
+    display: none !important;
+}
+
+/* Tema center-logo.fixed kurallarını geçersiz kıl */
+.navbar.center-logo.fixed .offcanvas-header .logo-dark,
+.navbar-clone.center-logo .offcanvas-header .logo-dark {
+    display: block !important;
+}
+.navbar.center-logo.fixed .offcanvas-header .logo-light,
+.navbar-clone.center-logo .offcanvas-header .logo-light {
+    display: none !important;
+}
+
+/* Mobil offcanvas menüde yalnızca light logo */
+@media (max-width: 991.98px) {
+    .offcanvas .logo-dark { display: none !important; }
+    .offcanvas .logo-light { display: block !important; }
+}
+
+/* Anasayfa: sol/sağ nav eşit genişlik, logo tam ortada, uzun metinler ellipsis */
+@media (min-width: 992px) {
+    .navbar.center-logo .offcanvas-nav {
+        display: grid !important;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+        align-items: center;
+        width: 100%;
+        flex-direction: row !important;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .offcanvas-header {
+        grid-column: 2;
+        grid-row: 1;
+        position: static;
+        z-index: 5;
+        width: auto !important;
+        max-width: none;
+        margin: 0 !important;
+        padding: 0 !important;
+        transform: none;
+        justify-content: center !important;
+        justify-self: center;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .homepage-nav-left {
+        grid-column: 1;
+        grid-row: 1;
+        width: 100% !important;
+        min-width: 0;
+        flex: none !important;
+        display: flex !important;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .navbar.center-logo .offcanvas-nav > .homepage-nav-right {
+        grid-column: 3;
+        grid-row: 1;
+        width: 100% !important;
+        min-width: 0;
+        flex: none !important;
+        display: flex !important;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .navbar.center-logo .homepage-nav-panel .navbar-nav {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        min-width: 0;
+        margin: 0;
+    }
+
+    .navbar.center-logo .homepage-nav-left .navbar-nav {
+        justify-content: flex-end;
+    }
+
+    .navbar.center-logo .homepage-nav-right .navbar-nav {
+        justify-content: flex-start;
+    }
+
+    .navbar.center-logo .homepage-nav-panel .nav-item {
+        min-width: 0;
+        flex: 0 1 auto;
+    }
+
+    .navbar.center-logo .homepage-nav-panel .nav-link {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+    }
+}
+
+.tooltip.homepage-nav-tooltip .tooltip-inner {
+    max-width: none;
+    white-space: nowrap;
+    background-color: rgba(33, 38, 44, 0.95);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    padding: 0.35rem 0.65rem;
+}
+
+.tooltip.homepage-nav-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
+    border-bottom-color: rgba(33, 38, 44, 0.95);
+}
+
+.tooltip.homepage-nav-tooltip.bs-tooltip-top .tooltip-arrow::before {
+    border-top-color: rgba(33, 38, 44, 0.95);
+}
+
 /* Smoother Offcanvas Menu Transition */
 .offcanvas {
     transition: transform 0.4s cubic-bezier(0.77, 0.2, 0.05, 1.0) !important;
@@ -174,6 +299,44 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
 
 @push('scripts')
 <script>
+function initHomepageNavEllipsisTooltips() {
+    if (window.matchMedia('(max-width: 991.98px)').matches) {
+        return;
+    }
+
+    document.querySelectorAll('.navbar.center-logo .homepage-nav-panel .nav-link').forEach(function(link) {
+        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+            var existingTooltip = bootstrap.Tooltip.getInstance(link);
+            if (existingTooltip) {
+                existingTooltip.dispose();
+            }
+        }
+
+        link.removeAttribute('title');
+
+        if (link.scrollWidth <= link.clientWidth) {
+            return;
+        }
+
+        var fullText = link.textContent.trim();
+        if (!fullText) {
+            return;
+        }
+
+        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+            new bootstrap.Tooltip(link, {
+                title: fullText,
+                trigger: 'hover',
+                placement: 'bottom',
+                customClass: 'homepage-nav-tooltip',
+                container: 'body',
+            });
+        } else {
+            link.setAttribute('title', fullText);
+        }
+    });
+}
+
 document.addEventListener('DOMContentLoaded', function() {
     var offcanvases = document.querySelectorAll('.offcanvas-nav');
     var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
@@ -188,6 +351,18 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     }
+
+    initHomepageNavEllipsisTooltips();
+
+    if (document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(initHomepageNavEllipsisTooltips);
+    }
+
+    var resizeTimer;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(initHomepageNavEllipsisTooltips, 150);
+    });
 });
 </script>
 @endpush
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 9e9ef82..d4a20d3 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -55,18 +55,18 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
                 <x-custom.language-selector class="!ml-0" />
               </div>
             </div>
-            <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
+            <div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body homepage-nav-panel homepage-nav-left">
               <div class="xl:!hidden lg:!hidden w-full pb-4 mb-2 border-b border-white/10">
                 @include('components.custom.language-selector', ['variant' => 'offcanvas'])
               </div>
-              <ul class="navbar-nav lg:!ml-auto xl:!ml-auto">                  
+              <ul class="navbar-nav">                  
                 @foreach($menuItems->slice(0, ceil($menuItems->count() / 2)) as $item)
                     <x-front.menu-item :item="$item" />
                 @endforeach
               </ul>
             </div>
-            <div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body">
-              <ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
+            <div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body homepage-nav-panel homepage-nav-right">
+              <ul class="navbar-nav">
                 @foreach($menuItems->slice(ceil($menuItems->count() / 2)) as $item)
                     <x-front.menu-item :item="$item" />
                 @endforeach
@@ -188,61 +188,136 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
   </nav>
 </header>
 
-@push('styles')
 <style>
 /* Logo Visibility Fix */
 .logo-dark, .logo-light { display: none !important; }
 .navbar-light .logo-dark, .navbar-dark .logo-light { display: block !important; }
-/* Inside the offcanvas (mobile menu), we only want the light logo */
-.offcanvas .logo-dark { display: none !important; }
-.offcanvas .logo-light { display: block !important; }
 
-/* Anasayfa: logo + dil seçici viewport merkezinde (menü genişliğinden bağımsız) */
+/* Sticky scroll: açık arka planda koyu logo */
+.navbar.fixed.navbar-light .logo-dark,
+.navbar.transparent.fixed .logo-dark,
+.navbar-clone.navbar-light .logo-dark {
+    display: block !important;
+}
+.navbar.fixed.navbar-light .logo-light,
+.navbar.transparent.fixed .logo-light,
+.navbar-clone.navbar-light .logo-light {
+    display: none !important;
+}
+
+/* Tema center-logo.fixed kurallarını geçersiz kıl (offcanvas-header hedefli) */
+.navbar.center-logo.fixed .homepage-header-brand .logo-dark,
+.navbar-clone.center-logo .homepage-header-brand .logo-dark {
+    display: block !important;
+}
+.navbar.center-logo.fixed .homepage-header-brand .logo-light,
+.navbar-clone.center-logo .homepage-header-brand .logo-light {
+    display: none !important;
+}
+
+/* Mobil offcanvas menüde yalnızca light logo */
+@media (max-width: 991.98px) {
+    .offcanvas .logo-dark { display: none !important; }
+    .offcanvas .logo-light { display: block !important; }
+}
+
+/* Anasayfa: sol/sağ nav eşit genişlik, logo tam ortada, uzun metinler ellipsis */
 @media (min-width: 992px) {
-    .navbar.center-logo .navbar-collapse-wrapper {
-        position: relative;
+    .navbar.center-logo .offcanvas-nav {
+        display: grid !important;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+        align-items: center;
+        width: 100%;
+        flex-direction: row !important;
     }
 
     .navbar.center-logo .offcanvas-nav > .homepage-header-brand {
-        position: absolute;
-        left: 50%;
-        top: 0;
-        bottom: 0;
+        grid-column: 2;
+        grid-row: 1;
+        position: static;
         z-index: 5;
         width: auto !important;
         max-width: none;
         margin: 0 !important;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        transform: translateX(-50%);
-        pointer-events: none;
-        justify-content: center !important;
-        gap: 0.5rem;
-    }
-
-    .navbar.center-logo .offcanvas-nav > .homepage-header-brand > * {
+        padding: 0 !important;
+        transform: none;
         pointer-events: auto;
+        justify-content: center !important;
+        justify-self: center;
+        gap: 0.5rem;
     }
 
     .navbar.center-logo .homepage-header-brand__language .navbar-other {
         margin-left: 0 !important;
     }
 
-    .navbar.center-logo .offcanvas-nav > .offcanvas-body:not(.order-4) {
-        flex: 1 1 0;
+    .navbar.center-logo .offcanvas-nav > .homepage-nav-left {
+        grid-column: 1;
+        grid-row: 1;
+        width: 100% !important;
         min-width: 0;
-        width: auto !important;
+        flex: none !important;
+        display: flex !important;
+        justify-content: flex-end;
+        align-items: center;
     }
 
-    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 .navbar-nav,
-    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-1 {
+    .navbar.center-logo .offcanvas-nav > .homepage-nav-right {
+        grid-column: 3;
+        grid-row: 1;
+        width: 100% !important;
+        min-width: 0;
+        flex: none !important;
+        display: flex !important;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .navbar.center-logo .homepage-nav-panel .navbar-nav {
+        display: flex;
+        flex-wrap: nowrap;
+        width: 100%;
+        min-width: 0;
+        margin: 0;
+    }
+
+    .navbar.center-logo .homepage-nav-left .navbar-nav {
         justify-content: flex-end;
     }
 
-    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 .navbar-nav,
-    .navbar.center-logo .offcanvas-nav > .offcanvas-body.order-3 {
+    .navbar.center-logo .homepage-nav-right .navbar-nav {
         justify-content: flex-start;
     }
+
+    .navbar.center-logo .homepage-nav-panel .nav-item {
+        min-width: 0;
+        flex: 0 1 auto;
+    }
+
+    .navbar.center-logo .homepage-nav-panel .nav-link {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+    }
+}
+
+.tooltip.homepage-nav-tooltip .tooltip-inner {
+    max-width: none;
+    white-space: nowrap;
+    background-color: rgba(33, 38, 44, 0.95);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    padding: 0.35rem 0.65rem;
+}
+
+.tooltip.homepage-nav-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
+    border-bottom-color: rgba(33, 38, 44, 0.95);
+}
+
+.tooltip.homepage-nav-tooltip.bs-tooltip-top .tooltip-arrow::before {
+    border-top-color: rgba(33, 38, 44, 0.95);
 }
 
 /* Smoother Offcanvas Menu Transition */
@@ -283,10 +358,46 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
     }
 }
 </style>
-@endpush
 
-@push('scripts')
 <script>
+function initHomepageNavEllipsisTooltips() {
+    if (window.matchMedia('(max-width: 991.98px)').matches) {
+        return;
+    }
+
+    document.querySelectorAll('.navbar.center-logo .homepage-nav-panel .nav-link').forEach(function(link) {
+        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+            var existingTooltip = bootstrap.Tooltip.getInstance(link);
+            if (existingTooltip) {
+                existingTooltip.dispose();
+            }
+        }
+
+        link.removeAttribute('title');
+
+        if (link.scrollWidth <= link.clientWidth) {
+            return;
+        }
+
+        var fullText = link.textContent.trim();
+        if (!fullText) {
+            return;
+        }
+
+        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+            new bootstrap.Tooltip(link, {
+                title: fullText,
+                trigger: 'hover',
+                placement: 'bottom',
+                customClass: 'homepage-nav-tooltip',
+                container: 'body',
+            });
+        } else {
+            link.setAttribute('title', fullText);
+        }
+    });
+}
+
 document.addEventListener('DOMContentLoaded', function() {
     var offcanvases = document.querySelectorAll('.offcanvas-nav');
     var hamburgers = document.querySelectorAll('.hamburger.offcanvas-nav-btn');
@@ -301,6 +412,17 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     }
+
+    initHomepageNavEllipsisTooltips();
+
+    if (document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(initHomepageNavEllipsisTooltips);
+    }
+
+    var resizeTimer;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(initHomepageNavEllipsisTooltips, 150);
+    });
 });
-</script>
-@endpush
\ No newline at end of file
+</script>
\ No newline at end of file