ml-ui-lib 1.0.19 → 1.0.20
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.
|
@@ -34,13 +34,19 @@
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
.navbar-links a:hover {
|
|
37
|
-
|
|
37
|
+
transition: all 0.5s ease;
|
|
38
|
+
background: #ff0000;
|
|
39
|
+
color: #fff;
|
|
38
40
|
}
|
|
39
41
|
|
|
40
42
|
.navbar-links a.active {
|
|
41
43
|
color: #ff0000;
|
|
42
44
|
}
|
|
43
45
|
|
|
46
|
+
.navbar-links a.active:hover {
|
|
47
|
+
color: #fff;
|
|
48
|
+
}
|
|
49
|
+
|
|
44
50
|
|
|
45
51
|
/* Burger Icon */
|
|
46
52
|
.burger {
|
|
@@ -97,49 +103,72 @@
|
|
|
97
103
|
|
|
98
104
|
}
|
|
99
105
|
|
|
106
|
+
.mobile-login-btn {
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
100
110
|
/* Responsive Menu */
|
|
101
111
|
@media (max-width: 992px) {
|
|
112
|
+
.mobile-login-btn {
|
|
113
|
+
display: block;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.login-btn {
|
|
117
|
+
display: none !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
102
120
|
.burger {
|
|
103
121
|
display: flex;
|
|
122
|
+
z-index: 10000;
|
|
104
123
|
}
|
|
105
124
|
|
|
106
125
|
.navbar-container {
|
|
107
126
|
padding: 1rem 1.5rem;
|
|
127
|
+
justify-content: space-between;
|
|
108
128
|
}
|
|
109
129
|
|
|
130
|
+
/* ⭐ SLIDE-IN MENU */
|
|
110
131
|
.navbar-links {
|
|
111
|
-
position:
|
|
112
|
-
top:
|
|
113
|
-
right:
|
|
132
|
+
position: fixed;
|
|
133
|
+
top: 0;
|
|
134
|
+
right: -100%;
|
|
135
|
+
height: 100vh;
|
|
136
|
+
width: 400px;
|
|
114
137
|
background: #fff;
|
|
115
138
|
flex-direction: column;
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
opacity: 0;
|
|
121
|
-
transition: all 0.3s ease;
|
|
122
|
-
padding: 0 2rem;
|
|
123
|
-
z-index: 100;
|
|
139
|
+
padding: 80px 0px 120px;
|
|
140
|
+
transition: right 0.3s ease-in-out;
|
|
141
|
+
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
|
|
142
|
+
z-index: 9999;
|
|
124
143
|
}
|
|
125
144
|
|
|
126
145
|
.navbar-links.open {
|
|
127
|
-
|
|
128
|
-
opacity: 1;
|
|
129
|
-
padding: 1rem 2rem;
|
|
130
|
-
border-bottom: 1px solid #eee;
|
|
146
|
+
right: 0;
|
|
131
147
|
}
|
|
132
148
|
|
|
133
149
|
.navbar-links a {
|
|
134
|
-
padding:
|
|
150
|
+
padding: 1rem 50px;
|
|
135
151
|
width: 100%;
|
|
152
|
+
font-size: 1.2rem;
|
|
136
153
|
}
|
|
137
154
|
|
|
138
|
-
|
|
139
|
-
|
|
155
|
+
/* ⭐ MOBILE LOGIN FIXED AT BOTTOM */
|
|
156
|
+
.mobile-login-btn {
|
|
157
|
+
position: absolute;
|
|
158
|
+
bottom: 0;
|
|
159
|
+
left: 0;
|
|
160
|
+
width: 100%;
|
|
161
|
+
padding: 1.3rem;
|
|
162
|
+
border: none;
|
|
163
|
+
/* background: #d00000; */
|
|
164
|
+
color: #333;
|
|
165
|
+
font-size: 1.1rem;
|
|
166
|
+
font-weight: 600;
|
|
167
|
+
/* text-align: center; */
|
|
140
168
|
}
|
|
141
169
|
}
|
|
142
170
|
|
|
171
|
+
|
|
143
172
|
/* Login Button */
|
|
144
173
|
.login-btn {
|
|
145
174
|
color: #333;
|
|
@@ -207,4 +236,15 @@
|
|
|
207
236
|
background: rgba(255, 0, 0, 1) !important;
|
|
208
237
|
backdrop-filter: blur(3px);
|
|
209
238
|
}
|
|
239
|
+
|
|
240
|
+
.navbar-links {
|
|
241
|
+
width: 100%;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Right-side group */
|
|
246
|
+
.navbar-right {
|
|
247
|
+
display: flex;
|
|
248
|
+
align-items: center;
|
|
249
|
+
gap: 20px;
|
|
210
250
|
}
|
|
@@ -22,18 +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',
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
(logedinData ? (_jsxs("div", { className: "navbar-user", children: ["Hello, ", logedinData.name || 'User'] })) : (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })))] }) }), login && !logedinData && (_jsx(_Fragment, { children: !isMobile ? (_jsx(_Fragment, { children: 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", onClose: handleInternalClose, closeOnOverlayClick: false, children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })] })) })) : (
|
|
36
|
-
/* Mobile → Bottom sliding */
|
|
37
|
-
_jsx("div", { className: "navbar-login-panel", children: _jsxs(SlidingPanel, { isOpen: showLogin, height: "70%", onClose: handleInternalClose, position: "bottom", children: [_jsx("div", { className: "navbar-panel-header" }), _jsx("div", { className: "navbar-panel-content", children: loginContent || _jsx("p", { children: "Login form goes here" }) })] }) })) }))] }));
|
|
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
|
+
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" }) })] }) })) }))] }));
|
|
38
35
|
};
|
|
39
36
|
export default Navbar;
|