mautourco-components 0.2.97 → 0.2.98
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 +33 -14
- package/package.json +1 -1
- package/src/components/organisms/TopNavigation/DesktopNav.tsx +27 -26
- package/src/components/organisms/TopNavigation/MobileNav.tsx +24 -31
- package/src/styles/components/organism/topnavigation.css +69 -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 ? (_jsx("div", { className: "header-nav__user-container", children: _jsx(UserCard, { user: user, agencies: agencies || [], selectedAgency: selectedAgency, onSelectAgency: onAgencyChange }) })) : (_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;
|
|
@@ -292,27 +304,27 @@
|
|
|
292
304
|
padding-right: 1rem;
|
|
293
305
|
padding-bottom: 1rem;
|
|
294
306
|
|
|
295
|
-
|
|
307
|
+
& > :first-child {
|
|
296
308
|
display: flex;
|
|
297
309
|
}
|
|
298
310
|
|
|
299
|
-
|
|
311
|
+
& > :first-child {
|
|
300
312
|
width: 100%;
|
|
301
313
|
}
|
|
302
314
|
|
|
303
|
-
|
|
315
|
+
& > :first-child {
|
|
304
316
|
justify-content: flex-end;
|
|
305
317
|
}
|
|
306
318
|
|
|
307
|
-
|
|
319
|
+
& > :last-child {
|
|
308
320
|
display: flex;
|
|
309
321
|
}
|
|
310
322
|
|
|
311
|
-
|
|
323
|
+
& > :last-child {
|
|
312
324
|
width: 100%;
|
|
313
325
|
}
|
|
314
326
|
|
|
315
|
-
|
|
327
|
+
& > :last-child {
|
|
316
328
|
justify-content: flex-start;
|
|
317
329
|
}
|
|
318
330
|
}
|
|
@@ -360,6 +372,13 @@
|
|
|
360
372
|
line-height: 1.25rem;
|
|
361
373
|
}
|
|
362
374
|
|
|
375
|
+
.mobile-nav__item-button:disabled,
|
|
376
|
+
.header__item--disabled .mobile-nav__item-button {
|
|
377
|
+
cursor: not-allowed;
|
|
378
|
+
color: rgb(0 0 0 / 0.4);
|
|
379
|
+
opacity: 0.35;
|
|
380
|
+
}
|
|
381
|
+
|
|
363
382
|
.mobile-nav__footer {
|
|
364
383
|
border-top-width: 1px;
|
|
365
384
|
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,17 @@ 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
|
+
</div>
|
|
124
125
|
) : (
|
|
125
126
|
<Button size="sm" variant="secondary" onClick={onLogin}>
|
|
126
127
|
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,179 @@
|
|
|
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;
|
|
69
76
|
}
|
|
70
77
|
|
|
71
78
|
/* ===== Mobile Nav Classes ===== */
|
|
72
79
|
|
|
73
80
|
.header-logo__link {
|
|
74
|
-
|
|
81
|
+
@apply inline-flex items-center gap-2;
|
|
75
82
|
}
|
|
76
83
|
|
|
77
84
|
.header-logo__image-mobile {
|
|
78
|
-
|
|
85
|
+
@apply w-auto h-6;
|
|
79
86
|
}
|
|
80
87
|
|
|
81
88
|
.header-login-button {
|
|
82
|
-
|
|
89
|
+
@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
90
|
}
|
|
84
91
|
|
|
85
92
|
.header-user-actions {
|
|
86
|
-
|
|
93
|
+
@apply flex items-center gap-3;
|
|
87
94
|
}
|
|
88
95
|
|
|
89
96
|
.mobile-nav__backdrop {
|
|
90
|
-
|
|
97
|
+
@apply fixed inset-0 z-40 transition-opacity bg-black/40;
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
.mobile-nav__backdrop--open {
|
|
94
|
-
|
|
101
|
+
@apply opacity-100 pointer-events-auto;
|
|
95
102
|
}
|
|
96
103
|
|
|
97
104
|
.mobile-nav__backdrop--closed {
|
|
98
|
-
|
|
105
|
+
@apply opacity-0 pointer-events-none;
|
|
99
106
|
}
|
|
100
107
|
|
|
101
108
|
.mobile-nav__sheet {
|
|
102
|
-
|
|
109
|
+
@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
110
|
}
|
|
104
111
|
|
|
105
112
|
.mobile-nav__sheet--open {
|
|
106
|
-
|
|
113
|
+
@apply translate-x-0;
|
|
107
114
|
}
|
|
108
115
|
|
|
109
116
|
.mobile-nav__sheet--closed {
|
|
110
|
-
|
|
117
|
+
@apply -translate-x-full;
|
|
111
118
|
}
|
|
112
119
|
|
|
113
120
|
.mobile-nav__header {
|
|
114
|
-
|
|
121
|
+
@apply flex flex-col items-start justify-between px-4 pb-4 border-b border-black/10;
|
|
115
122
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
123
|
+
& > :first-child {
|
|
124
|
+
@apply flex justify-end w-full;
|
|
125
|
+
}
|
|
119
126
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
127
|
+
& > :last-child {
|
|
128
|
+
@apply flex justify-start w-full;
|
|
129
|
+
}
|
|
123
130
|
}
|
|
124
131
|
|
|
125
132
|
.mobile-nav__close-button {
|
|
126
|
-
|
|
133
|
+
@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
134
|
}
|
|
128
135
|
|
|
129
136
|
.mobile-nav__content {
|
|
130
|
-
|
|
137
|
+
@apply flex-1 overflow-y-auto;
|
|
131
138
|
}
|
|
132
139
|
|
|
133
140
|
.mobile-nav__list {
|
|
134
|
-
|
|
141
|
+
@apply py-2;
|
|
135
142
|
}
|
|
136
143
|
|
|
137
144
|
.mobile-nav__item-button {
|
|
138
|
-
|
|
145
|
+
@apply w-full px-4 py-3 text-sm text-left;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.mobile-nav__item-button:disabled,
|
|
149
|
+
.header__item--disabled .mobile-nav__item-button {
|
|
150
|
+
@apply opacity-35 text-black/40 cursor-not-allowed;
|
|
139
151
|
}
|
|
140
152
|
|
|
141
153
|
.mobile-nav__footer {
|
|
142
|
-
|
|
154
|
+
@apply p-4 border-t border-black/10;
|
|
143
155
|
}
|
|
144
156
|
|
|
145
157
|
.mobile-nav__user-info {
|
|
146
|
-
|
|
158
|
+
@apply flex items-center justify-between;
|
|
147
159
|
}
|
|
148
160
|
|
|
149
161
|
.mobile-nav__user-text {
|
|
150
|
-
|
|
162
|
+
@apply text-sm;
|
|
151
163
|
}
|
|
152
164
|
|
|
153
165
|
.mobile-nav__user-name {
|
|
154
|
-
|
|
166
|
+
@apply font-medium text-black;
|
|
155
167
|
}
|
|
156
168
|
|
|
157
169
|
.mobile-nav__user-agency {
|
|
158
|
-
|
|
170
|
+
@apply text-black/60;
|
|
159
171
|
}
|
|
160
172
|
|
|
161
173
|
.mobile-nav__logout-button {
|
|
162
|
-
|
|
174
|
+
@apply rounded-full px-4 py-1.5 text-sm font-medium border border-black/10 hover:bg-black/5;
|
|
163
175
|
}
|
|
164
176
|
|
|
165
177
|
.mobile-nav__login-button {
|
|
166
|
-
|
|
167
|
-
}
|
|
178
|
+
@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;
|
|
179
|
+
}
|