1 files changed, 62 insertions, 0 deletions
diff --git a/_includes/components/header.njk b/_includes/components/header.njk
new file mode 100644
index 0000000..10c4d19
--- /dev/null
+++ b/_includes/components/header.njk
@@ -0,0 +1,62 @@
+{% 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>