2026-pgconfdev-site/root/Menu.svelte at main · MMeent/2026-pgconfdev-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script>
  let { children } = $props();
</script>

<style>
  nav {
    margin-block-end: 0;

    @media (width >= 768px) {
      flex-basis: var(--flex-size);
    }
  }

  ul {
    width: 100%;

    @media (width < 768px) {
      border-block-end: var(--border-width) solid var(--border-color);
      column-gap: 1rem;
      justify-content: space-evenly;
      padding-block-end: 1rem;
    }

    @media (width >= 768px) {
      border-inline-end: var(--border-width) solid var(--border-color);
      display: unset;
      padding-inline-end: 2rem;

      :global(> li:where(:not(:last-child))) {
        margin-block-end: 1rem;
      }

      :global(:--link) {
        display: block;
      }

      :global(:--button) {
        text-align: left;
        width: 100%;
      }
    }
  }
</style>

<nav><ul>{@render children()}</ul></nav>