Skip to content

Commit 46388e3

Browse files
authored
Merge pull request #63 from cmpadden/feat/github-top-level-nav
feat: move github to top level nav, use 3-bars icon; formatting
2 parents 977ee13 + 463ebe6 commit 46388e3

File tree

5 files changed

+312
-250
lines changed

5 files changed

+312
-250
lines changed

components/Header.vue

Lines changed: 132 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,142 @@
11
<script setup>
2-
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
2+
import { Bars3Icon } from "@heroicons/vue/20/solid";
33
44
const route = useRoute();
55
</script>
66

77
<template>
8-
<nav class="container mx-auto py-6">
9-
<div class="flex items-end justify-between text-gray-200">
10-
<NuxtLink to="/"
11-
class="font-mono text-3xl font-semibold text-white underline decoration-orange-500 underline-offset-4 hover:text-orange-500"
12-
as="div">
13-
who&#183;am&#183;i
14-
</NuxtLink>
15-
<div>
16-
<HeadlessMenu as="div" class="relative z-50 inline-block text-left">
17-
<div>
18-
<HeadlessMenuButton
19-
class="inline-flex w-full justify-center rounded-md bg-black bg-opacity-30 p-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
20-
<ChevronDownIcon class="h-5 w-5 text-white hover:text-blue-400" aria-hidden="true" />
21-
</HeadlessMenuButton>
22-
</div>
8+
<nav class="container mx-auto py-6">
9+
<div class="flex items-end justify-between text-gray-200">
10+
<NuxtLink
11+
to="/"
12+
class="font-mono text-3xl font-semibold text-white underline decoration-orange-500 underline-offset-4 hover:text-orange-500"
13+
as="div"
14+
>
15+
who&#183;am&#183;i
16+
</NuxtLink>
2317

24-
<transition enter-active-class="transition duration-100 ease-out"
25-
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
26-
leave-active-class="transition duration-75 ease-in"
27-
leave-from-class="transform scale-100 opacity-100"
28-
leave-to-class="transform scale-95 opacity-0">
29-
<HeadlessMenuItems
30-
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-black/80 text-white shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none">
31-
<div class="px-1 py-1">
32-
<HeadlessMenuItem v-slot="{ active }">
33-
<a href="/articles">
34-
<button :class="[
35-
active ? 'bg-slate-700 text-white' : 'text-white',
36-
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
37-
]">
38-
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
39-
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
40-
stroke="currentColor">
41-
<path stroke-linecap="round" stroke-linejoin="round"
42-
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
43-
</svg>
44-
Blog
45-
</button>
46-
</a>
47-
</HeadlessMenuItem>
48-
<HeadlessMenuItem v-slot="{ active }">
49-
<a href="/playground">
50-
<button :class="[
51-
active ? 'bg-slate-700 text-white' : 'text-white',
52-
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
53-
]">
54-
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
55-
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
56-
stroke="currentColor">
57-
<path stroke-linecap="round" stroke-linejoin="round"
58-
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5" />
59-
</svg>
60-
Experiments
61-
</button>
62-
</a>
63-
</HeadlessMenuItem>
64-
<HeadlessMenuItem v-slot="{ active }">
65-
<a href="https://github.com/cmpadden">
66-
<button :class="[
67-
active ? 'bg-slate-700' : '',
68-
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
69-
]">
70-
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
71-
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
72-
stroke="currentColor">
73-
<path stroke-linecap="round" stroke-linejoin="round"
74-
d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
75-
</svg>
76-
GitHub
77-
</button>
78-
</a>
79-
</HeadlessMenuItem>
80-
<HeadlessMenuItem v-slot="{ active }">
81-
<a href="/talks">
82-
<button :class="[
83-
active ? 'bg-slate-700' : '',
84-
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
85-
]">
18+
<div class="flex items-center">
19+
<NuxtLink to="https://github.com/cmpadden">
20+
<svg
21+
class="mr-2 inline h-6 w-6 hover:text-orange-500"
22+
xmlns="http://www.w3.org/2000/svg"
23+
viewBox="0 0 24 24"
24+
fill="currentColor"
25+
>
26+
<path
27+
d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"
28+
></path>
29+
</svg>
30+
</NuxtLink>
8631

