Building blocks for content-driven sites.

src/pages/blocks/navigation-headers/navbar-1.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3
import { Button } from "@bejamas/ui/components/button";
4
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
5
import {
6
  DropdownMenu,
7
  DropdownMenuTrigger,
8
  DropdownMenuContent,
9
} from "@bejamas/ui/components/dropdown-menu";
10
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
11
---
12

13
<BlockExampleLayout>
14
  <div class="bg-muted min-h-[1500px]">
15
    <StickySurface
16
      as="div"
17
      threshold="1rem"
18
      observeStuck
19
      class="top-5 [&.is-stuck]:shadow-sm [&.is-stuck]:max-w-2xl max-w-5xl rounded-2xl h-16 mx-auto"
20
      effects={["elevate"]}
21
      style="--stuck-shadow: var(--shadow-sm)"
22
    >
23
      <NavigationMenu
24
        class="rounded-2xl bg-transparent group-[.is-stuck]/surface:bg-white/40 h-16 backdrop-blur-sm mx-auto transition-all duration-200 ease-out"
25
      >
26
        <div slot="logo" class="flex items-center h-full">
27
          <img
28
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
29
            alt="Acme, Inc."
30
            class="h-7"
31
          />
32
        </div>
33
        <ul slot="links" class="flex items-center space-x-2">
34
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
35
          <li>
36
            <DropdownMenu>
37
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
38
              <DropdownMenuContent class="grid grid-cols-12 gap-2 w-120">
39
                <ul class="col-span-5">
40
                  <li>
41
                    <a
42
                      href="#"
43
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
44
                    >
45
                      <p class="font-medium">About</p>
46
                      <div class="text-muted-foreground text-sm">
47
                        Read more about our company
48
                      </div>
49
                    </a>
50
                  </li>
51
                  <li>
52
                    <a
53
                      href="#"
54
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
55
                    >
56
                      <p class="font-medium w-full">Team</p>
57
                      <div class="text-muted-foreground text-sm">
58
                        Meet our heroes
59
                      </div>
60
                    </a>
61
                  </li>
62
                  <li>
63
                    <a
64
                      href="#"
65
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
66
                    >
67
                      <p class="font-medium w-full">Blog</p>
68
                      <div class="text-muted-foreground text-sm">
69
                        Read our latest news
70
                      </div>
71
                    </a>
72
                  </li>
73
                  <li>
74
                    <a
75
                      href="#"
76
                      class="w-full justify-start flex-wrap hover:bg-accent flex py-2 px-2 rounded-lg"
77
                    >
78
                      <p class="font-medium w-full">Careers</p>
79
                      <div class="text-muted-foreground text-sm">
80
                        Join our team
81
                      </div>
82
                    </a>
83
                  </li>
84
                </ul>
85
                <div
86
                  class="bg-accent p-4 rounded-lg flex items-end relative col-span-7"
87
                >
88
                  <p class="font-medium relative z-10 text-white">Company</p>
89
                  <img
90
                    src="https://plus.unsplash.com/premium_photo-1755155931545-87b694f49769?q=80&w=2224&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
91
                    class="w-full h-full object-cover absolute top-0 left-0 rounded-lg"
92
                  />
93
                </div>
94
              </DropdownMenuContent>
95
            </DropdownMenu>
96
          </li>
97
          <li>
98
            <Button as="a" href="#" variant="ghost">Contact</Button>
99
          </li>
100
        </ul>
101
        <div slot="actions" class="flex items-center gap-2">
102
          <Button
103
            variant="outline"
104
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
105
            >Log in</Button
106
          >
107
          <Button
108
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
109
          >
110
            <span
111
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
112
              >Contact</span
113
            >
114
            <span
115
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
116
              >Get a demo</span
117
            >
118
          </Button>
119
        </div>
120
      </NavigationMenu>
121
    </StickySurface>
122
  </div>
