Skip to content

Instantly share code, notes, and snippets.

@RickCogley

RickCogley/body-start-and-top-nav.html

Created April 4, 2025 08:49
Show Gist options
  • Save RickCogley/50c976f3f7141708979c4ec60c1802d5 to your computer and use it in GitHub Desktop.
Save RickCogley/50c976f3f7141708979c4ec60c1802d5 to your computer and use it in GitHub Desktop.
Download ZIP
Top nav test
Raw
body-start-and-top-nav.html
<body class="flex h-full bg-zinc-50 dark:bg-black">
<!-- Container start -->
<div class="flex w-full">
<div class="fixed inset-0 flex justify-center sm:px-8">
<div class="flex w-full max-w-7xl lg:px-8">
<div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20"></div>
</div>
</div>
<div class="relative flex w-full flex-col">
<!-- ===== top-nav.vto TEMPLATE START ===== -->
<header class="pointer-events-none relative z-50 flex flex-none flex-col">
<div class="order-last mt-[calc(--spacing(16)-(--spacing(3)))]"></div>
<div class="top-0 order-last -mb-3 pt-3 sm:px-8">
<div class="mx-auto w-full max-w-7xl lg:px-8">
<div class="relative px-4 sm:px-8 lg:px-12">
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<div class="top-(--avatar-top,--spacing(3)) w-full">
<div class="relative">
<a aria-label="Home" class="pointer-events-auto block origin-left" href="/"><img id="large-logo" alt="サイトのトップへリンクするイソリア社フルサイズのロゴマーク" loading="lazy" fetchpriority="high" decoding="async" class="w-64 object-cover dark:grayscale dark:invert dark:saturate-[.1] transition-opacity duration-300" src="/assets/logo_horiz_darkblue_bgtransparent_2.svg"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="top-0 z-10 h-16 pt-6">
<div class="top-(--header-top,--spacing(6)) w-full sm:px-8 fixed">
<div class="mx-auto w-full max-w-7xl lg:px-8">
<div class="relative px-4 sm:px-8 lg:px-12">
<div class="mx-auto max-w-2xl lg:max-w-5xl">
<div class="relative flex gap-4">
<div class="flex flex-1">
<a aria-label="Home" class="pointer-events-auto block origin-left" href="/"><img id="small-logo" alt="サイトのトップへリンクするイソリア社シンボルタイプのロゴマーク" loading="lazy" fetchpriority="high" decoding="async" class="w-12 object-cover rounded-md bg-white/90 dark:bg-white/10 dark:grayscale dark:invert dark:saturate-[.1] opacity-0 transition-opacity duration-300" src="/assets/symbol_darkblue_bgtransparent_2.svg"></a>
</div>
<div class="flex flex-1 justify-end md:justify-center">
<div class="pointer-events-auto md:hidden relative">
<button aria-label="Toggle menu" class="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20" type="button" x-data="" @click="$dispatch('toggle-menu')">
<span>メニュー</span><svg viewbox="0 0 8 6" aria-hidden="true" class="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400">
<path d="M1.75 1.75 4 4.25l2.25-2.5" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div hidden="" style="
position: fixed;
top: 1px;
left: 1px;
width: 1px;
height: 0;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
display: none;
"></div>
<nav class="pointer-events-auto hidden md:block">
<ul class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10"> <li>
<a class="relative block whitespace-nowrap px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="/archive" target="_self" aria-label="サイト内リンク" title="アーカイブページへのリンク">アーカイブ <span class="sr-only">(サイト内リンク)</span></a>
</li>
<li>
<a class="relative block whitespace-nowrap px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="https://esolia.co.jp" target="_blank" aria-label="外部リンク" title="イソリア社ウェブサイトへのリンク">イソリア <span class="sr-only">(外部リンク)</span></a>
</li>
</ul>
</nav>
<nav class="pointer-events-auto md:hidden" x-data="{ open: false, zIndex: 0 }">
<button type="button" class="mobile-menu-btn text-xl" x-on:click="open=!open; zIndex = open ? 100 : 0" x-on:toggle-menu.window="open = !open; zIndex = open ? 100 : 0" x-show="open" x-cloak="">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="h-12 w-12 fill-esoliaamber-400 dark:fill-esoliaamber-300"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</button>
<div class="mobile-menu" x-bind:class="{'is-active' : open }" :style="{ zIndex: zIndex }"> <div class="text-5xl mobile-menu__item">
<a class="link dim white f3 f1-l dib" href="/archive" aria-label="サイト内リンク" title="アーカイブページへのリンク"><span class="font-thin">アーカイブ</span> <span class="sr-only">(サイト内リンク)</span>
</a>
</div>
<div class="text-5xl mobile-menu__item">
<a class="link dim white f3 f1-l dib" href="https://esolia.co.jp" aria-label="外部リンク" title="イソリア社ウェブサイトへのリンク"><span class="font-thin">イソリア</span> <span class="sr-only">(外部リンク)</span>
</a>
</div>
</div>
</nav>
</div>
<div class="flex justify-end md:flex-1 z-50">
<div class="pointer-events-auto z-50">
<button type="button" aria-label="Toggle language" class="group rounded-full bg-white/90 px-3 py-2 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20 z-50 text-sm font-medium text-zinc-800 dark:text-zinc-200 dark:group-hover:text-zinc-100"> <a href="/en/" title="Home">
English </a>
</button>
</div>
<div class="pointer-events-auto z-50" x-data="themeToggle" :class="{ 'dark': darkMode }">
<button type="button" aria-label="Toggle theme" class="group rounded-full bg-white/90 px-3 py-2 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20 z-50" @click="darkMode = !darkMode">
<span x-show="!darkMode">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="h-5 w-5 fill-esoliaamber-500 stroke-esoliaamber-800 transition group-hover:fill-esoliaamber-600 group-hover:stroke-esoliaamber-900"><path d="M184,128a56,56,0,1,1-56-56A56,56,0,0,1,184,128Z" opacity="0.2"></path><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path></svg>
</span><span x-show="darkMode">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 256 256" fill="currentColor" class="h-5 w-5 fill-teal-300 stroke-teal-500 transition group-hover:fill-teal-400 group-hover:stroke-teal-700"><path d="M210.69,158.18A88,88,0,1,1,97.82,45.31,96.08,96.08,0,0,0,192,160,96.78,96.78,0,0,0,210.69,158.18Z" opacity="0.2"></path><path d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"></path></svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- ===== top-nav.vto TEMPLATE END ===== -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment