Skip to content

Commit

Permalink
feat: now we can use the expander without worries
Browse files Browse the repository at this point in the history
  • Loading branch information
@djdjz7
djdjz7 committed Dec 25, 2024
1 parent 5571d5b commit d498101
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 63 deletions.
4 changes: 3 additions & 1 deletion src/components/ExpanderComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ onMounted(() => {
watch(content, (newSize) => {
if (!collapsed.value) contentWrapperRef.value!.style.height = `${newSize}px`
console.log(newSize)
})
content.value = contentDesiredSizeWrapperRef.value!.scrollHeight
Expand All @@ -47,6 +48,7 @@ onMounted(() => {
border-unset
bg-transparent
cursor-pointer
flex="~ items-center justify-center"
>
<ChevronRightIcon
:class="['h-5 w-5 transition-all duration-300', collapsed ? 'rotate-0' : 'rotate-90']"
Expand All @@ -55,7 +57,7 @@ onMounted(() => {
</button>
</div>

<div ref="contentWrapperRef" transition-all duration-300 h-0>
<div ref="contentWrapperRef" transition-all duration-300>
<div ref="contentDesiredSizeWrapperRef">
<slot></slot>
</div>
Expand Down
134 changes: 72 additions & 62 deletions src/components/SidebarComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import rawActivityList from 'virtual:activity-list.json'
import rawNewsList from 'virtual:news-list.json'
import type { PageData } from '@/data/pagedata'
import { groupByYearMonth } from '@/utils'
import ExpanderComponent from './ExpanderComponent.vue'
const activityListGrouped = groupByYearMonth(rawActivityList as PageData[])
const newsListGrouped = groupByYearMonth(rawNewsList as PageData[])
Expand Down Expand Up @@ -64,73 +65,82 @@ defineExpose({ toggleSidebar })
<span text-xl font-semibold>LCPU</span>
</a>

<h3 m-b-0>
<a href="/activities/" class="text-unset!" decoration-none @click="toggleSidebar()">活动</a>
</h3>

<div flex="~ col" box-border>
<div
v-for="activityGroup in activityListGrouped"
:key="activityGroup.year + '-' + activityGroup.month"
flex="~ col gap-2"
class="group"
border-t-1
border-gray-200
dark:border-dark-200
border-t-solid
p-y-3
>
<span text-xs text-gray-500 dark:text-light-900
>{{ activityGroup.year }} 年 {{ activityGroup.month }} 月
</span>
<a
v-for="activity in activityGroup.items"
@click="toggleSidebar()"
:href="activity.contentUrl"
text-wrap
:key="activity.title"
class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
:class="{
'text-gray-800! dark:text-white! font-medium': currentTitle === activity.title,
}"
>
{{ activity.title }}</a
<ExpanderComponent m-t-4>
<template #header>
<h3 m-0>
<a href="/activities/" class="text-unset!" decoration-none @click="toggleSidebar()"
>活动</a
>
</h3>
</template>
<div flex="~ col" box-border>
<div
v-for="activityGroup in activityListGrouped"
:key="activityGroup.year + '-' + activityGroup.month"
flex="~ col gap-2"
class="group"
border-t-1
border-gray-200
dark:border-dark-200
border-t-solid
p-y-3
>
<span text-xs text-gray-500 dark:text-light-900
>{{ activityGroup.year }} 年 {{ activityGroup.month }} 月
</span>
<a
v-for="activity in activityGroup.items"
@click="toggleSidebar()"
:href="activity.contentUrl"
text-wrap
:key="activity.title"
class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
:class="{
'text-gray-800! dark:text-white! font-medium': currentTitle === activity.title,
}"
>
{{ activity.title }}</a
>
</div>
</div>
</div>
</ExpanderComponent>

<h3 m-b-0>
<a href="/news/" class="text-unset!" decoration-none @click="toggleSidebar()">新闻</a>
</h3>
<div flex="~ col" box-border>
<div
v-for="newsGroup in newsListGrouped"
:key="newsGroup.year + '-' + newsGroup.month"
flex="~ col gap-2"
p-y-3
class="group"
border-t-1
border-gray-200
dark:border-dark-200
border-t-solid
>
<span text-xs text-gray-500 dark:text-light-900
>{{ newsGroup.year }} 年 {{ newsGroup.month }} 月
</span>
<a
v-for="news in newsGroup.items"
@click="toggleSidebar()"
:href="news.contentUrl"
text-wrap
:key="news.title"
class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
:class="{
'text-gray-800! dark:text-light-400! font-medium': currentTitle === news.title,
}"
>{{ news.title }}</a
<ExpanderComponent m-t-4>
<template #header>
<h3 m-0>
<a href="/news/" class="text-unset!" decoration-none @click="toggleSidebar()">新闻</a>
</h3>
</template>
<div flex="~ col" box-border>
<div
v-for="newsGroup in newsListGrouped"
:key="newsGroup.year + '-' + newsGroup.month"
flex="~ col gap-2"
p-y-3
class="group"
border-t-1
border-gray-200
dark:border-dark-200
border-t-solid
>
<span text-xs text-gray-500 dark:text-light-900
>{{ newsGroup.year }} 年 {{ newsGroup.month }} 月
</span>
<a
v-for="news in newsGroup.items"
@click="toggleSidebar()"
:href="news.contentUrl"
text-wrap
:key="news.title"
class="text-gray-500! dark:text-light-900! hover:text-gray-800! dark:hover:text-light-400! decoration-none"
:class="{
'text-gray-800! dark:text-light-400! font-medium': currentTitle === news.title,
}"
>{{ news.title }}</a
>
</div>
</div>
</div>
</ExpanderComponent>
</div>
</div>
</template>
Expand Down

0 comments on commit d498101

Please sign in to comment.