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

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

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