1  <template>
 2    <div class="navbar">
 3      <NuxtLink to="/" class="title">
 4        <svg
 5          width="44"
 6          height="12"
 7          viewBox="0 0 44 12"
 8          fill="none"
 9          xmlns="http://www.w3.org/2000/svg">
10          <path
11            d="M10.262 -9.53674e-07L0.462 -9.53674e-07L0.462 1.96L6.342 1.96L0.462 9.8L10.262 9.8L10.262 7.84L4.3819 7.84L10.262 -9.53674e-07ZM21.154 1.96L21.154 -9.53674e-07L11.354 -9.53674e-07L11.354 1.96L15.274 1.96L15.274 7.84L11.354 7.84L11.354 9.8L21.154 9.8L21.154 7.84L17.234 7.84L17.234 1.96L21.154 1.96ZM32.214 1.96L32.214 -9.53674e-07L22.414 -9.53674e-07L22.414 1.96L26.334 1.96L26.334 7.84L22.414 7.84L22.414 9.8L32.214 9.8L32.214 7.84L28.294 7.84L28.294 1.96L32.214 1.96ZM33.152 -9.53674e-07L33.152 1.96L37.072 1.96L37.072 9.8L39.032 9.8L39.032 1.96L42.952 1.96L42.952 -9.53674e-07L33.152 -9.53674e-07Z"
12            transform=""
13            fill="#E6E6E6" />
14        </svg>
15      </NuxtLink>
16      <div class="actions">
17        <a href="https://docs.ziit.app" target="_blank" rel="noopener noreferrer"
18          >Docs</a
19        >
20        <a
21          href="https://github.com/0PandaDEV/Ziit"
22          target="_blank"
23          rel="noopener noreferrer"
24          >Star on Github</a
25        >
26        <NuxtLink to="/settings">Settings</NuxtLink>
27      </div>
28    </div>
29  </template>
30  
31  <style lang="scss">
32  .navbar {
33    display: flex;
34    justify-content: space-between;
35    align-items: center;
36  
37    .title {
38      display: flex;
39      align-items: center;
40    }
41  
42    .actions {
43      display: flex;
44      gap: 24px;
45  
46      a {
47        color: var(--text-secondary);
48  
49        &:hover {
50          color: var(--text);
51        }
52      }
53  
54      .router-link-active {
55        color: var(--text);
56      }
57    }
58  }
59  </style>