RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Toc component design fix

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-09-06 00:25:05 +06:00
parent 6f6eb242eb
commit f6bd3aea4a
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/blog/Toc.vue
View File

@@ -6,12 +6,17 @@ const links = articles.body.toc.links
</script> </script>
<template> <template>
<div class="lg:col-span-3 sticky top-28 h-96 p-2 hidden lg:block justify-self-end"> <div class="lg:col-span-3 sticky top-28 h-96 hidden lg:block justify-self-end">
<h1 class="text-lg font-bold mb-4"> <div class="border p-3 rounded-md min-w-[200px]">
Table Of Content <h1 class="text-sm font-bold mb-3 border-b pb-2">
</h1> Table Of Content
<NuxtLink v-for="link in links" :key="link.id" :to="`#${link.id}`" class="block text-md mb-3"> </h1>
{{ link.text }} <NuxtLink
</NuxtLink> v-for="link in links" :key="link.id" :to="`#${link.id}`"
class="block text-xs mb-3 hover:underline"
>
{{ link.text }}
</NuxtLink>
</div>
</div> </div>
</template> </template>