ml-ui-lib 1.0.20 → 1.0.22
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.
|
@@ -18,9 +18,17 @@
|
|
|
18
18
|
max-height: 50px;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
|
|
22
|
+
.nav-items {
|
|
22
23
|
display: flex;
|
|
24
|
+
overflow: auto;
|
|
23
25
|
gap: 1.5rem;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
.navbar-links {
|
|
30
|
+
display: flex;
|
|
31
|
+
/* gap: 1.5rem; */
|
|
24
32
|
transition: all 0.3s ease;
|
|
25
33
|
margin-left: 35px;
|
|
26
34
|
}
|
|
@@ -29,7 +37,7 @@
|
|
|
29
37
|
text-decoration: none;
|
|
30
38
|
color: #333;
|
|
31
39
|
font-weight: 400;
|
|
32
|
-
font-size:
|
|
40
|
+
font-size: 17px;
|
|
33
41
|
transition: color 0.2s;
|
|
34
42
|
}
|
|
35
43
|
|
|
@@ -128,6 +136,12 @@
|
|
|
128
136
|
}
|
|
129
137
|
|
|
130
138
|
/* ⭐ SLIDE-IN MENU */
|
|
139
|
+
|
|
140
|
+
.nav-items {
|
|
141
|
+
gap: 0px;
|
|
142
|
+
flex-direction: column;
|
|
143
|
+
}
|
|
144
|
+
|
|
131
145
|
.navbar-links {
|
|
132
146
|
position: fixed;
|
|
133
147
|
top: 0;
|
|
@@ -136,7 +150,7 @@
|
|
|
136
150
|
width: 400px;
|
|
137
151
|
background: #fff;
|
|
138
152
|
flex-direction: column;
|
|
139
|
-
padding:
|
|
153
|
+
padding: 65px 0px 70px;
|
|
140
154
|
transition: right 0.3s ease-in-out;
|
|
141
155
|
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
|
|
142
156
|
z-index: 9999;
|
|
@@ -247,4 +261,25 @@
|
|
|
247
261
|
display: flex;
|
|
248
262
|
align-items: center;
|
|
249
263
|
gap: 20px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
::-webkit-scrollbar {
|
|
267
|
+
width: 5px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Track */
|
|
271
|
+
::-webkit-scrollbar-track {
|
|
272
|
+
box-shadow: inset 0 0 5px grey;
|
|
273
|
+
border-radius: 10px;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Handle */
|
|
277
|
+
::-webkit-scrollbar-thumb {
|
|
278
|
+
background: #757575;
|
|
279
|
+
border-radius: 10px;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Handle on hover */
|
|
283
|
+
::-webkit-scrollbar-thumb:hover {
|
|
284
|
+
background: #4f4f4f;
|
|
250
285
|
}
|
|
@@ -22,15 +22,15 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'M Lhuillier Lo
|
|
|
22
22
|
document.body.style.overflow = '';
|
|
23
23
|
onClose?.();
|
|
24
24
|
};
|
|
25
|
-
return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${className}`, children: _jsxs("div", { className: "navbar-container", children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }, children: [_jsx("div", { className: "navbar-logo", children: _jsx("a", { href: siteUrl, className: "navbar-brand", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { cursor: 'pointer', display: 'block' } }) }) }), _jsxs("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: [items.map((item) => {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
25
|
+
return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${className}`, children: _jsxs("div", { className: "navbar-container", children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }, children: [_jsx("div", { className: "navbar-logo", children: _jsx("a", { href: siteUrl, className: "navbar-brand", children: _jsx("img", { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, style: { cursor: 'pointer', display: 'block' } }) }) }), _jsxs("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: [_jsx("div", { className: 'nav-items', children: items.map((item) => {
|
|
26
|
+
const linkPath = new URL(item.link, 'https://dummybase').pathname;
|
|
27
|
+
const isActive = currentPath === linkPath;
|
|
28
|
+
return (_jsx("a", { href: item.link, target: item.target || '_self', className: `navbar-link ${isActive ? 'active' : ''}`, onClick: () => setMenuOpen(false), children: item.name.includes('-')
|
|
29
|
+
? item.name
|
|
30
|
+
.split('-')
|
|
31
|
+
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
|
|
32
|
+
.join(' & ')
|
|
33
|
+
: item.name }, item.name));
|
|
34
|
+
}) }), _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" })] })] }), _jsxs("div", { className: "navbar-right", children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" }))] })] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (showLogin && (_jsxs(_Fragment, { children: [_jsx("div", { className: "overlay-side-content", children: otherContent }), _jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, width: "400px", height: "100%", position: "right", closeOnOverlayClick: false, onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })] }))) : (_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, height: "70%", position: "bottom", onClose: handleInternalClose, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })) }))] }));
|
|
35
35
|
};
|
|
36
36
|
export default Navbar;
|