eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: discussions edit and delete

Browse Source
This commit is contained in:
Jannat Patel
2024-01-16 17:24:35 +05:30
parent 3a5977a718
commit 3313db844c
5 changed files with 185 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,23 +1,32 @@
<template>
<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">
<div class="flex items-center duration-300 ease-in-out" :class="isCollapsed ? 'p-1' : 'px-2 py-1'">
<Tooltip :text="label" placement="right">
<slot name="icon">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<component :is="icon" class="h-4 w-4 stroke-1.5 text-gray-700" />
</span>
</slot>
</Tooltip>
<span class="flex-shrink-0 text-base duration-300 ease-in-out" :class="isCollapsed
? 'ml-0 w-0 overflow-hidden opacity-0'
: 'ml-2 w-auto opacity-100'
">
{{ label }}
</span>
</div>
</button>
<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"
>
<div
class="flex items-center duration-300 ease-in-out"
:class="isCollapsed ? 'p-1' : 'px-2 py-1'"
>
<Tooltip :text="label" placement="right">
<slot name="icon">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<component :is="icon" class="h-5 w-5 stroke-1.5 text-gray-800" />
</span>
</slot>
</Tooltip>
<span
class="flex-shrink-0 text-base duration-300 ease-in-out"
:class="
isCollapsed
? 'ml-0 w-0 overflow-hidden opacity-0'
: 'ml-2 w-auto opacity-100'
"
>
{{ label }}
</span>
</div>
</button>
</template>
<script setup>
@@ -28,28 +37,28 @@ import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
icon: {
type: Function,
},
label: {
type: String,
default: '',
},
to: {
type: String,
default: '',
},
isCollapsed: {
type: Boolean,
default: false,
},
icon: {
type: Function,
},
label: {
type: String,
default: '',
},
to: {
type: String,
default: '',
},
isCollapsed: {
type: Boolean,
default: false,
},
})
function handleClick() {
router.push({ name: props.to })
router.push({ name: props.to })
}
let isActive = computed(() => {
return router.currentRoute.value.name === props.to
return router.currentRoute.value.name === props.to
})
</script>