# Header & Footer Entegrasyonu

Fluid Partial'lar kullanarak site genelinde header (üst bilgi) ve footer (alt bilgi) entegrasyonunu kapsar.

---

## Genel Mimari

```
Layouts/Default.html          ← Genel sayfa iskeleti
├── Partials/Header/Main.html ← Header partial
├── Templates/Page/Default.html ← Sayfa içeriği
└── Partials/Footer/Main.html ← Footer partial
```

---

## Layout Dosyası

`Resources/Private/Layouts/Default.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:render partial="Header/Main" arguments="{mainMenu: mainMenu, data: data}" />

<main id="main-content">
    <f:render section="Main" />
</main>

<f:render partial="Footer/Main" arguments="{data: data}" />

</html>
```

---

## Header Partial

`Resources/Private/Partials/Header/Main.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<header class="site-header">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between py-4">
            <!-- Logo -->
            <a href="/" class="site-logo">
                <f:image src="EXT:my_site_package/Resources/Public/Images/logo/logo.svg"
                         alt="Site Logo" width="180" height="50" />
            </a>

            <!-- Ana Menü -->
            <nav class="main-navigation hidden lg:flex">
                <f:for each="{mainMenu}" as="item">
                    <div class="menu-item-wrapper relative">
                        <a href="{item.link}"
                           class="px-4 py-2 {f:if(condition: item.active, then: 'text-primary font-bold', else: 'text-gray-700')}"
                           {f:if(condition: item.target, then: 'target="{item.target}"')}>
                            {item.title}
                        </a>

                        <!-- Alt menü -->
                        <f:if condition="{item.children}">
                            <div class="submenu absolute top-full left-0 bg-white shadow-lg rounded-lg p-4 hidden">
                                <f:for each="{item.children}" as="child">
                                    <a href="{child.link}" class="block px-4 py-2 hover:bg-gray-100">
                                        {child.title}
                                    </a>
                                </f:for>
                            </div>
                        </f:if>
                    </div>
                </f:for>
            </nav>

            <!-- Mobil Menü Butonu -->
            <button class="mobile-menu-toggle lg:hidden" aria-label="Menü">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
        </div>
    </div>

    <!-- Mobil Menü -->
    <div class="mobile-menu lg:hidden hidden">
        <nav class="px-4 py-6">
            <f:for each="{mainMenu}" as="item">
                <a href="{item.link}" class="block py-3 border-b border-gray-200">
                    {item.title}
                </a>
                <f:if condition="{item.children}">
                    <div class="pl-4">
                        <f:for each="{item.children}" as="child">
                            <a href="{child.link}" class="block py-2 text-sm text-gray-600">
                                {child.title}
                            </a>
                        </f:for>
                    </div>
                </f:if>
            </f:for>
        </nav>
    </div>
</header>

</html>
```

---

## Footer Partial

`Resources/Private/Partials/Footer/Main.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<footer class="site-footer bg-gray-900 text-white">
    <div class="container mx-auto px-4">
        <!-- Üst Footer -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 py-12">
            <!-- Hakkında -->
            <div>
                <f:image src="EXT:my_site_package/Resources/Public/Images/logo/logo-white.svg"
                         alt="Logo" width="150" class="mb-4" />
                <p class="text-gray-400 text-sm">
                    Modern ve güvenilir web çözümleri sunuyoruz.
                </p>
            </div>

            <!-- Hızlı Bağlantılar -->
            <div>
                <h3 class="text-lg font-semibold mb-4">Hızlı Bağlantılar</h3>
                <ul class="space-y-2">
                    <li><a href="/" class="text-gray-400 hover:text-white">Ana Sayfa</a></li>
                    <li><f:link.page pageUid="2" class="text-gray-400 hover:text-white">Hakkımızda</f:link.page></li>
                    <li><f:link.page pageUid="3" class="text-gray-400 hover:text-white">Hizmetler</f:link.page></li>
                    <li><f:link.page pageUid="4" class="text-gray-400 hover:text-white">İletişim</f:link.page></li>
                </ul>
            </div>

            <!-- İletişim -->
            <div>
                <h3 class="text-lg font-semibold mb-4">İletişim</h3>
                <ul class="space-y-2 text-gray-400 text-sm">
                    <li>Adres: İstanbul, Türkiye</li>
                    <li>Telefon: +90 (212) 000 00 00</li>
                    <li>E-posta: info@example.com</li>
                </ul>
            </div>
        </div>

        <!-- Alt Footer -->
        <div class="border-t border-gray-800 py-6 text-center text-gray-500 text-sm">
            <p>&copy; <f:format.date format="Y" date="now" /> Tüm hakları saklıdır.
               TYPO3 CMS ile güçlendirilmiştir.</p>
        </div>
    </div>
</footer>

</html>
```

---

## TypoScript ile Menü Yapılandırması

`Configuration/Sets/MySitePackage/setup.typoscript`:

```typoscript
page.10.dataProcessing {
    # Ana menü
    10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    10 {
        levels = 3
        as = mainMenu
        includeSpacer = 0
        titleField = nav_title // title
    }

    # Footer menüsü
    20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    20 {
        special = directory
        special.value = 5
        levels = 1
        as = footerMenu
    }

    # Breadcrumb
    30 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    30 {
        special = rootline
        special.range = 0|-1
        as = breadcrumb
    }
}
```

---

## Menü DataProcessing Türleri

| Tür | Açıklama |
|-----|----------|
| `levels = N` | Belirli seviye derinliğinde normal menü |
| `special = directory` | Belirli sayfanın alt sayfalarından menü |
| `special = rootline` | Breadcrumb (yol izleme) menüsü |
| `special = browse` | Önceki/sonraki sayfa navigasyonu |
| `special = language` | Dil seçici menüsü |

---

## Sticky Header JavaScript

`Resources/Public/JavaScript/main.js`:

```javascript
// Sticky Header
document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('.site-header');
    const mobileToggle = document.querySelector('.mobile-menu-toggle');
    const mobileMenu = document.querySelector('.mobile-menu');

    // Scroll'da header'a class ekle
    window.addEventListener('scroll', function () {
        if (window.scrollY > 100) {
            header.classList.add('sticky', 'shadow-lg');
        } else {
            header.classList.remove('sticky', 'shadow-lg');
        }
    });

    // Mobil menü toggle
    if (mobileToggle && mobileMenu) {
        mobileToggle.addEventListener('click', function () {
            mobileMenu.classList.toggle('hidden');
            mobileToggle.classList.toggle('active');
        });
    }

    // Dropdown menü
    const menuItems = document.querySelectorAll('.menu-item-wrapper');
    menuItems.forEach(function (item) {
        item.addEventListener('mouseenter', function () {
            const submenu = item.querySelector('.submenu');
            if (submenu) submenu.classList.remove('hidden');
        });
        item.addEventListener('mouseleave', function () {
            const submenu = item.querySelector('.submenu');
            if (submenu) submenu.classList.add('hidden');
        });
    });
});
```

---

## Kaynaklar

- [TYPO3 MenuProcessor](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/ContentElements/AddingYourOwnContentElements.html)
- [Fluid ViewHelper Reference](https://docs.typo3.org/other/typo3/view-helper-reference/main/en-us/)
