mautourco-components 0.2.97 → 0.2.99
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/dist/components/organisms/TopNavigation/DesktopNav.js +14 -11
- package/dist/components/organisms/TopNavigation/MobileNav.d.ts +1 -1
- package/dist/components/organisms/TopNavigation/MobileNav.js +14 -12
- package/dist/styles/components/organism/topnavigation.css +38 -14
- package/package.json +1 -1
- package/src/components/organisms/TopNavigation/DesktopNav.tsx +34 -26
- package/src/components/organisms/TopNavigation/MobileNav.tsx +24 -31
- package/src/styles/components/organism/topnavigation.css +73 -57
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import Button from
|
|
3
|
-
import { UserCard } from
|
|
2
|
+
import Button from '../../atoms/Button/Button';
|
|
3
|
+
import { UserCard } from '../../molecules/UserCard/UserCard';
|
|
4
4
|
export var DesktopNav = function (_a) {
|
|
5
|
-
var links = _a.links, onLinkClick = _a.onLinkClick, onLogin = _a.onLogin, onLogout = _a.onLogout, user = _a.user, active = _a.active, logoUrl = _a.logoUrl, homeUrl = _a.homeUrl, selectedAgency = _a.selectedAgency, onAgencyChange = _a.onAgencyChange, agencies = _a.agencies, _b = _a.className, className = _b === void 0 ?
|
|
6
|
-
var Logo = typeof logoUrl ===
|
|
5
|
+
var links = _a.links, onLinkClick = _a.onLinkClick, onLogin = _a.onLogin, onLogout = _a.onLogout, user = _a.user, active = _a.active, logoUrl = _a.logoUrl, homeUrl = _a.homeUrl, selectedAgency = _a.selectedAgency, onAgencyChange = _a.onAgencyChange, agencies = _a.agencies, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
6
|
+
var Logo = typeof logoUrl === 'function' ? logoUrl : null;
|
|
7
7
|
var handleLogoClick = function (e) {
|
|
8
8
|
e.preventDefault();
|
|
9
|
-
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label:
|
|
9
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: 'Home', route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/' });
|
|
10
10
|
};
|
|
11
|
-
return (_jsxs("header", { className: "header", children: [_jsx("div", { className: "header-logo", children: _jsx("a", { href: homeUrl !== null && homeUrl !== void 0 ? homeUrl :
|
|
11
|
+
return (_jsxs("header", { className: "header", children: [_jsx("div", { className: "header-logo", children: _jsx("a", { href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/', onClick: handleLogoClick, className: "header-logo__link", children: Logo ? (_jsx(Logo, { className: "header-logo__image" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image", draggable: false })) }) }), _jsxs("nav", { className: "header-nav", children: [_jsx("ul", { className: "header-nav__items", children: links === null || links === void 0 ? void 0 : links.map(function (it) {
|
|
12
12
|
var isActive = it.label === active;
|
|
13
|
-
|
|
13
|
+
var isDisabled = it.disabled === true;
|
|
14
|
+
return (_jsx("li", { className: "header__item ".concat(isActive ? 'header__item--active' : '', " ").concat(isDisabled ? 'header__item--disabled' : ''), children: it.isButton ? (_jsx(Button, { size: "sm", variant: "outline-secondary", disabled: isDisabled, onClick: function (e) {
|
|
14
15
|
e.preventDefault();
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
if (!isDisabled)
|
|
17
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(it);
|
|
18
|
+
}, children: it.label })) : (_jsx("a", { href: isDisabled ? undefined : it.route, className: "header__item__link", "aria-disabled": isDisabled, onClick: function (e) {
|
|
17
19
|
e.preventDefault();
|
|
18
|
-
|
|
20
|
+
if (!isDisabled)
|
|
21
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(it);
|
|
19
22
|
}, children: it.label })) }, it.label));
|
|
20
|
-
}) }), _jsx("div", { className: "header-nav__user-section ".concat(user ?
|
|
23
|
+
}) }), _jsx("div", { className: "header-nav__user-section ".concat(user ? 'header-nav__user-connected-section' : ''), children: user ? (_jsxs("div", { className: "header-nav__user-container", children: [_jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange }), _jsx(Button, { size: "sm", variant: "secondary", onClick: onLogout, className: "header-nav__logout-button", children: "Logout" })] })) : (_jsx(Button, { size: "sm", variant: "secondary", onClick: onLogin, children: "Login" })) })] })] }));
|
|
21
24
|
};
|
|
@@ -1,27 +1,29 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import React from
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { UserCard } from
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Button from '../../atoms/Button/Button';
|
|
4
|
+
import Icon from '../../atoms/Icon/Icon';
|
|
5
|
+
import { UserCard } from '../../molecules/UserCard/UserCard';
|
|
6
6
|
export var MobileNav = function (_a) {
|
|
7
7
|
var links = _a.links, onLinkClick = _a.onLinkClick, onLogin = _a.onLogin, onLogout = _a.onLogout, user = _a.user, active = _a.active, logoUrl = _a.logoUrl, selectedAgency = _a.selectedAgency, onAgencyChange = _a.onAgencyChange, agencies = _a.agencies, homeUrl = _a.homeUrl;
|
|
8
8
|
var _b = React.useState(false), open = _b[0], setOpen = _b[1];
|
|
9
9
|
var closeRef = React.useRef(null);
|
|
10
|
-
var Logo = typeof logoUrl ===
|
|
11
|
-
return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "header", children: [_jsx("button", { "aria-label": "Open Menu", onClick: function () { return setOpen(true); }, children: _jsx(Icon, { name: "menu", size: "sm" }) }), _jsx("div", { className: "header-logo", children: _jsx("a", { href: homeUrl !== null && homeUrl !== void 0 ? homeUrl :
|
|
10
|
+
var Logo = typeof logoUrl === 'function' ? logoUrl : null;
|
|
11
|
+
return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "header", children: [_jsx("button", { "aria-label": "Open Menu", onClick: function () { return setOpen(true); }, children: _jsx(Icon, { name: "menu", size: "sm" }) }), _jsx("div", { className: "header-logo", children: _jsx("a", { href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/', className: "header-logo__link", onClick: function (e) {
|
|
12
12
|
e.preventDefault();
|
|
13
|
-
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label:
|
|
13
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: 'Home', route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/' });
|
|
14
14
|
}, children: Logo ? (_jsx(Logo, { className: "header-logo__image" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image", draggable: false })) }) }), _jsx("div", { className: "header-user-actions", children: !user && (_jsx(Button, { size: "sm", variant: "secondary", onClick: function () {
|
|
15
15
|
onLogin === null || onLogin === void 0 ? void 0 : onLogin();
|
|
16
16
|
setOpen(false);
|
|
17
|
-
}, children: "Login" })) })] }), _jsx("div", { "aria-hidden": !open, className: "mobile-nav__backdrop ".concat(open ?
|
|
17
|
+
}, children: "Login" })) })] }), _jsx("div", { "aria-hidden": !open, className: "mobile-nav__backdrop ".concat(open ? 'mobile-nav__backdrop--open' : 'mobile-nav__backdrop--closed'), onClick: function () { return setOpen(false); } }), _jsxs("aside", { role: "dialog", "aria-modal": "true", "aria-label": "Main menu", className: "\n mobile-nav__sheet\n ".concat(open ? 'mobile-nav__sheet--open' : 'mobile-nav__sheet--closed', "\n "), children: [_jsxs("div", { className: "mobile-nav__header", children: [_jsx("div", { children: _jsx("button", { ref: closeRef, "aria-label": "Close menu", onClick: function () { return setOpen(false); }, className: "mobile-nav__close-button", children: _jsx(Icon, { name: "close", size: "sm" }) }) }), user ? (_jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange })) : (_jsx("a", { href: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/', className: "header-logo__link", onClick: function (e) {
|
|
18
18
|
e.preventDefault();
|
|
19
|
-
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label:
|
|
19
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick({ label: 'Home', route: homeUrl !== null && homeUrl !== void 0 ? homeUrl : '/' });
|
|
20
20
|
}, children: Logo ? (_jsx(Logo, { className: "header-logo__image-mobile" })) : (_jsx("img", { src: logoUrl, alt: "Mautourco", className: "header-logo__image-mobile", draggable: false })) }))] }), _jsx("nav", { className: "mobile-nav__content", children: _jsx("ul", { className: "mobile-nav__list", children: links.map(function (l, i) {
|
|
21
21
|
var activeItem = active && active === l.label;
|
|
22
|
-
return (_jsx("li", { className: "header__item ".concat(activeItem ?
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
return (_jsx("li", { className: "header__item ".concat(activeItem ? 'header__item--active' : '', " ").concat(l.disabled ? 'header__item--disabled' : ''), children: _jsx("button", { disabled: l.disabled, onClick: function () {
|
|
23
|
+
if (!l.disabled) {
|
|
24
|
+
onLinkClick === null || onLinkClick === void 0 ? void 0 : onLinkClick(l);
|
|
25
|
+
setOpen(false);
|
|
26
|
+
}
|
|
25
27
|
}, className: "mobile-nav__item-button", children: l.label }) }, "".concat(l.route, "-").concat(i)));
|
|
26
28
|
}) }) }), _jsx("div", { className: "mobile-nav__footer", children: user ? (_jsx("div", { className: "mobile-nav__user-info", children: _jsx(Button, { onClick: function () {
|
|
27
29
|
onLogout === null || onLogout === void 0 ? void 0 : onLogout();
|
|
@@ -67,15 +67,15 @@
|
|
|
67
67
|
padding-right: 0.5rem;
|
|
68
68
|
padding-top: 0.5rem;
|
|
69
69
|
padding-bottom: 0.5rem;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
70
|
+
font-weight: var(--typography-font-weight-regular);
|
|
71
|
+
font-style: Regular;
|
|
72
|
+
font-size: var(--typography-font-size-base);
|
|
73
73
|
|
|
74
|
-
|
|
74
|
+
&:hover:not(:has(button)) {
|
|
75
75
|
background-color: var(--color-elevation-state-hover-subtle);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
&:active {
|
|
79
79
|
background-color: var(--color-elevation-state-pressed-subtle);
|
|
80
80
|
}
|
|
81
81
|
}
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
padding-right: 0.75rem;
|
|
90
90
|
padding-top: 0.5rem;
|
|
91
91
|
padding-bottom: 0.5rem;
|
|
92
|
-
|
|
92
|
+
min-height: 24px;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.header__item--active {
|
|
@@ -107,13 +107,25 @@
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
.header__item--active {
|
|
110
|
-
|
|
110
|
+
font-weight: var(--typography-body-lg-6-font-weight-bold);
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
*:not(button) {
|
|
113
113
|
color: var(--color-text-brand);
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
+
.header__item--disabled {
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
cursor: not-allowed;
|
|
120
|
+
color: rgb(0 0 0 / 0.85);
|
|
121
|
+
opacity: 0.35;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.header__item--disabled .header__item__link {
|
|
125
|
+
cursor: not-allowed;
|
|
126
|
+
color: rgb(0 0 0 / 0.85);
|
|
127
|
+
}
|
|
128
|
+
|
|
117
129
|
.header-logo__link {
|
|
118
130
|
display: inline-flex;
|
|
119
131
|
align-items: center;
|
|
@@ -162,6 +174,11 @@
|
|
|
162
174
|
display: flex;
|
|
163
175
|
height: 100%;
|
|
164
176
|
align-items: center;
|
|
177
|
+
gap: 0.75rem;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.header-nav__logout-button {
|
|
181
|
+
flex-shrink: 0;
|
|
165
182
|
}
|
|
166
183
|
|
|
167
184
|
/* ===== Mobile Nav Classes ===== */
|
|
@@ -292,27 +309,27 @@
|
|
|
292
309
|
padding-right: 1rem;
|
|
293
310
|
padding-bottom: 1rem;
|
|
294
311
|
|
|
295
|
-
|
|
312
|
+
& > :first-child {
|
|
296
313
|
display: flex;
|
|
297
314
|
}
|
|
298
315
|
|
|
299
|
-
|
|
316
|
+
& > :first-child {
|
|
300
317
|
width: 100%;
|
|
301
318
|
}
|
|
302
319
|
|
|
303
|
-
|
|
320
|
+
& > :first-child {
|
|
304
321
|
justify-content: flex-end;
|
|
305
322
|
}
|
|
306
323
|
|
|
307
|
-
|
|
324
|
+
& > :last-child {
|
|
308
325
|
display: flex;
|
|
309
326
|
}
|
|
310
327
|
|
|
311
|
-
|
|
328
|
+
& > :last-child {
|
|
312
329
|
width: 100%;
|
|
313
330
|
}
|
|
314
331
|
|
|
315
|
-
|
|
332
|
+
& > :last-child {
|
|
316
333
|
justify-content: flex-start;
|
|
317
334
|
}
|
|
318
335
|
}
|
|
@@ -360,6 +377,13 @@
|
|
|
360
377
|
line-height: 1.25rem;
|
|
361
378
|
}
|
|
362
379
|
|
|
380
|
+
.mobile-nav__item-button:disabled,
|
|
381
|
+
.header__item--disabled .mobile-nav__item-button {
|
|
382
|
+
cursor: not-allowed;
|
|
383
|
+
color: rgb(0 0 0 / 0.4);
|
|
384
|
+
opacity: 0.35;
|
|
385
|
+
}
|
|
386
|
+
|
|
363
387
|
.mobile-nav__footer {
|
|
364
388
|
border-top-width: 1px;
|
|
365
389
|
border-color: rgb(0 0 0 / 0.1);
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import Button from
|
|
2
|
-
import { UserCard } from
|
|
1
|
+
import Button from '../../atoms/Button/Button';
|
|
2
|
+
import { UserCard } from '../../molecules/UserCard/UserCard';
|
|
3
3
|
|
|
4
4
|
type Link = {
|
|
5
5
|
label: string;
|
|
@@ -47,19 +47,19 @@ export const DesktopNav: React.FC<DesktopNavProps> = ({
|
|
|
47
47
|
selectedAgency,
|
|
48
48
|
onAgencyChange,
|
|
49
49
|
agencies,
|
|
50
|
-
className =
|
|
50
|
+
className = '',
|
|
51
51
|
}) => {
|
|
52
|
-
const Logo = typeof logoUrl ===
|
|
52
|
+
const Logo = typeof logoUrl === 'function' ? logoUrl : null;
|
|
53
53
|
|
|
54
54
|
const handleLogoClick = (e: React.MouseEvent) => {
|
|
55
55
|
e.preventDefault();
|
|
56
|
-
onLinkClick?.({ label:
|
|
56
|
+
onLinkClick?.({ label: 'Home', route: homeUrl ?? '/' });
|
|
57
57
|
};
|
|
58
58
|
|
|
59
59
|
return (
|
|
60
60
|
<header className="header">
|
|
61
61
|
<div className="header-logo">
|
|
62
|
-
<a href={homeUrl ??
|
|
62
|
+
<a href={homeUrl ?? '/'} onClick={handleLogoClick} className="header-logo__link">
|
|
63
63
|
{Logo ? (
|
|
64
64
|
<Logo className="header-logo__image" />
|
|
65
65
|
) : (
|
|
@@ -77,32 +77,32 @@ export const DesktopNav: React.FC<DesktopNavProps> = ({
|
|
|
77
77
|
<ul className="header-nav__items">
|
|
78
78
|
{links?.map((it) => {
|
|
79
79
|
const isActive = it.label === active;
|
|
80
|
+
const isDisabled = it.disabled === true;
|
|
80
81
|
|
|
81
82
|
return (
|
|
82
83
|
<li
|
|
83
84
|
key={it.label}
|
|
84
|
-
className={`header__item ${isActive ?
|
|
85
|
-
>
|
|
85
|
+
className={`header__item ${isActive ? 'header__item--active' : ''} ${isDisabled ? 'header__item--disabled' : ''}`}>
|
|
86
86
|
{it.isButton ? (
|
|
87
|
-
<Button
|
|
88
|
-
size="sm"
|
|
87
|
+
<Button
|
|
88
|
+
size="sm"
|
|
89
89
|
variant="outline-secondary"
|
|
90
|
+
disabled={isDisabled}
|
|
90
91
|
onClick={(e) => {
|
|
91
92
|
e.preventDefault();
|
|
92
|
-
onLinkClick?.(it);
|
|
93
|
-
}}
|
|
94
|
-
>
|
|
93
|
+
if (!isDisabled) onLinkClick?.(it);
|
|
94
|
+
}}>
|
|
95
95
|
{it.label}
|
|
96
96
|
</Button>
|
|
97
97
|
) : (
|
|
98
98
|
<a
|
|
99
|
-
href={it.route}
|
|
99
|
+
href={isDisabled ? undefined : it.route}
|
|
100
100
|
className="header__item__link"
|
|
101
|
+
aria-disabled={isDisabled}
|
|
101
102
|
onClick={(e) => {
|
|
102
103
|
e.preventDefault();
|
|
103
|
-
onLinkClick?.(it);
|
|
104
|
-
}}
|
|
105
|
-
>
|
|
104
|
+
if (!isDisabled) onLinkClick?.(it);
|
|
105
|
+
}}>
|
|
106
106
|
{it.label}
|
|
107
107
|
</a>
|
|
108
108
|
)}
|
|
@@ -111,16 +111,24 @@ export const DesktopNav: React.FC<DesktopNavProps> = ({
|
|
|
111
111
|
})}
|
|
112
112
|
</ul>
|
|
113
113
|
|
|
114
|
-
<div
|
|
114
|
+
<div
|
|
115
|
+
className={`header-nav__user-section ${user ? 'header-nav__user-connected-section' : ''}`}>
|
|
115
116
|
{user ? (
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
117
|
+
<div className="header-nav__user-container">
|
|
118
|
+
<UserCard
|
|
119
|
+
user={user}
|
|
120
|
+
agencies={agencies || []}
|
|
121
|
+
selectedAgency={selectedAgency}
|
|
122
|
+
onSelectAgency={onAgencyChange}
|
|
123
|
+
/>
|
|
124
|
+
<Button
|
|
125
|
+
size="sm"
|
|
126
|
+
variant="secondary"
|
|
127
|
+
onClick={onLogout}
|
|
128
|
+
className="header-nav__logout-button">
|
|
129
|
+
Logout
|
|
130
|
+
</Button>
|
|
131
|
+
</div>
|
|
124
132
|
) : (
|
|
125
133
|
<Button size="sm" variant="secondary" onClick={onLogin}>
|
|
126
134
|
Login
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { UserCard } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../../atoms/Button/Button';
|
|
3
|
+
import Icon from '../../atoms/Icon/Icon';
|
|
4
|
+
import { UserCard } from '../../molecules/UserCard/UserCard';
|
|
5
5
|
|
|
6
6
|
type Link = {
|
|
7
7
|
label: string;
|
|
@@ -51,7 +51,7 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
51
51
|
}) => {
|
|
52
52
|
const [open, setOpen] = React.useState(false);
|
|
53
53
|
const closeRef = React.useRef<HTMLButtonElement>(null);
|
|
54
|
-
const Logo = typeof logoUrl ===
|
|
54
|
+
const Logo = typeof logoUrl === 'function' ? logoUrl : null;
|
|
55
55
|
|
|
56
56
|
return (
|
|
57
57
|
<>
|
|
@@ -61,13 +61,12 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
61
61
|
</button>
|
|
62
62
|
<div className="header-logo">
|
|
63
63
|
<a
|
|
64
|
-
href={homeUrl ??
|
|
64
|
+
href={homeUrl ?? '/'}
|
|
65
65
|
className="header-logo__link"
|
|
66
66
|
onClick={(e) => {
|
|
67
67
|
e.preventDefault();
|
|
68
|
-
onLinkClick?.({ label:
|
|
69
|
-
}}
|
|
70
|
-
>
|
|
68
|
+
onLinkClick?.({ label: 'Home', route: homeUrl ?? '/' });
|
|
69
|
+
}}>
|
|
71
70
|
{Logo ? (
|
|
72
71
|
<Logo className="header-logo__image" />
|
|
73
72
|
) : (
|
|
@@ -88,8 +87,7 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
88
87
|
onClick={() => {
|
|
89
88
|
onLogin?.();
|
|
90
89
|
setOpen(false);
|
|
91
|
-
}}
|
|
92
|
-
>
|
|
90
|
+
}}>
|
|
93
91
|
Login
|
|
94
92
|
</Button>
|
|
95
93
|
)}
|
|
@@ -98,7 +96,7 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
98
96
|
<div
|
|
99
97
|
aria-hidden={!open}
|
|
100
98
|
className={`mobile-nav__backdrop ${
|
|
101
|
-
open ?
|
|
99
|
+
open ? 'mobile-nav__backdrop--open' : 'mobile-nav__backdrop--closed'
|
|
102
100
|
}`}
|
|
103
101
|
onClick={() => setOpen(false)}
|
|
104
102
|
/>
|
|
@@ -109,17 +107,15 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
109
107
|
aria-label="Main menu"
|
|
110
108
|
className={`
|
|
111
109
|
mobile-nav__sheet
|
|
112
|
-
${open ?
|
|
113
|
-
`}
|
|
114
|
-
>
|
|
110
|
+
${open ? 'mobile-nav__sheet--open' : 'mobile-nav__sheet--closed'}
|
|
111
|
+
`}>
|
|
115
112
|
<div className="mobile-nav__header">
|
|
116
113
|
<div>
|
|
117
114
|
<button
|
|
118
115
|
ref={closeRef}
|
|
119
116
|
aria-label="Close menu"
|
|
120
117
|
onClick={() => setOpen(false)}
|
|
121
|
-
className="mobile-nav__close-button"
|
|
122
|
-
>
|
|
118
|
+
className="mobile-nav__close-button">
|
|
123
119
|
<Icon name="close" size="sm" />
|
|
124
120
|
</button>
|
|
125
121
|
</div>
|
|
@@ -132,13 +128,12 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
132
128
|
/>
|
|
133
129
|
) : (
|
|
134
130
|
<a
|
|
135
|
-
href={homeUrl ??
|
|
131
|
+
href={homeUrl ?? '/'}
|
|
136
132
|
className="header-logo__link"
|
|
137
133
|
onClick={(e) => {
|
|
138
134
|
e.preventDefault();
|
|
139
|
-
onLinkClick?.({ label:
|
|
140
|
-
}}
|
|
141
|
-
>
|
|
135
|
+
onLinkClick?.({ label: 'Home', route: homeUrl ?? '/' });
|
|
136
|
+
}}>
|
|
142
137
|
{Logo ? (
|
|
143
138
|
<Logo className="header-logo__image-mobile" />
|
|
144
139
|
) : (
|
|
@@ -160,16 +155,16 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
160
155
|
return (
|
|
161
156
|
<li
|
|
162
157
|
key={`${l.route}-${i}`}
|
|
163
|
-
className={`header__item ${activeItem ?
|
|
164
|
-
>
|
|
158
|
+
className={`header__item ${activeItem ? 'header__item--active' : ''} ${l.disabled ? 'header__item--disabled' : ''}`}>
|
|
165
159
|
<button
|
|
166
160
|
disabled={l.disabled}
|
|
167
161
|
onClick={() => {
|
|
168
|
-
|
|
169
|
-
|
|
162
|
+
if (!l.disabled) {
|
|
163
|
+
onLinkClick?.(l);
|
|
164
|
+
setOpen(false);
|
|
165
|
+
}
|
|
170
166
|
}}
|
|
171
|
-
className="mobile-nav__item-button"
|
|
172
|
-
>
|
|
167
|
+
className="mobile-nav__item-button">
|
|
173
168
|
{l.label}
|
|
174
169
|
</button>
|
|
175
170
|
</li>
|
|
@@ -186,8 +181,7 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
186
181
|
onLogout?.();
|
|
187
182
|
setOpen(false);
|
|
188
183
|
}}
|
|
189
|
-
className="mobile-nav__logout-button"
|
|
190
|
-
>
|
|
184
|
+
className="mobile-nav__logout-button">
|
|
191
185
|
Logout
|
|
192
186
|
</Button>
|
|
193
187
|
</div>
|
|
@@ -198,8 +192,7 @@ export const MobileNav: React.FC<MobileNavProps> = ({
|
|
|
198
192
|
onClick={() => {
|
|
199
193
|
onLogin?.();
|
|
200
194
|
setOpen(false);
|
|
201
|
-
}}
|
|
202
|
-
>
|
|
195
|
+
}}>
|
|
203
196
|
Login
|
|
204
197
|
</Button>
|
|
205
198
|
)}
|
|
@@ -1,167 +1,183 @@
|
|
|
1
1
|
.header {
|
|
2
|
-
|
|
2
|
+
@apply flex md:justify-between w-full h-[78px] px-4 lg:px-24 shadow-[0_3px_8px_#00000040] sm:justify-start gap-[56px];
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.header-logo {
|
|
6
|
-
|
|
6
|
+
@apply flex flex-col justify-center h-full;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.header-nav {
|
|
10
|
-
|
|
10
|
+
@apply flex items-center justify-end w-auto;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.header-nav__items {
|
|
14
|
-
|
|
14
|
+
@apply flex items-stretch h-full gap-0 pr-8;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.header__item {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
@apply flex justify-center h-full items-center px-2 py-2;
|
|
19
|
+
font-weight: var(--typography-font-weight-regular);
|
|
20
|
+
font-style: Regular;
|
|
21
|
+
font-size: var(--typography-font-size-base);
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
&:active {
|
|
28
|
-
@apply bg-[var(--color-elevation-state-pressed-subtle)]
|
|
29
|
-
}
|
|
23
|
+
&:hover:not(:has(button)) {
|
|
24
|
+
@apply bg-[var(--color-elevation-state-hover-subtle)];
|
|
25
|
+
}
|
|
30
26
|
|
|
27
|
+
&:active {
|
|
28
|
+
@apply bg-[var(--color-elevation-state-pressed-subtle)];
|
|
29
|
+
}
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
.header__item-content {
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
@apply flex items-center gap-2 px-3 py-2 h-full;
|
|
34
|
+
min-height: 24px;
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
.header__item--active {
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
@apply lg:border-b-4 lg:border-l-0 border-l-4 border-[var(--color-sandy-brown-500)] text-[var(--color-text-brand)];
|
|
39
|
+
font-weight: var(--typography-body-lg-6-font-weight-bold);
|
|
40
|
+
|
|
41
|
+
*:not(button) {
|
|
42
|
+
@apply text-[var(--color-text-brand)];
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.header__item--disabled {
|
|
47
|
+
@apply opacity-35 cursor-not-allowed pointer-events-none text-black/85;
|
|
48
|
+
}
|
|
41
49
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
50
|
+
.header__item--disabled .header__item__link {
|
|
51
|
+
@apply cursor-not-allowed text-black/85;
|
|
45
52
|
}
|
|
46
53
|
|
|
47
54
|
.header-logo__link {
|
|
48
|
-
|
|
55
|
+
@apply inline-flex items-center gap-2;
|
|
49
56
|
}
|
|
50
57
|
|
|
51
58
|
.header-logo__image {
|
|
52
|
-
|
|
59
|
+
@apply w-auto h-6 md:h-7;
|
|
53
60
|
}
|
|
54
61
|
|
|
55
62
|
.header__item__link {
|
|
56
|
-
|
|
63
|
+
@apply block px-3 py-2 transition-colors;
|
|
57
64
|
}
|
|
58
65
|
|
|
59
66
|
.header-nav__user-section {
|
|
60
|
-
|
|
67
|
+
@apply flex items-center h-full gap-3 pl-8;
|
|
61
68
|
}
|
|
62
69
|
|
|
63
70
|
.header-nav__user-connected-section {
|
|
64
|
-
|
|
71
|
+
@apply border-l border-l-[var(--color-surface-300)];
|
|
65
72
|
}
|
|
66
73
|
|
|
67
74
|
.header-nav__user-container {
|
|
68
|
-
|
|
75
|
+
@apply flex items-center h-full gap-3;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.header-nav__logout-button {
|
|
79
|
+
@apply shrink-0;
|
|
69
80
|
}
|
|
70
81
|
|
|
71
82
|
/* ===== Mobile Nav Classes ===== */
|
|
72
83
|
|
|
73
84
|
.header-logo__link {
|
|
74
|
-
|
|
85
|
+
@apply inline-flex items-center gap-2;
|
|
75
86
|
}
|
|
76
87
|
|
|
77
88
|
.header-logo__image-mobile {
|
|
78
|
-
|
|
89
|
+
@apply w-auto h-6;
|
|
79
90
|
}
|
|
80
91
|
|
|
81
92
|
.header-login-button {
|
|
82
|
-
|
|
93
|
+
@apply hidden rounded-full bg-teal-600 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 md:inline-block;
|
|
83
94
|
}
|
|
84
95
|
|
|
85
96
|
.header-user-actions {
|
|
86
|
-
|
|
97
|
+
@apply flex items-center gap-3;
|
|
87
98
|
}
|
|
88
99
|
|
|
89
100
|
.mobile-nav__backdrop {
|
|
90
|
-
|
|
101
|
+
@apply fixed inset-0 z-40 transition-opacity bg-black/40;
|
|
91
102
|
}
|
|
92
103
|
|
|
93
104
|
.mobile-nav__backdrop--open {
|
|
94
|
-
|
|
105
|
+
@apply opacity-100 pointer-events-auto;
|
|
95
106
|
}
|
|
96
107
|
|
|
97
108
|
.mobile-nav__backdrop--closed {
|
|
98
|
-
|
|
109
|
+
@apply opacity-0 pointer-events-none;
|
|
99
110
|
}
|
|
100
111
|
|
|
101
112
|
.mobile-nav__sheet {
|
|
102
|
-
|
|
113
|
+
@apply fixed left-0 top-0 z-50 h-dvh w-[84vw] max-w-[360px] bg-white shadow-xl border-r border-black/10 transition-transform duration-300 flex flex-col;
|
|
103
114
|
}
|
|
104
115
|
|
|
105
116
|
.mobile-nav__sheet--open {
|
|
106
|
-
|
|
117
|
+
@apply translate-x-0;
|
|
107
118
|
}
|
|
108
119
|
|
|
109
120
|
.mobile-nav__sheet--closed {
|
|
110
|
-
|
|
121
|
+
@apply -translate-x-full;
|
|
111
122
|
}
|
|
112
123
|
|
|
113
124
|
.mobile-nav__header {
|
|
114
|
-
|
|
125
|
+
@apply flex flex-col items-start justify-between px-4 pb-4 border-b border-black/10;
|
|
115
126
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
127
|
+
& > :first-child {
|
|
128
|
+
@apply flex justify-end w-full;
|
|
129
|
+
}
|
|
119
130
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
131
|
+
& > :last-child {
|
|
132
|
+
@apply flex justify-start w-full;
|
|
133
|
+
}
|
|
123
134
|
}
|
|
124
135
|
|
|
125
136
|
.mobile-nav__close-button {
|
|
126
|
-
|
|
137
|
+
@apply inline-flex items-center justify-center rounded-full size-9 hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/20;
|
|
127
138
|
}
|
|
128
139
|
|
|
129
140
|
.mobile-nav__content {
|
|
130
|
-
|
|
141
|
+
@apply flex-1 overflow-y-auto;
|
|
131
142
|
}
|
|
132
143
|
|
|
133
144
|
.mobile-nav__list {
|
|
134
|
-
|
|
145
|
+
@apply py-2;
|
|
135
146
|
}
|
|
136
147
|
|
|
137
148
|
.mobile-nav__item-button {
|
|
138
|
-
|
|
149
|
+
@apply w-full px-4 py-3 text-sm text-left;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.mobile-nav__item-button:disabled,
|
|
153
|
+
.header__item--disabled .mobile-nav__item-button {
|
|
154
|
+
@apply opacity-35 text-black/40 cursor-not-allowed;
|
|
139
155
|
}
|
|
140
156
|
|
|
141
157
|
.mobile-nav__footer {
|
|
142
|
-
|
|
158
|
+
@apply p-4 border-t border-black/10;
|
|
143
159
|
}
|
|
144
160
|
|
|
145
161
|
.mobile-nav__user-info {
|
|
146
|
-
|
|
162
|
+
@apply flex items-center justify-between;
|
|
147
163
|
}
|
|
148
164
|
|
|
149
165
|
.mobile-nav__user-text {
|
|
150
|
-
|
|
166
|
+
@apply text-sm;
|
|
151
167
|
}
|
|
152
168
|
|
|
153
169
|
.mobile-nav__user-name {
|
|
154
|
-
|
|
170
|
+
@apply font-medium text-black;
|
|
155
171
|
}
|
|
156
172
|
|
|
157
173
|
.mobile-nav__user-agency {
|
|
158
|
-
|
|
174
|
+
@apply text-black/60;
|
|
159
175
|
}
|
|
160
176
|
|
|
161
177
|
.mobile-nav__logout-button {
|
|
162
|
-
|
|
178
|
+
@apply rounded-full px-4 py-1.5 text-sm font-medium border border-black/10 hover:bg-black/5;
|
|
163
179
|
}
|
|
164
180
|
|
|
165
181
|
.mobile-nav__login-button {
|
|
166
|
-
|
|
167
|
-
}
|
|
182
|
+
@apply w-full px-4 py-2 text-sm font-medium text-white transition bg-teal-600 rounded-full shadow-sm hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500;
|
|
183
|
+
}
|