Skip to content

Commit bfde54b

Browse files
segunadebayosegunadebayo
committed
docs: fix nested menu examples
1 parent 12b8ec8 commit bfde54b

File tree

5 files changed

+120
-106
lines changed

5 files changed

+120
-106
lines changed

‎.storybook/styles/menu.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
padding: 5px;
77
border: 1px solid lightgray;
88
list-style-type: none;
9+
z-index: var(--layer-index);
910
}
1011
[data-scope='menu'][data-part='trigger'] {
1112
display: flex;

‎packages/react/src/components/menu/examples/nested.tsx

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,35 @@ import { Portal } from '@ark-ui/react/portal'
44
export const Nested = () => (
55
<Menu.Root>
66
<Menu.Trigger>Open menu</Menu.Trigger>
7-
<Menu.Positioner>
8-
<Menu.Content>
9-
<Menu.Root>
10-
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
11-
<Portal>
12-
<Menu.Positioner>
13-
<Menu.Content>
14-
<Menu.Item value="react">React</Menu.Item>
15-
<Menu.Item value="solid">Solid</Menu.Item>
16-
<Menu.Item value="vue">Vue</Menu.Item>
17-
<Menu.Item value="svelte">Svelte</Menu.Item>
18-
</Menu.Content>
19-
</Menu.Positioner>
20-
</Portal>
21-
</Menu.Root>
22-
<Menu.Root>
23-
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
24-
<Portal>
25-
<Menu.Positioner>
26-
<Menu.Content>
27-
<Menu.Item value="panda">Panda</Menu.Item>
28-
<Menu.Item value="tailwind">Tailwind</Menu.Item>
29-
</Menu.Content>
30-
</Menu.Positioner>
31-
</Portal>
32-
</Menu.Root>
33-
</Menu.Content>
34-
</Menu.Positioner>
7+
<Portal>
8+
<Menu.Positioner>
9+
<Menu.Content>
10+
<Menu.Root>
11+
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
12+
<Portal>
13+
<Menu.Positioner>
14+
<Menu.Content>
15+
<Menu.Item value="react">React</Menu.Item>
16+
<Menu.Item value="solid">Solid</Menu.Item>
17+
<Menu.Item value="vue">Vue</Menu.Item>
18+
<Menu.Item value="svelte">Svelte</Menu.Item>
19+
</Menu.Content>
20+
</Menu.Positioner>
21+
</Portal>
22+
</Menu.Root>
23+
<Menu.Root>
24+
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
25+
<Portal>
26+
<Menu.Positioner>
27+
<Menu.Content>
28+
<Menu.Item value="panda">Panda</Menu.Item>
29+
<Menu.Item value="tailwind">Tailwind</Menu.Item>
30+
</Menu.Content>
31+
</Menu.Positioner>
32+
</Portal>
33+
</Menu.Root>
34+
</Menu.Content>
35+
</Menu.Positioner>
36+
</Portal>
3537
</Menu.Root>
3638
)

‎packages/solid/src/components/menu/examples/nested.tsx

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,34 @@ import { Portal } from 'solid-js/web'
44
export const Nested = () => (
55
<Menu.Root>
66
<Menu.Trigger>Open menu</Menu.Trigger>
7-
<Menu.Positioner>
8-
<Menu.Content>
9-
<Menu.Root>
10-
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
11-
<Portal>
12-
<Menu.Positioner>
13-
<Menu.Content>
14-
<Menu.Item value="react">React</Menu.Item>
15-
<Menu.Item value="solid">Solid</Menu.Item>
16-
<Menu.Item value="vue">Vue</Menu.Item>
17-
</Menu.Content>
18-
</Menu.Positioner>
19-
</Portal>
20-
</Menu.Root>
21-
<Menu.Root>
22-
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
23-
<Portal>
24-
<Menu.Positioner>
25-
<Menu.Content>
26-
<Menu.Item value="panda">Panda</Menu.Item>
27-
<Menu.Item value="tailwind">Tailwind</Menu.Item>
28-
</Menu.Content>
29-
</Menu.Positioner>
30-
</Portal>
31-
</Menu.Root>
32-
</Menu.Content>
33-
</Menu.Positioner>
7+
<Portal>
8+
<Menu.Positioner>
9+
<Menu.Content>
10+
<Menu.Root>
11+
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
12+
<Portal>
13+
<Menu.Positioner>
14+
<Menu.Content>
15+
<Menu.Item value="react">React</Menu.Item>
16+
<Menu.Item value="solid">Solid</Menu.Item>
17+
<Menu.Item value="vue">Vue</Menu.Item>
18+
</Menu.Content>
19+
</Menu.Positioner>
20+
</Portal>
21+
</Menu.Root>
22+
<Menu.Root>
23+
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
24+
<Portal>
25+
<Menu.Positioner>
26+
<Menu.Content>
27+
<Menu.Item value="panda">Panda</Menu.Item>
28+
<Menu.Item value="tailwind">Tailwind</Menu.Item>
29+
</Menu.Content>
30+
</Menu.Positioner>
31+
</Portal>
32+
</Menu.Root>
33+
</Menu.Content>
34+
</Menu.Positioner>
35+
</Portal>
3436
</Menu.Root>
3537
)

‎packages/svelte/src/lib/components/menu/examples/nested.svelte

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,34 @@
55

66
<Menu.Root>
77
<Menu.Trigger>Open menu</Menu.Trigger>
8-
<Menu.Positioner>
9-
<Menu.Content>
10-
<Menu.Root>
11-
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
12-
<Portal>
13-
<Menu.Positioner>
14-
<Menu.Content>
15-
<Menu.Item value="react">React</Menu.Item>
16-
<Menu.Item value="solid">Solid</Menu.Item>
17-
<Menu.Item value="vue">Vue</Menu.Item>
18-
<Menu.Item value="svelte">Svelte</Menu.Item>
19-
</Menu.Content>
20-
</Menu.Positioner>
21-
</Portal>
22-
</Menu.Root>
23-
<Menu.Root>
24-
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
25-
<Portal>
26-
<Menu.Positioner>
27-
<Menu.Content>
28-
<Menu.Item value="panda">Panda</Menu.Item>
29-
<Menu.Item value="tailwind">Tailwind</Menu.Item>
30-
</Menu.Content>
31-
</Menu.Positioner>
32-
</Portal>
33-
</Menu.Root>
34-
</Menu.Content>
35-
</Menu.Positioner>
8+
<Portal>
9+
<Menu.Positioner>
10+
<Menu.Content>
11+
<Menu.Root>
12+
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
13+
<Portal>
14+
<Menu.Positioner>
15+
<Menu.Content>
16+
<Menu.Item value="react">React</Menu.Item>
17+
<Menu.Item value="solid">Solid</Menu.Item>
18+
<Menu.Item value="vue">Vue</Menu.Item>
19+
<Menu.Item value="svelte">Svelte</Menu.Item>
20+
</Menu.Content>
21+
</Menu.Positioner>
22+
</Portal>
23+
</Menu.Root>
24+
<Menu.Root>
25+
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
26+
<Portal>
27+
<Menu.Positioner>
28+
<Menu.Content>
29+
<Menu.Item value="panda">Panda</Menu.Item>
30+
<Menu.Item value="tailwind">Tailwind</Menu.Item>
31+
</Menu.Content>
32+
</Menu.Positioner>
33+
</Portal>
34+
</Menu.Root>
35+
</Menu.Content>
36+
</Menu.Positioner>
37+
</Portal>
3638
</Menu.Root>

‎packages/vue/src/components/menu/examples/nested.vue

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,39 @@
11
<script setup lang="ts">
22
import { Menu } from '@ark-ui/vue/menu'
3+
import { Teleport } from 'vue'
34
</script>
45

56
<template>
67
<Menu.Root>
78
<Menu.Trigger>Open menu</Menu.Trigger>
8-
<Menu.Positioner>
9-
<Menu.Content>
10-
<Menu.Root>
11-
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
12-
<Menu.Positioner>
13-
<Menu.Content>
14-
<Menu.Item value="react">React</Menu.Item>
15-
<Menu.Item value="solid">Solid</Menu.Item>
16-
<Menu.Item value="vue">Vue</Menu.Item>
17-
</Menu.Content>
18-
</Menu.Positioner>
19-
</Menu.Root>
20-
<Menu.Root>
21-
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
22-
<Menu.Positioner>
23-
<Menu.Content>
24-
<Menu.Item value="panda">Panda</Menu.Item>
25-
<Menu.Item value="tailwind">Tailwind</Menu.Item>
26-
</Menu.Content>
27-
</Menu.Positioner>
28-
</Menu.Root>
29-
</Menu.Content>
30-
</Menu.Positioner>
9+
<Teleport to="body">
10+
<Menu.Positioner>
11+
<Menu.Content>
12+
<Menu.Root>
13+
<Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
14+
<Teleport to="body">
15+
<Menu.Positioner>
16+
<Menu.Content>
17+
<Menu.Item value="react">React</Menu.Item>
18+
<Menu.Item value="solid">Solid</Menu.Item>
19+
<Menu.Item value="vue">Vue</Menu.Item>
20+
</Menu.Content>
21+
</Menu.Positioner>
22+
</Teleport>
23+
</Menu.Root>
24+
<Menu.Root>
25+
<Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
26+
<Teleport to="body">
27+
<Menu.Positioner>
28+
<Menu.Content>
29+
<Menu.Item value="panda">Panda</Menu.Item>
30+
<Menu.Item value="tailwind">Tailwind</Menu.Item>
31+
</Menu.Content>
32+
</Menu.Positioner>
33+
</Teleport>
34+
</Menu.Root>
35+
</Menu.Content>
36+
</Menu.Positioner>
37+
</Teleport>
3138
</Menu.Root>
3239
</template>

0 commit comments

Comments
 (0)