87-
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
88-
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
89-
stroke="currentColor">
90-
<path stroke-linecap="round" stroke-linejoin="round"
91-
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6" />
92-
</svg>
32+
<HeadlessMenu as="div" class="relative z-50 inline-block text-left">
33+
<div>
34+
<HeadlessMenuButton
35+
class="inline-flex w-full justify-center rounded-md bg-black/50 p-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
36+
>
37+
<Bars3Icon
38+
class="h-5 w-5 text-white hover:text-orange-500"
39+
aria-hidden="true"
40+
/>
41+
</HeadlessMenuButton>
42+
</div>
9343

94-
Talks
95-
</button>
96-
</a>
97-
</HeadlessMenuItem>
98-
</div>
99-
</HeadlessMenuItems>
100-
</transition>
101-
</HeadlessMenu>
102-
</div>
103-
</div>
104-
</nav>
44+
<transition
45+
enter-active-class="transition duration-100 ease-out"
46+
enter-from-class="transform scale-95 opacity-0"
47+
enter-to-class="transform scale-100 opacity-100"
48+
leave-active-class="transition duration-75 ease-in"
49+
leave-from-class="transform scale-100 opacity-100"
50+
leave-to-class="transform scale-95 opacity-0"
51+
>
52+
<HeadlessMenuItems
53+
class="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-black/80 text-white shadow-lg ring-1 ring-black ring-opacity-5 backdrop-blur-sm focus:outline-none"
54+
>
55+
<div class="px-1 py-1">
56+
<HeadlessMenuItem v-slot="{ active }">
57+
<a href="/articles">
58+
<button
59+
:class="[
60+
active ? 'bg-slate-700 text-white' : 'text-white',
61+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
62+
]"
63+
>
64+
<svg
65+
class="mr-2 inline h-5 w-5"
66+
xmlns="http://www.w3.org/2000/svg"
67+
fill="none"
68+
viewBox="0 0 24 24"
69+
stroke-width="1.5"
70+
stroke="currentColor"
71+
>
72+
<path
73+
stroke-linecap="round"
74+
stroke-linejoin="round"
75+
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
76+
/>
77+
</svg>
78+
Blog
79+
</button>
80+
</a>
81+
</HeadlessMenuItem>
82+
<HeadlessMenuItem v-slot="{ active }">
83+
<a href="/talks">
84+
<button
85+
:class="[
86+
active ? 'bg-slate-700' : '',
87+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
88+
]"
89+
>
90+
<svg
91+
class="mr-2 inline h-5 w-5"
92+
xmlns="http://www.w3.org/2000/svg"
93+
fill="none"
94+
viewBox="0 0 24 24"
95+
stroke-width="1.5"
96+
stroke="currentColor"
97+
>
98+
<path
99+
stroke-linecap="round"
100+
stroke-linejoin="round"
101+
d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
102+
/>
103+
</svg>
104+
105+
Talks
106+
</button>
107+
</a>
108+
</HeadlessMenuItem>
109+
<HeadlessMenuItem v-slot="{ active }">
110+
<a href="/playground">
111+
<button
112+
:class="[
113+
active ? 'bg-slate-700 text-white' : 'text-white',
114+
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
115+
]"
116+
>
117+
<svg
118+
class="mr-2 inline h-5 w-5"
119+
xmlns="http://www.w3.org/2000/svg"
120+
fill="none"
121+
viewBox="0 0 24 24"
122+
stroke-width="1.5"
123+
stroke="currentColor"
124+
>
125+
<path
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
129+
/>
130+
</svg>
131+
Experiments
132+
</button>
133+
</a>
134+
</HeadlessMenuItem>
135+
</div>
136+
</HeadlessMenuItems>
137+
</transition>
138+
</HeadlessMenu>
139+
</div>
140+
</div>
141+
</nav>
105142
</template>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"generate": "nuxt generate",
88
"preview": "nuxt preview",
99
"postinstall": "nuxt prepare",
10-
"format": "prettier --parser vue components/ pages/ plugins/ --write"
10+
"format": "prettier --parser vue components/ pages/ --write"
1111
},
1212
"devDependencies": {
1313
"@heroicons/vue": "^2.1.3",

0 commit comments

Comments
 (0)