---
import Profile from "./Profile.astro";
import RecentPost from "./RecentPost.astro";
import Tag from "./Tag.astro";

const className = Astro.props.class;
---
<div id="sidebar" class:list={[className, "flex flex-col w-full gap-4"]} transition:persist>
    <Profile></Profile>
    <RecentPost></RecentPost>
    <Tag></Tag>
</div>

<style>
#sidebar {
    view-transition-name: ssss;
}
/* TODO temporarily */
html::view-transition-old(ssss) {
    mix-blend-mode: normal;
    animation: none;
}
html::view-transition-new(ssss) {
    mix-blend-mode: normal;
    animation: none;
}
</style>