Skip to content

Commit

Permalink
Merge pull request #63 from cmpadden/feat/github-top-level-nav
Browse files Browse the repository at this point in the history 
feat: move github to top level nav, use 3-bars icon; formatting
  • Loading branch information
@cmpadden
cmpadden authored Aug 10, 2024
2 parents 977ee13 + 463ebe6 commit 46388e3
Show file tree
Hide file tree
Showing 5 changed files with 312 additions and 250 deletions.
227 changes: 132 additions & 95 deletions components/Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,142 @@
<script setup>
import { ChevronDownIcon } from "@heroicons/vue/20/solid";
import { Bars3Icon } from "@heroicons/vue/20/solid";
const route = useRoute();
</script>

<template>
<nav class="container mx-auto py-6">
<div class="flex items-end justify-between text-gray-200">
<NuxtLink to="/"
class="font-mono text-3xl font-semibold text-white underline decoration-orange-500 underline-offset-4 hover:text-orange-500"
as="div">
who&#183;am&#183;i
</NuxtLink>
<div>
<HeadlessMenu as="div" class="relative z-50 inline-block text-left">
<div>
<HeadlessMenuButton
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">
<ChevronDownIcon class="h-5 w-5 text-white hover:text-blue-400" aria-hidden="true" />
</HeadlessMenuButton>
</div>
<nav class="container mx-auto py-6">
<div class="flex items-end justify-between text-gray-200">
<NuxtLink
to="/"
class="font-mono text-3xl font-semibold text-white underline decoration-orange-500 underline-offset-4 hover:text-orange-500"
as="div"
>
who&#183;am&#183;i
</NuxtLink>

<transition enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0">
<HeadlessMenuItems
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">
<div class="px-1 py-1">
<HeadlessMenuItem v-slot="{ active }">
<a href="/articles">
<button :class="[
active ? 'bg-slate-700 text-white' : 'text-white',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]">
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
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" />
</svg>
Blog
</button>
</a>
</HeadlessMenuItem>
<HeadlessMenuItem v-slot="{ active }">
<a href="/playground">
<button :class="[
active ? 'bg-slate-700 text-white' : 'text-white',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]">
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
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" />
</svg>
Experiments
</button>
</a>
</HeadlessMenuItem>
<HeadlessMenuItem v-slot="{ active }">
<a href="https://github.com/cmpadden">
<button :class="[
active ? 'bg-slate-700' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]">
<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
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" />
</svg>
GitHub
</button>
</a>
</HeadlessMenuItem>
<HeadlessMenuItem v-slot="{ active }">
<a href="/talks">
<button :class="[
active ? 'bg-slate-700' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]">
<div class="flex items-center">
<NuxtLink to="https://github.com/cmpadden">
<svg
class="mr-2 inline h-6 w-6 hover:text-orange-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
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"
></path>
</svg>
</NuxtLink>

<svg class="mr-2 inline h-5 w-5" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
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" />
</svg>
<HeadlessMenu as="div" class="relative z-50 inline-block text-left">
<div>
<HeadlessMenuButton
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"
>
<Bars3Icon
class="h-5 w-5 text-white hover:text-orange-500"
aria-hidden="true"
/>
</HeadlessMenuButton>
</div>

Talks
</button>
</a>
</HeadlessMenuItem>
</div>
</HeadlessMenuItems>
</transition>
</HeadlessMenu>
</div>
</div>
</nav>
<transition
enter-active-class="transition duration-100 ease-out"
enter-from-class="transform scale-95 opacity-0"
enter-to-class="transform scale-100 opacity-100"
leave-active-class="transition duration-75 ease-in"
leave-from-class="transform scale-100 opacity-100"
leave-to-class="transform scale-95 opacity-0"
>
<HeadlessMenuItems
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"
>
<div class="px-1 py-1">
<HeadlessMenuItem v-slot="{ active }">
<a href="/articles">
<button
:class="[
active ? 'bg-slate-700 text-white' : 'text-white',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]"
>
<svg
class="mr-2 inline h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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"
/>
</svg>
Blog
</button>
</a>
</HeadlessMenuItem>
<HeadlessMenuItem v-slot="{ active }">
<a href="/talks">
<button
:class="[
active ? 'bg-slate-700' : '',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]"
>
<svg
class="mr-2 inline h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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"
/>
</svg>

Talks
</button>
</a>
</HeadlessMenuItem>
<HeadlessMenuItem v-slot="{ active }">
<a href="/playground">
<button
:class="[
active ? 'bg-slate-700 text-white' : 'text-white',
'group flex w-full items-center rounded-md px-2 py-2 text-sm',
]"
>
<svg
class="mr-2 inline h-5 w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
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"
/>
</svg>
Experiments
</button>
</a>
</HeadlessMenuItem>
</div>
</HeadlessMenuItems>
</transition>
</HeadlessMenu>
</div>
</div>
</nav>
</template>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"format": "prettier --parser vue components/ pages/ plugins/ --write"
"format": "prettier --parser vue components/ pages/ --write"
},
"devDependencies": {
"@heroicons/vue": "^2.1.3",
Expand Down
Loading

0 comments on commit 46388e3

Please sign in to comment.