1
0
mirror of https://github.com/sendevia/website.git synced 2026-03-06 07:40:50 +08:00

feat(navbar): improve search button UX with dynamic label and cursor

This commit is contained in:
2025-11-29 20:37:43 +08:00
parent d4b22f8f1e
commit 54bdfb0d14
2 changed files with 2 additions and 1 deletions

View File

@@ -42,7 +42,7 @@ function toggleSearch(event: MouseEvent) {
<template>
<nav :class="isAboveBreakpoint ? 'rail' : 'bar'">
<button class="fab" @mousedown.prevent @click.stop="toggleSearch">
<span>search</span>
<span>{{ isSearchActive ? "close" : "search" }}</span>
</button>
<div class="destinations">
<div class="segment" v-for="item in navSegment" :key="item.link" :class="isActive(item.link) ? 'active' : 'inactive'">

View File

@@ -41,6 +41,7 @@ nav {
background-color: var(--md-sys-color-secondary-container);
cursor: pointer;
transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
span {