@xsolla/xui-nav-bar 0.99.0 → 0.101.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +286 -18
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,48 +1,316 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Nav Bar
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A cross-platform React navigation bar component with a flexible slot-based layout for building application headers.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-nav-bar
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-nav-bar
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Nav Bar
|
|
12
16
|
|
|
13
17
|
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
14
19
|
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
20
|
+
import { Xsolla } from '@xsolla/xui-logos-xsolla';
|
|
21
|
+
import { Button } from '@xsolla/xui-button';
|
|
15
22
|
|
|
16
|
-
function
|
|
23
|
+
export default function BasicNavBar() {
|
|
17
24
|
return (
|
|
18
|
-
<NavBar
|
|
25
|
+
<NavBar>
|
|
19
26
|
<NavBar.StartSlot>
|
|
20
|
-
<
|
|
27
|
+
<Xsolla variant="full" size="sm" />
|
|
21
28
|
</NavBar.StartSlot>
|
|
22
29
|
<NavBar.Center>
|
|
23
|
-
|
|
30
|
+
Navigation
|
|
24
31
|
</NavBar.Center>
|
|
25
32
|
<NavBar.EndSlot>
|
|
26
|
-
<
|
|
33
|
+
<Button size="sm">Sign In</Button>
|
|
27
34
|
</NavBar.EndSlot>
|
|
28
35
|
</NavBar>
|
|
29
36
|
);
|
|
30
37
|
}
|
|
31
38
|
```
|
|
32
39
|
|
|
33
|
-
|
|
40
|
+
### Different Sizes
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import * as React from 'react';
|
|
44
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
45
|
+
|
|
46
|
+
export default function Sizes() {
|
|
47
|
+
return (
|
|
48
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
49
|
+
<NavBar size="sm">
|
|
50
|
+
<NavBar.Center>Small (48px)</NavBar.Center>
|
|
51
|
+
</NavBar>
|
|
52
|
+
<NavBar size="md">
|
|
53
|
+
<NavBar.Center>Medium (64px)</NavBar.Center>
|
|
54
|
+
</NavBar>
|
|
55
|
+
<NavBar size="lg">
|
|
56
|
+
<NavBar.Center>Large (80px)</NavBar.Center>
|
|
57
|
+
</NavBar>
|
|
58
|
+
</div>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### With Border
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import * as React from 'react';
|
|
67
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
68
|
+
|
|
69
|
+
export default function Bordered() {
|
|
70
|
+
return (
|
|
71
|
+
<NavBar bordered>
|
|
72
|
+
<NavBar.Center>Bordered Navigation</NavBar.Center>
|
|
73
|
+
</NavBar>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Anatomy
|
|
79
|
+
|
|
80
|
+
```jsx
|
|
81
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
82
|
+
|
|
83
|
+
<NavBar
|
|
84
|
+
size="md" // s, m, or l
|
|
85
|
+
bordered={false} // Show bottom border
|
|
86
|
+
backgroundColor={color} // Custom background
|
|
87
|
+
>
|
|
88
|
+
<NavBar.StartSlot> // Left-aligned content
|
|
89
|
+
{logo}
|
|
90
|
+
</NavBar.StartSlot>
|
|
91
|
+
<NavBar.Center> // Center-aligned content
|
|
92
|
+
{navigation}
|
|
93
|
+
</NavBar.Center>
|
|
94
|
+
<NavBar.EndSlot> // Right-aligned content
|
|
95
|
+
{actions}
|
|
96
|
+
</NavBar.EndSlot>
|
|
97
|
+
</NavBar>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Examples
|
|
101
|
+
|
|
102
|
+
### Application Header
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
import * as React from 'react';
|
|
106
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
107
|
+
import { Xsolla } from '@xsolla/xui-logos-xsolla';
|
|
108
|
+
import { Button, IconButton } from '@xsolla/xui-button';
|
|
109
|
+
import { Bell, Menu } from '@xsolla/xui-icons-base';
|
|
34
110
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
111
|
+
export default function AppHeader() {
|
|
112
|
+
return (
|
|
113
|
+
<NavBar size="md" bordered>
|
|
114
|
+
<NavBar.StartSlot>
|
|
115
|
+
<IconButton
|
|
116
|
+
icon={<Menu size={20} />}
|
|
117
|
+
variant="secondary"
|
|
118
|
+
tone="mono"
|
|
119
|
+
size="sm"
|
|
120
|
+
aria-label="Menu"
|
|
121
|
+
/>
|
|
122
|
+
<Xsolla variant="full" size="sm" />
|
|
123
|
+
</NavBar.StartSlot>
|
|
124
|
+
<NavBar.Center>
|
|
125
|
+
<nav aria-label="Main navigation" style={{ display: 'flex', gap: 24 }}>
|
|
126
|
+
<a href="/dashboard">Dashboard</a>
|
|
127
|
+
<a href="/products">Products</a>
|
|
128
|
+
<a href="/analytics">Analytics</a>
|
|
129
|
+
</nav>
|
|
130
|
+
</NavBar.Center>
|
|
131
|
+
<NavBar.EndSlot>
|
|
132
|
+
<IconButton
|
|
133
|
+
icon={<Bell size={20} />}
|
|
134
|
+
variant="secondary"
|
|
135
|
+
tone="mono"
|
|
136
|
+
size="sm"
|
|
137
|
+
aria-label="Notifications"
|
|
138
|
+
/>
|
|
139
|
+
<Button size="sm">Account</Button>
|
|
140
|
+
</NavBar.EndSlot>
|
|
141
|
+
</NavBar>
|
|
142
|
+
);
|
|
143
|
+
}
|
|
144
|
+
```
|
|
39
145
|
|
|
40
|
-
|
|
146
|
+
### Mobile Header
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import * as React from 'react';
|
|
150
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
151
|
+
import { IconButton } from '@xsolla/xui-button';
|
|
152
|
+
import { ArrowLeft, MoreVertical } from '@xsolla/xui-icons-base';
|
|
153
|
+
|
|
154
|
+
export default function MobileHeader() {
|
|
155
|
+
return (
|
|
156
|
+
<NavBar size="sm">
|
|
157
|
+
<NavBar.StartSlot>
|
|
158
|
+
<IconButton
|
|
159
|
+
icon={<ArrowLeft size={20} />}
|
|
160
|
+
variant="secondary"
|
|
161
|
+
tone="mono"
|
|
162
|
+
size="sm"
|
|
163
|
+
aria-label="Back"
|
|
164
|
+
/>
|
|
165
|
+
</NavBar.StartSlot>
|
|
166
|
+
<NavBar.Center>
|
|
167
|
+
<strong>Page Title</strong>
|
|
168
|
+
</NavBar.Center>
|
|
169
|
+
<NavBar.EndSlot>
|
|
170
|
+
<IconButton
|
|
171
|
+
icon={<MoreVertical size={20} />}
|
|
172
|
+
variant="secondary"
|
|
173
|
+
tone="mono"
|
|
174
|
+
size="sm"
|
|
175
|
+
aria-label="More options"
|
|
176
|
+
/>
|
|
177
|
+
</NavBar.EndSlot>
|
|
178
|
+
</NavBar>
|
|
179
|
+
);
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Checkout Header
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
import * as React from 'react';
|
|
187
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
188
|
+
import { Xsolla } from '@xsolla/xui-logos-xsolla';
|
|
189
|
+
import { IconButton } from '@xsolla/xui-button';
|
|
190
|
+
import { Lock, HelpCircle } from '@xsolla/xui-icons-base';
|
|
191
|
+
|
|
192
|
+
export default function CheckoutHeader() {
|
|
193
|
+
return (
|
|
194
|
+
<NavBar size="md" backgroundColor="#1a1a1a">
|
|
195
|
+
<NavBar.StartSlot>
|
|
196
|
+
<Xsolla variant="icon" color="brand" size="sm" />
|
|
197
|
+
</NavBar.StartSlot>
|
|
198
|
+
<NavBar.Center>
|
|
199
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
200
|
+
<Lock size={16} color="#4CAF50" />
|
|
201
|
+
<span style={{ color: '#fff' }}>Secure Checkout</span>
|
|
202
|
+
</div>
|
|
203
|
+
</NavBar.Center>
|
|
204
|
+
<NavBar.EndSlot>
|
|
205
|
+
<IconButton
|
|
206
|
+
icon={<HelpCircle size={20} />}
|
|
207
|
+
variant="secondary"
|
|
208
|
+
tone="mono"
|
|
209
|
+
size="sm"
|
|
210
|
+
aria-label="Help"
|
|
211
|
+
/>
|
|
212
|
+
</NavBar.EndSlot>
|
|
213
|
+
</NavBar>
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
### Marketing Header
|
|
219
|
+
|
|
220
|
+
```tsx
|
|
221
|
+
import * as React from 'react';
|
|
222
|
+
import { NavBar } from '@xsolla/xui-nav-bar';
|
|
223
|
+
import { Xsolla } from '@xsolla/xui-logos-xsolla';
|
|
224
|
+
import { Button } from '@xsolla/xui-button';
|
|
225
|
+
|
|
226
|
+
export default function MarketingHeader() {
|
|
227
|
+
return (
|
|
228
|
+
<NavBar size="lg" backgroundColor="transparent">
|
|
229
|
+
<NavBar.StartSlot>
|
|
230
|
+
<Xsolla variant="full" color="white" size="md" />
|
|
231
|
+
</NavBar.StartSlot>
|
|
232
|
+
<NavBar.Center>
|
|
233
|
+
<nav aria-label="Main navigation" style={{ display: 'flex', gap: 32 }}>
|
|
234
|
+
<a href="/products" style={{ color: '#fff' }}>Products</a>
|
|
235
|
+
<a href="/solutions" style={{ color: '#fff' }}>Solutions</a>
|
|
236
|
+
<a href="/pricing" style={{ color: '#fff' }}>Pricing</a>
|
|
237
|
+
<a href="/resources" style={{ color: '#fff' }}>Resources</a>
|
|
238
|
+
</nav>
|
|
239
|
+
</NavBar.Center>
|
|
240
|
+
<NavBar.EndSlot>
|
|
241
|
+
<Button variant="secondary" size="md">Sign In</Button>
|
|
242
|
+
<Button size="md">Get Started</Button>
|
|
243
|
+
</NavBar.EndSlot>
|
|
244
|
+
</NavBar>
|
|
245
|
+
);
|
|
246
|
+
}
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## API Reference
|
|
41
250
|
|
|
42
251
|
### NavBar
|
|
43
252
|
|
|
253
|
+
**NavBarProps:**
|
|
254
|
+
|
|
44
255
|
| Prop | Type | Default | Description |
|
|
45
|
-
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
256
|
+
| :--- | :--- | :------ | :---------- |
|
|
257
|
+
| children | `ReactNode` | - | Slot components (StartSlot, Center, EndSlot). |
|
|
258
|
+
| size | `"sm" \| "md" \| "lg"` | `"md"` | Navigation bar height. |
|
|
259
|
+
| bordered | `boolean` | `false` | Show bottom border. |
|
|
260
|
+
| backgroundColor | `string` | theme background | Custom background color. |
|
|
261
|
+
| testID | `string` | - | Test identifier. |
|
|
262
|
+
|
|
263
|
+
### NavBar.StartSlot
|
|
264
|
+
|
|
265
|
+
Left-aligned slot for logos and primary actions.
|
|
266
|
+
|
|
267
|
+
**Props:**
|
|
268
|
+
|
|
269
|
+
| Prop | Type | Description |
|
|
270
|
+
| :--- | :--- | :---------- |
|
|
271
|
+
| children | `ReactNode` | Content to display. |
|
|
272
|
+
| testID | `string` | Test identifier. |
|
|
273
|
+
|
|
274
|
+
### NavBar.Center
|
|
275
|
+
|
|
276
|
+
Center-aligned slot for navigation links and titles.
|
|
277
|
+
|
|
278
|
+
**Props:**
|
|
279
|
+
|
|
280
|
+
| Prop | Type | Description |
|
|
281
|
+
| :--- | :--- | :---------- |
|
|
282
|
+
| children | `ReactNode` | Content to display. |
|
|
283
|
+
| testID | `string` | Test identifier. |
|
|
284
|
+
|
|
285
|
+
### NavBar.EndSlot
|
|
286
|
+
|
|
287
|
+
Right-aligned slot for actions and user controls.
|
|
288
|
+
|
|
289
|
+
**Props:**
|
|
290
|
+
|
|
291
|
+
| Prop | Type | Description |
|
|
292
|
+
| :--- | :--- | :---------- |
|
|
293
|
+
| children | `ReactNode` | Content to display. |
|
|
294
|
+
| testID | `string` | Test identifier. |
|
|
295
|
+
|
|
296
|
+
## Size Specifications
|
|
297
|
+
|
|
298
|
+
| Size | Height | Horizontal Padding |
|
|
299
|
+
| :--- | :----- | :----------------- |
|
|
300
|
+
| `sm` | 48px | 12px |
|
|
301
|
+
| `md` | 64px | 16px |
|
|
302
|
+
| `lg` | 80px | 20px |
|
|
303
|
+
|
|
304
|
+
## Layout Behavior
|
|
305
|
+
|
|
306
|
+
- StartSlot and EndSlot share `flex: 1` for equal width
|
|
307
|
+
- Center slot has `flex: 2` for prominent positioning
|
|
308
|
+
- All slots use `flexBasis: 0` for consistent sizing
|
|
309
|
+
- Items within slots have 8px gap by default
|
|
310
|
+
|
|
311
|
+
## Accessibility
|
|
312
|
+
|
|
313
|
+
- Use `<nav>` elements for navigation link groups
|
|
314
|
+
- Provide `aria-label` for navigation regions
|
|
315
|
+
- Ensure interactive elements have proper focus states
|
|
316
|
+
- Mobile menu triggers should have `aria-expanded` state
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-nav-bar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.101.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.101.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.101.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0"
|