123
</BlockExampleLayout>

src/pages/blocks/navigation-headers/navbar-2.astro

1
---
2
import BlockExampleLayout from "@/components/BlockExampleLayout.astro";
3

4
import { Button } from "@bejamas/ui/components/button";
5
import NavigationMenu from "@/ui-next/NavigationMenu.astro";
6
import {
7
  DropdownMenu,
8
  DropdownMenuTrigger,
9
  DropdownMenuContent,
10
} from "@bejamas/ui/components/dropdown-menu";
11
import { StickySurface } from "@bejamas/ui/components/sticky-surface";
12
---
13

14
<BlockExampleLayout>
15
  <div class="bg-muted min-h-[1500px]">
16
    <div class="bg-muted text-muted-foreground p-4 w-full text-center">
17
      New release available! See the <a href="#" class="text-primary"
18
        >changelog</a
19
      > for more details.
20
    </div>
21
    <StickySurface as="div" effects={["line"]} threshold="1rem" observeStuck>
22
      <NavigationMenu>
23
        <div slot="logo" class="flex items-center h-full">
24
          <img
25
            src="https://cdn.prod.website-files.com/624380709031623bfe4aee60/668b2b16e18e604c50a1362c_Logo-wide.svg"
26
            alt="Acme, Inc."
27
            class="h-8"
28
          />
29
        </div>
30
        <ul slot="links" class="flex items-center space-x-2">
31
          <li><Button as="a" href="/" variant="ghost">Home</Button></li>
32
          <li>
33
            <DropdownMenu>
34
              <DropdownMenuTrigger>Company</DropdownMenuTrigger>
35
              <DropdownMenuContent>
36
                <ul>
37
                  <li>
38
                    <Button
39
                      href="#"
40
                      as="a"
41
                      variant="ghost"
42
                      class="w-full justify-start">About</Button
43
                    >
44
                  </li>
45
                  <li>
46
                    <Button
47
                      href="#"
48
                      as="a"
49
                      variant="ghost"
50
                      class="w-full justify-start">Team</Button
51
                    >
52
                  </li>
53
                  <li>
54
                    <Button
55
                      href="#"
56
                      as="a"
57
                      variant="ghost"
58
                      class="w-full justify-start">Blog</Button
59
                    >
60
                  </li>
61
                  <li>
62
                    <Button
63
                      href="#"
64
                      as="a"
65
                      variant="ghost"
66
                      class="w-full justify-start">Careers</Button
67
                    >
68
                  </li>
69
                </ul>
70
              </DropdownMenuContent>
71
            </DropdownMenu>
72
          </li>
73
          <li>
74
            <Button as="a" href="#" variant="ghost">Contact</Button>
75
          </li>
76
        </ul>
77
        <div slot="actions" class="flex items-center gap-2">
78
          <Button
79
            variant="outline"
80
            class="group-[.is-stuck]/surface:opacity-0 group-[.is-stuck]/surface:blur-sm transition-all duration-300 ease-out"
81
            >Log in</Button
82
          >
83
          <Button
84
            class="w-20 group-[.is-stuck]/surface:w-25 duration-500 ease-out"
85
          >
86
            <span
87
              class="group-[.is-stuck]/surface:blur-sm group-[.is-stuck]/surface:opacity-0 absolute group-[.is-stuck]/surface:hidden transition-discrete duration-500 ease-out"
88
              >Contact</span
89
            >
90
            <span
91
              class="group-[.is-stuck]/surface:blur-none group-[.is-stuck]/surface:opacity-100 group-[.is-stuck]/surface:delay-150 group-[.is-stuck]/surface:block opacity-0 transition-all hidden blur-sm transition-discrete duration-500 ease-out"
92
              >Get a demo</span
93
            >
94
          </Button>
95
        </div>
96
      </NavigationMenu>
97
    </StickySurface>
98
  </div>
99
</BlockExampleLayout>