ml-ui-lib 1.0.46 → 1.0.47
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.
|
@@ -561,7 +561,7 @@
|
|
|
561
561
|
|
|
562
562
|
background: white;
|
|
563
563
|
/* important so it covers */
|
|
564
|
-
border-radius: 20px;
|
|
564
|
+
/* border-radius: 20px; */
|
|
565
565
|
|
|
566
566
|
transition: width 0.35s ease;
|
|
567
567
|
z-index: 10;
|
|
@@ -581,16 +581,18 @@
|
|
|
581
581
|
padding: 0 10px;
|
|
582
582
|
opacity: 0;
|
|
583
583
|
transition: opacity 0.2s ease;
|
|
584
|
-
border: solid #
|
|
585
|
-
padding: 10px 10px;
|
|
584
|
+
border: solid #9b9b9ba5 1px;
|
|
585
|
+
padding: 10px 35px 10px 10px;
|
|
586
586
|
font-size: 15px;
|
|
587
587
|
border-radius: 15px;
|
|
588
|
+
pointer-events: auto;
|
|
588
589
|
/* margin-left: -15px; */
|
|
589
590
|
}
|
|
590
591
|
|
|
591
592
|
.navbar-search-container.open .navbar-search-input {
|
|
592
593
|
opacity: 1;
|
|
593
594
|
margin-left: -15px;
|
|
595
|
+
margin-right: -30px;
|
|
594
596
|
}
|
|
595
597
|
|
|
596
598
|
.navbar-search-btn {
|
|
@@ -601,8 +603,9 @@
|
|
|
601
603
|
align-items: center;
|
|
602
604
|
justify-content: center;
|
|
603
605
|
padding: 5px;
|
|
604
|
-
margin-left: -
|
|
606
|
+
margin-left: -35px !important;
|
|
605
607
|
color: #fff;
|
|
608
|
+
z-index: 2;
|
|
606
609
|
}
|
|
607
610
|
|
|
608
611
|
.navbar-search-container.open .navbar-search-btn {
|
|
@@ -622,6 +625,7 @@
|
|
|
622
625
|
display: flex;
|
|
623
626
|
align-items: center;
|
|
624
627
|
gap: 10px;
|
|
628
|
+
padding-right: 40px;
|
|
625
629
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
|
626
630
|
}
|
|
627
631
|
|
|
@@ -641,7 +645,7 @@
|
|
|
641
645
|
/* Search expands more when active */
|
|
642
646
|
.navbar-search-container.open {
|
|
643
647
|
width: 350px;
|
|
644
|
-
border-left: solid #
|
|
648
|
+
border-left: solid #999 1px;
|
|
645
649
|
/* increase if needed */
|
|
646
650
|
}
|
|
647
651
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import { useState, useEffect } from 'react';
|
|
3
|
+
import { useState, useEffect, useRef } from 'react';
|
|
4
4
|
import './Navbar.css';
|
|
5
5
|
import { SlidingPanel } from '../SlidingPanel/SlidingPanel';
|
|
6
6
|
export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
|
|
@@ -14,6 +14,8 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
|
|
|
14
14
|
const [lastScrollY, setLastScrollY] = useState(0);
|
|
15
15
|
const [searchOpen, setSearchOpen] = useState(false);
|
|
16
16
|
const [searchQuery, setSearchQuery] = useState('');
|
|
17
|
+
const searchContainerRef = useRef(null);
|
|
18
|
+
const hasValue = searchQuery.trim().length > 0;
|
|
17
19
|
const handleSearch = () => {
|
|
18
20
|
if (!searchQuery.trim())
|
|
19
21
|
return;
|
|
@@ -89,6 +91,28 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
|
|
|
89
91
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
90
92
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
91
93
|
}, [lastScrollY, menuOpen]);
|
|
94
|
+
useEffect(() => {
|
|
95
|
+
const handleClickOutside = (event) => {
|
|
96
|
+
if (searchContainerRef.current &&
|
|
97
|
+
!searchContainerRef.current.contains(event.target)) {
|
|
98
|
+
setSearchOpen(false);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
if (searchOpen) {
|
|
102
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
103
|
+
}
|
|
104
|
+
return () => {
|
|
105
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
106
|
+
};
|
|
107
|
+
}, [searchOpen]);
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
const handleEsc = (e) => {
|
|
110
|
+
if (e.key === 'Escape')
|
|
111
|
+
setSearchOpen(false);
|
|
112
|
+
};
|
|
113
|
+
document.addEventListener('keydown', handleEsc);
|
|
114
|
+
return () => document.removeEventListener('keydown', handleEsc);
|
|
115
|
+
}, []);
|
|
92
116
|
return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${hideNavbar ? 'navbar--hidden' : ''} ${className}`, children: _jsxs("div", { className: "navbar-container", 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", { style: { display: 'flex', flexDirection: 'row', gap: '10px', alignItems: 'center' }, children: [_jsxs("div", { className: "navbar-actions", children: [_jsx("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: _jsx("div", { className: "nav-items", children: items.map(item => {
|
|
93
117
|
const hasSubLinks = item.subLinks && item.subLinks.length > 0;
|
|
94
118
|
const linkPath = new URL(item.link || '#', 'https://dummybase').pathname;
|
|
@@ -111,10 +135,21 @@ export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo
|
|
|
111
135
|
}, children: _jsx("div", { className: 'navbar-services-item', children: _jsx("span", { style: {
|
|
112
136
|
textAlign: 'center'
|
|
113
137
|
}, children: product.name }) }) }, product.name))) }) })] }) }))] }, item.name));
|
|
114
|
-
}) }) }), isMobile && login && !logedinData && (_jsx("div", { className: 'navbar-item', style: { background: '#ffffff' }, children: _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" }) }))] }), _jsxs("div", { className: `navbar-right ${searchOpen ? 'search-active' : ''}`, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })), _jsxs("div", { className: `navbar-search-container ${searchOpen ? 'open' : ''}`, children: [_jsx("input", { type: "text", className: "navbar-search-input", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
|
|
138
|
+
}) }) }), isMobile && login && !logedinData && (_jsx("div", { className: 'navbar-item', style: { background: '#ffffff' }, children: _jsx("button", { className: "mobile-login-btn", onClick: toggleLogin, children: "Login" }) }))] }), _jsxs("div", { className: `navbar-right ${searchOpen ? 'search-active' : ''}`, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), !isMobile && login && !logedinData && (_jsx("span", { className: "login-btn", onClick: toggleLogin, children: "Login" })), _jsxs("div", { ref: searchContainerRef, className: `navbar-search-container ${searchOpen ? 'open' : ''}`, children: [_jsx("input", { type: "text", className: "navbar-search-input", placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), onKeyDown: (e) => {
|
|
115
139
|
if (e.key === 'Enter') {
|
|
116
140
|
handleSearch();
|
|
117
141
|
}
|
|
118
|
-
} }), _jsx("button", { className:
|
|
142
|
+
} }), _jsx("button", { className: `navbar-search-btn ${searchOpen && hasValue ? 'active' : ''}`, onClick: () => {
|
|
143
|
+
if (!searchOpen) {
|
|
144
|
+
setSearchOpen(true);
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
if (hasValue) {
|
|
148
|
+
handleSearch(); // trigger search
|
|
149
|
+
}
|
|
150
|
+
else {
|
|
151
|
+
setSearchOpen(false); // close if empty
|
|
152
|
+
}
|
|
153
|
+
}, children: searchOpen && hasValue ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "red", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })) : (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "red", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] })) })] })] })] })] }) }), 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 && !isClosing, 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("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 })] }) })) }))] }));
|
|
119
154
|
};
|
|
120
155
|
export default Navbar;
|