Joururi/yorha-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished in page navigation comp

Browse Source
This commit is contained in:
Alexis
2023-05-10 18:34:08 +02:00
parent 979c9b3359
commit 66c7ac1fca
5 changed files with 136 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/YrhButton.vue
View File

@@ -9,10 +9,15 @@ const btnRef = ref<HTMLElement | null>()
const isBtnHovered = useElementHover(btnRef)
const { focused: isBtnFocused } = useFocus(btnRef)
const shouldArrowDisplay = computed(() => isBtnFocused.value || isBtnHovered.value)
const emit = defineEmits(['clicked'])
const shouldArrowDisplay = computed(
() => isBtnFocused.value || isBtnHovered.value || props.hasArrow === 'force'
)
function handleClick() {
clickSfx.play()
emit('clicked')
}
function handleMouseOver() {
@@ -31,7 +36,7 @@ const props = defineProps<{
disabled?: boolean
isActive?: boolean
hasSquare?: boolean
hasArrow?: boolean
hasArrow?: boolean | 'force'
}>()
const attributes = {
@@ -63,7 +68,8 @@ const elementTag = computed(() => (props.href ? 'a' : 'button'))
src="/yorha-cursor.svg"
height="32"
width="32"
class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none"
class="absolute top-1/2 -translate-y-1/2 -left-10 scale-90 pointer-events-none transition-all"
:class="{ 'invert-[.33] opacity-60': props.hasArrow === 'force' }"
alt=""
/>
</Transition>

109
src/components/YrhMainNav.vue
View File

@@ -1,109 +0,0 @@
<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import YrhButton from './YrhButton.vue'
import { useBannerStore } from '@/stores/banner'
const { bannerText } = storeToRefs(useBannerStore())
const activeKey = ref<string | null>(null)
function handleActiveBtn(e: Event, key: string) {
if (document.activeElement && e.type === 'mouseenter') {
;(document.activeElement as HTMLElement).blur()
}
activeKey.value = key
bannerText.value = handleBannerUpdate(key)
}
function handleInactiveState() {
if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
bannerText.value = null
}
activeKey.value = null
}
function handleBannerUpdate(key: string) {
switch (key) {
case 'current-data':
return 'Search through current file data'
case 'settings':
return 'Modify personnal data'
case 'credits':
return 'Obtain personnel archives'
default:
return 'Unknown data'
}
}
</script>
<template>
<div class="relative">
<menu>
<li>
<YrhButton
has-square
has-arrow
@mouseenter="handleActiveBtn($event, 'current-data')"
@focus="handleActiveBtn($event, 'current-data')"
@mouseleave="handleInactiveState"
@blur="handleInactiveState"
>
Current Data
</YrhButton>
</li>
<li>
<YrhButton
has-square
has-arrow
@mouseenter="handleActiveBtn($event, 'settings')"
@focus="handleActiveBtn($event, 'settings')"
@mouseleave="handleInactiveState"
@blur="handleInactiveState"
>
Settings
</YrhButton>
</li>
<li>
<YrhButton
has-square
has-arrow
@mouseenter="handleActiveBtn($event, 'credits')"
@focus="handleActiveBtn($event, 'credits')"
@mouseleave="handleInactiveState"
@blur="handleInactiveState"
>
Credits
</YrhButton>
</li>
</menu>
</div>
</template>
<style lang="scss" scoped>
menu {
position: relative;
@apply pl-9;
li {
@apply mb-3;
}
&::before {
display: block;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 15px;
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.25;
}
}
</style>

93
src/components/YrhNav.vue Normal file
View File

@@ -0,0 +1,93 @@
<script lang="ts" setup>
import { ref, watch } from 'vue'
import type { Ref } from 'vue'
import { storeToRefs } from 'pinia'
import YrhButton from './YrhButton.vue'
import { useBannerStore } from '@/stores/banner'
import type { MenuItem } from '@/models/YrhNavItem'
const { bannerText } = storeToRefs(useBannerStore())
const props = defineProps<{
items?: MenuItem[]
}>()
const emit = defineEmits<{
(e: 'change-nav', key: string | null): void
}>()
const clickedKey = ref<string | null>(null)
const activeKey = ref<string | null>(null)
function handleClickedKey(e: Event, item: MenuItem) {
clickedKey.value = item.id
emit('change-nav', item.id)
}
function handleActiveBtn(e: Event, item: MenuItem) {
if (document.activeElement && e.type === 'mouseenter') {
;(document.activeElement as HTMLElement).blur()
}
activeKey.value = item.id
bannerText.value = item.bannerText
}
function handleInactiveState() {
if (document.activeElement && document.activeElement.tagName !== 'BUTTON') {
bannerText.value = null
}
activeKey.value = null
}
</script>
<template>
<div class="relative">
<menu v-if="props.items">
<li
v-for="item in props.items"
:key="item.id"
class="transition-all"
:class="item.id === clickedKey ? 'w-full' : 'w-11/12'"
>
<YrhButton
has-square
:has-arrow="item.id === clickedKey ? 'force' : true"
:is-active="item.id === clickedKey"
@mouseenter="handleActiveBtn($event, item)"
@focus="handleActiveBtn($event, item)"
@mouseleave="handleInactiveState"
@blur="handleInactiveState"
@clicked="handleClickedKey($event, item)"
>
{{ item.label }}
</YrhButton>
</li>
</menu>
</div>
</template>
<style lang="scss" scoped>
menu {
position: relative;
@apply pl-9;
li {
@apply mb-3;
}
&::before {
display: block;
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 15px;
border-left-width: 8px;
border-right-width: 2px;
border-color: var(--color-y-beige-900);
opacity: 0.25;
}
}
</style>