1---
 2import { getCategoryUrl } from '@utils/content-utils';
 3import { t } from '@utils/i18n';
 4
 5interface Props {
 6  categories: string[];
 7  currentCategory?: string;
 8}
 9
10const { categories, currentCategory } = Astro.props;
11---
12
13<div
14  id="category-bar"
15  class="card border-base-300 bg-base-200 swup-transition-slide mb-4 w-full border"
16>
17  <nav
18    class="card-body flex flex-row items-center gap-2 overflow-auto px-2 py-3"
19    title={t.navigation.archive.categories()}
20    aria-label={t.navigation.archive.categories()}
21    role="navigation"
22  >
23    <a
24      href={`/`}
25      class:list={[
26        'btn btn-ghost btn-primary h-8 min-h-8 rounded-md px-3 py-0',
27        currentCategory ? 'not-hover:text-base-content' : 'btn-active',
28      ]}
29    >
30      {t.navigation.recentPosts()}
31    </a>
32    {
33      categories.map((category) => (
34        <a
35          href={getCategoryUrl(category)}
36          class:list={[
37            'btn btn-ghost btn-primary h-8 min-h-8 rounded-md px-3 py-0',
38            currentCategory === category ? 'btn-active' : 'not-hover:text-base-content',
39          ]}
40        >
41          {category}
42        </a>
43      ))
44    }
45  </nav>
46</div>
47
48<script>
49  import { pathMatch, pathsEqual } from '@utils/url-utils';
50
51  function setup() {
52    const hasCategoryBar = (url: string) =>
53      pathMatch(/\/archives\/categories\/.+\/\d/, url) || pathsEqual(url, '/');
54
55    window.swup?.hooks.before('visit:start', (visit) => {
56      if (hasCategoryBar(visit.to.url)) {
57        const categoryBar = document.getElementById('category-bar');
58        categoryBar?.classList.remove('swup-transition-slide');
59      }
60    });
61    window.swup?.hooks.on('content:replace', (visit) => {
62      if (hasCategoryBar(visit.from.url)) {
63        const categoryBar = document.getElementById('category-bar');
64        categoryBar?.classList.remove('swup-transition-slide');
65      }
66    });
67    window.swup?.hooks.on('animation:in:end', (visit) => {
68      if (hasCategoryBar(visit.from.url)) {
69        const categoryBar = document.getElementById('category-bar');
70        categoryBar?.classList.add('swup-transition-slide');
71      }
72    });
73  }
74
75  if (window.swup) {
76    setup();
77  } else {
78    document.addEventListener('swup:enable', setup);
79  }
80</script>