# Migracja menu z hardkodowanego HTML → CMS (MENU_GLOWNE)

## Placeholder w szablonie
W HTML layoutu (`pp_layouts.html`) zamiast hardkodowanej listy linków używamy:
```
[MENU_GLOWNE:1]
```
gdzie `1` to ID menu z tabeli `pp_menus`.

## Co generuje [MENU_GLOWNE:1]
Renderuje `templates/menu/main-menu.php`, który zwraca:
```html
<div id="main-menu">
  <div id="menu-container-{menu_id}">
    <ul class="level-0 clear">
      <li id="link-{page_id}" class="[active|open|parent]">
        <a href="{url}" title="{title}">{title}</a>
      </li>
      ...
    </ul>
  </div>
</div>
<button id="main-menu-btn" aria-label="Menu"><span></span><span></span><span></span></button>
<script class="footer">
  // jQuery mobile toggle: #main-menu.visible, #main-menu-btn.active
</script>
```
Skrypt używa zmiennych `click_event` i `windowsize` z `libraries/functions-front.js`.

## Strony menu (pp_pages)
Dla stron onepage wszystkie pozycje menu to **page_type=3** (link):
- `pp_pages`: `menu_id=1, page_type=3, status=1, o={kolejność}, start=0`
- `pp_pages_langs`: `page_id=X, lang_id='pl', title='Nazwa', link='#anchor'`

Strona startowa (start=1) też ustawiamy na page_type=3 z link='#home' — CMS i tak wczyta layout na podstawie start=1, a [ZAWARTOSC] (jeśli brak w szablonie) jest po prostu ignorowane.

## Wymagania JS w layoucie (pp_layouts.js)
CMS menu template wymaga jQuery i functions-front.js:
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="/libraries/functions-front.js"></script>
```
Następnie klasy footer dla bibliotek:
```html
<script class="footer" src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script class="footer">
AOS.init({ once: true, duration: 600, easing: "ease-out" });
$(function() {
    var $navMain = $(".nav-main");
    $(window).on("scroll", function() {
        $navMain.toggleClass("scrolled", $(this).scrollTop() > 50);
    });
    // Zamknij menu po kliknięciu kotwicy (onepage)
    $(document).on("click", "#main-menu a", function() {
        if ($(window).width() <= 767) {
            $("#main-menu").removeClass("visible");
            $("#main-menu-btn").removeClass("active");
        }
    });
});
</script>
```

## Szablon main-menu.php (templates/menu/main-menu.php)
Zamiast Font Awesome używamy hamburger CSS z 3× `<span>`:
```html
<button id="main-menu-btn" aria-label="Menu"><span></span><span></span><span></span></button>
```
JS toggleuje klasy `.active` na buttonie i `.visible` na `#main-menu`.

## SCSS dla menu CMS
`.nav-main` musi mieć `position: relative` (dla absolute dropdown na mobile).

```scss
#main-menu {
  @include respond-above(sm) { display: block; }
  @include respond-below(sm) {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(#fff, .97);
    border-top: 1px solid #e5e5e5;
    z-index: 99;
    &.visible { display: block; }
  }
  ul { list-style: none; margin: 0; padding: 0;
    @include respond-above(sm) { @include flexbox; gap: 2rem; }
    @include respond-below(sm) { @include flexbox; @include flex-direction(column); padding: 1rem 1.5rem; }
  }
  li.active > a { color: $primary; }
  a { font-family: 'Montserrat'; font-weight: 600; text-transform: uppercase; color: #555; }
}
#main-menu-btn {
  display: none;
  @include respond-below(sm) { @include flexbox; @include flex-direction(column); gap: 5px; }
  background: none; border: none; cursor: pointer; padding: .25rem;
  span { display: block; width: 24px; height: 2px; background: #444; @include transition(all, .3s, ease); }
  &.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  &.active span:nth-child(2) { opacity: 0; }
  &.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
```

## Kroki migracji (podsumowanie)
1. Dodaj strony do pp_pages + pp_pages_langs (page_type=3, link=#anchor)
2. Zaktualizuj stronę główną (page_type=3, link=#home)
3. W HTML layoutu zastąp hardkodowane `<ul>` + button + mobile div przez `[MENU_GLOWNE:1]`
4. Zaktualizuj JS layoutu — dodaj jQuery + functions-front.js
5. Zaktualizuj main-menu.php — hamburger CSS zamiast FA
6. Zaktualizuj SCSS — stare `.nav-links/.nav-toggle/.nav-mobile` → nowe `#main-menu/#main-menu-btn`
7. Skompiluj SCSS
