{% set items=[{title: "+ Styling", url: "", children: [{title: "Interiors", url:"interiors"}, {title: "Still Life", url:"still-life"}, {title: "Kids", url:"kids"}]}, {title: "About", url: "about"}, {title: "Contact", url: "contact"}] %}

{% if style == "normal" %}
    {% set fontColour = "black" %}
    {% set headerPos = "relative" %}

{% elif style == "full" %}
    {% set fontColour = "white" %}
    {% set headerPos = "absolute" %}
{% endif %}

<header class="{{ headerPos }} left-0 top-0 w-full flex h-20 px-5 items-center justify-between text-{{ fontColour }}">
   <a href="/" class="text-xl md:text-2xl tracking-[9px] font-raleway uppercase">Lisa McKinney</a>

    <div class="flex flex-col gap-1 cursor-pointer md:hidden z-100" id="hamburger" >
        <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div>
        <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div>
        <div class="w-6 h-0.5 bg-{{ fontColour }} hamburger-layer"></div> 
    </div>
  
   <!-- Main menu -->
   <ul class="list-none gap-2 hidden md:flex ">
    {% for item in items %}
        <li class="relative font-raleway uppercase text-lg group">

            {% if item.title == "+ Styling" %}
               <span class="block py-2 px-4">{{ item.title }}</span>    
            {% else %}
            <a href="/{{ item.url }}" class="block py-2 px-4">{{ item.title }}</a>    
            {% endif %}
            {% if "children" in item %}
                <ul class="absolute left-0 hidden w-48 bg-white shadow-lg rounded-lg p-2 group-hover:flex flex-col gap-2">
                    {% for subItem in item.children %}
                        <li>
                            <a href="/work/{{ subItem.url }}" class="block px-4 py-2 text-sm text-gray-500 hover:bg-gray-100 rounded-md">{{ subItem.title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>

     <!-- Mobile menu -->
   <ul class="list-none p-5 gap-2 hidden flex-col fixed w-full h-full left-0 top-0 bg-white text-black z-10" id="mobile-menu">
    {% for item in items %}
        <li class="relative font-raleway uppercase text-lg group">
            <a href="/{{ item.url }}" class="block py-2 px-4">{{ item.title }}</a>    
            {% if "children" in item %}
                <ul class="ml-10">
                    {% for subItem in item.children %}
                        <li>
                            <a href="/work/{{ subItem.url }}" class="block px-4 py-2 text-sm">{{ subItem.title }}</a>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
    </ul>

</header>