test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: made sidebar links a button for keyboard accessibility

Browse Source
This commit is contained in:
Shariq Ansari 2023-09-25 21:10:00 +05:30
parent eea9903acd
commit d10e0c4b44
2 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/components/AppSidebar.vue
View File

@ -1,19 +1,18 @@
<template>
<div
class="flex flex-col h-full justify-between transition-all duration-300 ease-in-out"
class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
:class="isSidebarCollapsed ? 'w-12' : 'w-56'"
>
<div>
<div class="flex flex-col">
<UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
<div v-for="link in links">
<SidebarLink
:icon="link.icon"
:label="link.label"
:to="link.to"
:isCollapsed="isSidebarCollapsed"
class="my-0.5 mx-2"
/>
</div>
<SidebarLink
v-for="link in links"
:icon="link.icon"
:label="link.label"
:to="link.to"
:isCollapsed="isSidebarCollapsed"
class="mx-2 my-0.5"
/>
</div>
<SidebarLink
:label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
@ -22,7 +21,7 @@
class="m-2"
>
<template #icon>
<span class="grid h-5 w-6 place-items-center flex-shrink-0">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<CollapseSidebar
class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
@ -42,7 +41,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
import SidebarLink from '@/components/SidebarLink.vue'
import { useStorage } from "@vueuse/core";
import { useStorage } from '@vueuse/core'
const links = [
{
@ -72,5 +71,5 @@ const links = [
},
]
const isSidebarCollapsed = useStorage("sidebar_is_collapsed", false);
const isSidebarCollapsed = useStorage('sidebar_is_collapsed', false)
</script>

12
frontend/src/components/SidebarLink.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="flex h-7 items-center rounded text-gray-800 cursor-pointer duration-300 ease-in-out"
<button
class="flex h-7 cursor-pointer items-center rounded text-gray-800 duration-300 ease-in-out focus:outline-none focus:transition-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-gray-400"
:class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
@click="handleClick"
>
@ -10,7 +10,7 @@
>
<Tooltip :text="label" placement="right">
<slot name="icon">
<span class="grid h-5 w-6 place-items-center flex-shrink-0">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
</span>
</slot>
@ -19,14 +19,14 @@
class="flex-shrink-0 text-base duration-300 ease-in-out"
:class="
isCollapsed
? 'opacity-0 ml-0 w-0 overflow-hidden'
: 'opacity-100 ml-2 w-auto'
? 'ml-0 w-0 overflow-hidden opacity-0'
: 'ml-2 w-auto opacity-100'
"
>
{{ label }}
</span>
</div>
</div>
</button>
</template>
<script setup>