mahdium/portfolio
1
0
Fork 0
mirror of https://github.com/mmahdium/portfolio.git synced 2026-09-28 02:21:41 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat: add cursor pointer style to buttons and toggle elements for better UX

Browse Source
This commit is contained in:
mahdiarghyani
2025-12-15 14:59:04 +03:30
parent d4cf695911
commit 010d8bd8ea
5 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/common/ThemeCustomizer.vue
+4 -1
View File
@@ -18,6 +18,7 @@
<div class="flex items-center gap-2">
<UTooltip :text="t('theme.mode.system')">
<UButton :color="isModeActive('system') ? 'primary' : 'neutral'" variant="soft" size="sm" square
class="cursor-pointer"
:class="isModeActive('system') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
icon="i-twemoji-desktop-computer" :aria-label="t('theme.mode.system')"
@click="setMode($event, 'system')" />
@@ -25,12 +26,14 @@
<UTooltip :text="t('theme.mode.light')">
<UButton :color="isModeActive('light') ? 'primary' : 'neutral'" variant="soft" size="sm" square
class="cursor-pointer"
:class="isModeActive('light') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
icon="i-twemoji-sun" :aria-label="t('theme.mode.light')" @click="setMode($event, 'light')" />
</UTooltip>
<UTooltip :text="t('theme.mode.dark')">
<UButton :color="isModeActive('dark') ? 'primary' : 'neutral'" variant="soft" size="sm" square
class="cursor-pointer"
:class="isModeActive('dark') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
icon="i-twemoji-crescent-moon" :aria-label="t('theme.mode.dark')" @click="setMode($event, 'dark')" />
</UTooltip>
@@ -44,7 +47,7 @@
<div class="grid grid-cols-3 gap-2">
<UButton v-for="p in primaryItems" :key="p.key" :color="isPrimaryActive(p.key) ? 'primary' : 'neutral'"
variant="soft" size="sm"
:class="['justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
:class="['cursor-pointer justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
:aria-label="`Primary: ${p.label}`" @click="setPrimary($event, p.key)">
<span class="inline-flex items-center gap-2">
<span class="size-3 rounded-full" :class="colorClassMap[p.key]" />
app/components/common/TopNav.vue
+16 -11
View File
@@ -12,7 +12,8 @@
:class="[isActive('hero') ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-house"
:aria-label="t('nav.home')" @click="goTo('hero')" />
</UTooltip>
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
<button type="button"
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
:class="[isActive('hero') ? labelActiveClass : labelInactiveClass]" @click="goTo('hero')">
{{ t('nav.home') }}
</button>
@@ -25,7 +26,8 @@
:class="[isActive('skills') ? activeClass : inactiveClass]" variant="soft" square
icon="i-twemoji-hammer-and-wrench" :aria-label="t('sections.skills')" @click="goTo('skills')" />
</UTooltip>
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
<button type="button"
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
:class="[isActive('skills') ? labelActiveClass : labelInactiveClass]" @click="goTo('skills')">
{{ t('sections.skills') }}
</button>
@@ -38,7 +40,8 @@
:class="[isActive('work') ? activeClass : inactiveClass]" variant="soft" square
icon="i-twemoji-briefcase" :aria-label="t('sections.work')" @click="goTo('work')" />
</UTooltip>
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
<button type="button"
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
:class="[isActive('work') ? labelActiveClass : labelInactiveClass]" @click="goTo('work')">
{{ t('sections.work') }}
</button>
@@ -51,7 +54,8 @@
:class="[isActive('projects') ? activeClass : inactiveClass]" variant="soft" square
icon="i-twemoji-rocket" :aria-label="t('sections.projects')" @click="goTo('projects')" />
</UTooltip>
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
<button type="button"
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
:class="[isActive('projects') ? labelActiveClass : labelInactiveClass]" @click="goTo('projects')">
{{ t('sections.projects') }}
</button>
@@ -60,14 +64,15 @@
<!-- Blog -->
<div class="flex items-center gap-1.5">
<UTooltip :text="t('sections.blog')">
<NuxtLink :to="localePath('/blog')">
<UButton class="cursor-pointer transition-all duration-200"
:class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
:aria-label="t('sections.blog')" />
</NuxtLink>
<NuxtLink :to="localePath('/blog')" class="cursor-pointer">
<UButton class="cursor-pointer transition-all duration-200"
:class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
:aria-label="t('sections.blog')" />
</NuxtLink>
</UTooltip>
<NuxtLink :to="localePath('/blog')">
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
<NuxtLink :to="localePath('/blog')" class="cursor-pointer">
<button type="button"
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
:class="[isBlogActive ? labelActiveClass : labelInactiveClass]">
{{ t('sections.blog') }}
</button>