<?php
  global $page;
  $navColor = false;

  if(
    $page["id"] == 8 ||
    $page["id"] == 7 ||
    $page["id"] == 6) {
    $navColor = true;
  }
?>

<nav class="nav_menu" id="page_nav_panel" navColor="<?= $navColor ? "active" : ""; ?>">
  <div class="nav_menu__inner">
    <div class="nav_menu__logo">
      <a href="/">
        <img src="/upload/filemanager/Project-Design/logos/project-pro/logo-white.svg" alt="logo">
        <img src="/upload/filemanager/Project-Design/logos/project-pro/logo-color.svg" alt="logo">
      </a>
    </div>

    <div class="nav_menu__nav">
      <ul class="nav_menu__nav_arr nav_menu__lvl_1">
        <li class="nav_menu__link parent">
          <span class="nav_menu__link__lvl_1">Strony www</span>
          <ul class="nav_menu__lvl_2">
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 23 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 24 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 25 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 26 );?>
            </li>
          </ul>
        </li>
        <li class="nav_menu__link parent">
          <span class="nav_menu__link__lvl_1">Marketing internetowy</span>
          <ul class="nav_menu__lvl_2">
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 27 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 28 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 29 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 30 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 31 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 182 );?>
            </li>
          </ul>
        </li>
        <li class="nav_menu__link parent">
          <span class="nav_menu__link__lvl_1">Oferta dedykowana</span>
          <ul class="nav_menu__lvl_2">
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 32 );?>
            </li>
            <li class="nav_menu__tile">
              <?= \front\view\Scontainers::scontainer( 33 );?>
            </li>
          </ul>
        </li>
        <li class="nav_menu__link">
          <a href="/realizacje" class="nav_menu__link__lvl_1">Realizacje</a>
        </li>
        <li class="nav_menu__link">
          <a href="/blog" class="nav_menu__link__lvl_1">Blog</a>
        </li>
        <li class="nav_menu__link">
          <a href="/o-nas" class="nav_menu__link__lvl_1">O nas</a>
        </li>
        <li class="nav_menu__link">
          <a href="/kontakt" class="nav_menu__link__lvl_1 nav_menu__link__btn">Kontakt</a>
        </li>
      </ul>
    </div>
    <div class="nav_menu__hamburger">
      <div class="nav_menu__hamburger_wrapper">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>
</nav>

<script class="footer" type="text/javascript">
$(document).ready(function() {
  let nav_logoHeight = $('#page_nav_panel .nav_menu__logo img').height()
  $("#page_nav_panel .nav_menu__logo").css("height", nav_logoHeight);

  let nav_height = $('#page_nav_panel.nav_menu').height()

  $("#page_nav_panel .nav_menu__link.parent").hover(
    function() {
      $(this).attr('link_status', 'true')
      $(this).find(".nav_menu__lvl_2").css("padding-top", 20 + nav_height);
      $('#page_nav_panel.nav_menu').attr('active', true)
    },
    function() {
      $(this).attr('link_status', 'false')
      $(this).find(".nav_menu__lvl_2").css("padding-top", 0);
      $('#page_nav_panel.nav_menu').attr('active', false)
    }
  )

  $(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {
      $("#page_nav_panel").attr("header-fixed", "true")
    } else {
      $("#page_nav_panel").attr("header-fixed", "false")
    }
  })
  if ($(this).scrollTop() >= 50) {
    $("#page_nav_panel").attr("header-fixed", "true")
  }

  $("#page_nav_panel .nav_menu__hamburger").on("click", function() {
    $("body").toggleClass("fixed")
    $(this).toggleClass("active")
    $("#page_nav_panel .nav_menu__nav").toggleClass("active_mobile")
  })

});
</script>