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:
@@ -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'">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user