techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change new layout

Browse Source
This commit is contained in:
Techit Thawiang
2025-08-25 21:13:33 +07:00
parent 963f460e8a
commit 136c513630
9 changed files with 428 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/web-header.vue
+68 -74
View File
@@ -1,75 +1,69 @@
<template>
<header class="web-header">
<section class="web-heading">
<NuxtLink href="/" class="web-heading-left-section hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10">
<div class="flex items-center h-full bg-[#0066FF]">
<img width="36" height="36"src="/favicon.ico">
</div>
<p class="web-nav-title mx-2 text-(--ui-text)">thawia.ng</p>
</NuxtLink>
<div class="web-heading-right-section">
<nav class="nav-links">
<ul class="nav-wrapper">
<li class="nav-link">
<NuxtLink href="/">Home</NuxtLink>
</li>
<!-- <li class="nav-link">
<NuxtLink href="/blog">Blog</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/about">About</NuxtLink>
</li>-->
<li class="nav-link">
<NuxtLink href="/contact">Contact</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/fonts">Fonts</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/collections">Collections</NuxtLink>
</li>
</ul>
</nav>
<button class="hamburger-toggle" @click="toggleMobileHamburger">
<Icon name="oundr:menu"/>
</button>
</div>
</section>
<nav v-if="mobileHamburger" class="hamburger-menu">
<ul class="nav-wrapper">
<li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/">Home</NuxtLink>
</li>
<!-- <li class="nav-link">
<NuxtLink href="/blog">Blog</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/about">About</NuxtLink>
</li>-->
<li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/contact">Contact</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/fonts">Fonts</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink @click="toggleMobileHamburger" href="/collections">Collections</NuxtLink>
</li>
</ul>
</nav>
</header>
</template>
<script setup>
const mobileHamburger = ref(false);
function toggleMobileHamburger() {
mobileHamburger.value = !mobileHamburger.value
}
<template>
<header class="web-header web-header-bg web-header-emit-shadow-when-top">
<section class="web-heading">
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
<div class="flex items-center h-full bg-[#0066FF]">
<img width="36" height="36"src="/favicon.ico">
</div>
<p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p>
</NuxtLink>
<div class="web-heading-right-section">
<nav class="nav-links">
<ul class="nav-wrapper">
<li class="nav-link">
<NuxtLink href="/posts">/posts</NuxtLink>
</li>
<!-- <li class="nav-link">
<NuxtLink href="/projects">Projects</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink href="/about">About</NuxtLink>
</li> -->
<li class="nav-link">
<NuxtLink title="Contact" href="/contact">/contact</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink title="Collection" href="/collections">/collections</NuxtLink>
</li>
</ul>
</nav>
<button class="hamburger-toggle" @click="toggleMobileHamburger">
<Icon name="oundr:menu"/>
</button>
</div>
</section>
<nav v-if="mobileHamburger" class="hamburger-menu">
<ul class="nav-wrapper">
<li class="nav-link">
<NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">/</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">/posts</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">/contact</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">/fonts</NuxtLink>
</li>
<li class="nav-link">
<NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">/collections</NuxtLink>
</li>
</ul>
</nav>
</header>
</template>
<script setup>
const mobileHamburger = ref(false);
function toggleMobileHamburger() {
mobileHamburger.value = !mobileHamburger.value
}
function closeMobileHamburger() {
mobileHamburger.value = false
}
</script>