kener/src/lib/components/KenerNav.svelte at 577862bb9b9718bb3157e610f51d760d64c140aa · rajnandan1/kener · 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<script lang="ts">
  import type { Snippet } from "svelte";
  import { page } from "$app/state";
  import * as NavigationMenu from "$lib/components/ui/navigation-menu/index.js";
  import * as Dropdown from "$lib/components/ui/dropdown-menu/index.js";
  import { Button } from "$lib/components/ui/button/index.js";
  import { navigationMenuTriggerStyle } from "$lib/components/ui/navigation-menu/navigation-menu-trigger.svelte";
  import { resolve } from "$app/paths";
  import clientResolver from "$lib/client/resolver.js";
  import trackEvent from "$lib/beacon";
  import MenuIcon from "@lucide/svelte/icons/menu";

  let { controls }: { controls?: Snippet } = $props();
  let { data } = page;
  const navItems: { name: string; url: string; iconURL: string }[] = data.navItems || [];
  const { siteName, logo, globalPageVisibilitySettings } = data;

  const brandPath = $derived.by(() => {
    if (globalPageVisibilitySettings?.forceExclusivity) {
      const currentPagePath = page.params?.page_path?.trim();
      return currentPagePath ? `/${currentPagePath}` : "/";
    }
    return "/";
  });

  function trackBrandClick() {
    trackEvent("nav_brand_clicked", { name: siteName });
  }

  function trackNavClick(item: { name: string; url: string }) {
    trackEvent("nav_link_clicked", { name: item.name, external: item.url.startsWith("http") });
  }
</script>

<div class="fixed inset-x-0 top-0 z-10 py-2">
  <div class="mx-auto max-w-5xl px-4">
    <div
      class="bg-background/80 dark:bg-background/70 flex items-center justify-between rounded-3xl border p-1 backdrop-blur-md"
    >
      <!-- Brand -->
      <a
        href={clientResolver(resolve, brandPath)}
        class="{navigationMenuTriggerStyle()} hover:border-border border border-transparent bg-transparent text-xs hover:bg-transparent"
        style="border-radius: var(--radius-3xl)"
        onclick={trackBrandClick}
      >
        {#if logo}
          <img src={clientResolver(resolve, logo)} alt={siteName} class="mr-2 h-6 w-6 rounded-full object-cover" />
        {/if}
        {siteName}
      </a>

      <!-- Desktop Nav Links -->
      <NavigationMenu.Root class="hidden sm:block">
        <NavigationMenu.List>
          {#each navItems as item (item.url)}
            <NavigationMenu.Item>
              <NavigationMenu.Link>
                {#snippet child()}
                  <a
                    data-sveltekit-preload-data="off"
                    href={clientResolver(resolve, item.url)}
                    class="{navigationMenuTriggerStyle()} hover:border-border border border-transparent bg-transparent text-xs hover:bg-transparent"
                    target={item.url.startsWith("http") ? "_blank" : undefined}
                    rel={item.url.startsWith("http") ? "noopener noreferrer" : undefined}
                    style="border-radius: var(--radius-3xl)"
                    onclick={() => trackNavClick(item)}
                  >
                    {#if item.iconURL}
                      <img
                        src={clientResolver(resolve, item.iconURL)}
                        alt={item.name}
                        class="mr-2 h-4 w-4 object-cover"
                      />
                    {/if}
                    {item.name}
                  </a>
                {/snippet}
              </NavigationMenu.Link>
            </NavigationMenu.Item>
          {/each}
        </NavigationMenu.List>
      </NavigationMenu.Root>

      <div class="flex items-center gap-1">
        {@render controls?.()}

        <!-- Mobile Nav -->
        {#if navItems.length > 0}
          <Dropdown.Root>
            <Dropdown.Trigger>
              {#snippet child({ props })}
                <button
                  {...props}
                  type="button"
                  class="{navigationMenuTriggerStyle()} hover:border-border border border-transparent bg-transparent text-xs hover:bg-transparent sm:hidden"
                  style="border-radius: var(--radius-3xl)"
                  aria-label="Open navigation menu"
                >
                  <MenuIcon class="h-4 w-4" />
                </button>
              {/snippet}
            </Dropdown.Trigger>
            <Dropdown.Content align="end" class="w-56 rounded-3xl p-2">
              {#each navItems as item (item.url)}
                <Button
                  variant="ghost"
                  size="sm"
                  href={clientResolver(resolve, item.url)}
                  class="w-full justify-start rounded-full text-xs"
                  target={item.url.startsWith("http") ? "_blank" : undefined}
                  rel={item.url.startsWith("http") ? "noopener noreferrer" : undefined}
                  onclick={() => trackNavClick(item)}
                >
                  {#if item.iconURL}
                    <img src={clientResolver(resolve, item.iconURL)} alt={item.name} class="mr-2 h-4 w-4 object-cover" />
                  {/if}
                  {item.name}
                </Button>
              {/each}
            </Dropdown.Content>
          </Dropdown.Root>
        {/if}
      </div>
    </div>
  </div>
</div>