Skip to content

Commit dfd89e0

Browse files
luisbeqjaluisbeqja
authored
feat(component): add navigation bar (#213)
* feat(component): add navigation bar #200 * feat: add custom background * feat: add custom background * feat(component): fix navigation bar classes
1 parent d3daf68 commit dfd89e0

File tree

8 files changed

+232
-0
lines changed

8 files changed

+232
-0
lines changed

‎apps/website/src/components/menu/menu.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export const Menu = component$<Props>(({ onClose$ }) => {
2929
label: 'Collapse',
3030
path: `/docs/${appState.theme.toLowerCase()}/collapse`,
3131
},
32+
{
33+
label: 'Navigation Bar',
34+
path: `/docs/${appState.theme.toLowerCase()}/navigation-bar`,
35+
},
3236
{ label: 'Drawer', path: `/docs/${appState.theme.toLowerCase()}/drawer` },
3337
{ label: 'Rating', path: `/docs/${appState.theme.toLowerCase()}/rating` },
3438
{ label: 'Radio', path: `/docs/${appState.theme.toLowerCase()}/radio` },

‎apps/website/src/routes/docs/daisy/navigation-bar/index.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { NavigationBar } from '@qwik-ui/theme-daisy';
3+
4+
export default component$(() => {
5+
return (
6+
<>
7+
<h2>This is the documentation for the Navigation Bar</h2>
8+
9+
<div class="flex flex-col gap-8 mt-4">
10+
<h2>Basic Example</h2>
11+
12+
<NavigationBar class="bg-base-100 rounded-lg">
13+
<a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
14+
daisyUI
15+
</a>
16+
<ul q:slot="navbar-center" class="menu menu-horizontal px-1">
17+
<li>
18+
<a>Item 1</a>
19+
</li>
20+
<li tabIndex={0}>
21+
<a>
22+
Parent
23+
<svg
24+
class="fill-current"
25+
xmlns="http://www.w3.org/2000/svg"
26+
width="20"
27+
height="20"
28+
viewBox="0 0 24 24"
29+
>
30+
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
31+
</svg>
32+
</a>
33+
<ul class="p-2 bg-base-100">
34+
<li>
35+
<a>Submenu 1</a>
36+
</li>
37+
<li>
38+
<a>Submenu 2</a>
39+
</li>
40+
</ul>
41+
</li>
42+
<li>
43+
<a>Item 3</a>
44+
</li>
45+
</ul>
46+
<a q:slot="navbar-right" class="btn btn-ghost normal-case text-xl">
47+
daisyUI
48+
</a>
49+
</NavigationBar>
50+
51+
<NavigationBar class="bg-base-100 rounded-lg">
52+
<a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
53+
daisyUI
54+
</a>
55+
<ul q:slot="navbar-right" class="menu menu-horizontal px-1">
56+
<li>
57+
<a>Item 1</a>
58+
</li>
59+
<li tabIndex={0}>
60+
<a>
61+
Parent
62+
<svg
63+
class="fill-current"
64+
xmlns="http://www.w3.org/2000/svg"
65+
width="20"
66+
height="20"
67+
viewBox="0 0 24 24"
68+
>
69+
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
70+
</svg>
71+
</a>
72+
<ul class="p-2 bg-base-100">
73+
<li>
74+
<a>Submenu 1</a>
75+
</li>
76+
<li>
77+
<a>Submenu 2</a>
78+
</li>
79+
</ul>
80+
</li>
81+
<li>
82+
<a>Item 3</a>
83+
</li>
84+
</ul>
85+
</NavigationBar>
86+
<h2>Custom css</h2>
87+
<NavigationBar class=" bg-primary rounded-lg">
88+
<a q:slot="navbar-left" class="btn btn-ghost normal-case text-xl">
89+
daisyUI
90+
</a>
91+
<ul q:slot="navbar-right" class="menu menu-horizontal px-1">
92+
<li>
93+
<a>Item 1</a>
94+
</li>
95+
<li tabIndex={0}>
96+
<a>
97+
Parent
98+
<svg
99+
class="fill-current"
100+
xmlns="http://www.w3.org/2000/svg"
101+
width="20"
102+
height="20"
103+
viewBox="0 0 24 24"
104+
>
105+
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
106+
</svg>
107+
</a>
108+
<ul class="p-2 bg-base-100">
109+
<li>
110+
<a>Submenu 1</a>
111+
</li>
112+
<li>
113+
<a>Submenu 2</a>
114+
</li>
115+
</ul>
116+
</li>
117+
<li>
118+
<a>Item 3</a>
119+
</li>
120+
</ul>
121+
</NavigationBar>
122+
</div>
123+
</>
124+
);
125+
});

‎apps/website/src/routes/docs/headless/navigation-bar/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
2+
import { NavigationBar } from '@qwik-ui/headless';
3+
import styles from './navigation-bar.css?inline';
4+
5+
export default component$(() => {
6+
useStylesScoped$(styles);
7+
8+
return (
9+
<>
10+
<h2>This is the documentation for the Navigation Bar</h2>
11+
12+
<div class="flex flex-col gap-8 mt-4">
13+
<h2>Basic Example</h2>
14+
15+
<NavigationBar class="items-center navigation-bar flex w-full bg-base-100 rounded-lg">
16+
<div class="navigation-bar__start flex">
17+
<a class="btn btn-ghost normal-case text-xl ">daisyUI</a>
18+
</div>
19+
<div class="navigation-bar__end flex">
20+
<ul class="menu menu-horizontal px-1 ">
21+
<li>
22+
<a>Item 1</a>
23+
</li>
24+
<li tabIndex={0}>
25+
<a>
26+
Parent
27+
<svg
28+
class="fill-current"
29+
xmlns="http://www.w3.org/2000/svg"
30+
width="20"
31+
height="20"
32+
viewBox="0 0 24 24"
33+
>
34+
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
35+
</svg>
36+
</a>
37+
<ul class="p-2 bg-base-100">
38+
<li>
39+
<a>Submenu 1</a>
40+
</li>
41+
<li>
42+
<a>Submenu 2</a>
43+
</li>
44+
</ul>
45+
</li>
46+
<li>
47+
<a>Item 3</a>
48+
</li>
49+
</ul>
50+
</div>
51+
</NavigationBar>
52+
</div>
53+
</>
54+
);
55+
});

‎apps/website/src/routes/docs/headless/navigation-bar/navigation-bar.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.navigation-bar__start {
2+
justify-content: flex-start;
3+
width: 50%;
4+
}
5+
.navigation-bar__end {
6+
justify-content: flex-end;
7+
width: 50%;
8+
}
9+
.navigation-bar__center {
10+
justify-content: flex-end;
11+
width: 50%;
12+
}

‎packages/daisy/src/components/navigation-bar/navigation-bar.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
2+
import { NavigationBar as HeadlessNavigationBar } from '@qwik-ui/headless';
3+
import { clsq } from '@qwik-ui/shared';
4+
5+
export type HTMLNavigationBarProps = QwikIntrinsicElements['div'];
6+
7+
export const NavigationBar = component$((props: HTMLNavigationBarProps) => {
8+
const { class: className, ...rest } = props;
9+
10+
return (
11+
<HeadlessNavigationBar class={clsq('navbar', className)} {...rest}>
12+
<div class="navbar-start">
13+
<Slot name="navbar-left" />
14+
</div>
15+
<div class="navbar-center">
16+
<Slot name="navbar-center" />
17+
</div>
18+
<div class="navbar-end">
19+
<Slot name="navbar-right" />
20+
</div>
21+
</HeadlessNavigationBar>
22+
);
23+
});

‎packages/daisy/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ export * from './components/tooltip/tooltip';
1616
export * from './components/pagination/pagination';
1717
export * from './components/ratio/radio';
1818
export * from './components/slider/slider';
19+
export * from './components/navigation-bar/navigation-bar';

‎packages/headless/src/components/navigation-bar/navigation-bar.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
2+
3+
export type NavigationBarProps = QwikIntrinsicElements['div'];
4+
5+
export const NavigationBar = component$((props: NavigationBarProps) => {
6+
return (
7+
<div {...props}>
8+
<Slot />
9+
</div>
10+
);
11+
});

‎packages/headless/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ export * from './components/tooltip/tooltip';
1818
export * as Select from './components/select/select';
1919
export * from './components/slider';
2020
export * from './components/radio/radio';
21+
export * from './components/navigation-bar/navigation-bar';

0 commit comments

Comments
 (0)