blob: 10c4d19ecee1c5da6f66722c6531d75e0efd0f2f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
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>
|
