ml-ui-lib 1.0.41 → 1.0.43

package/dist/components/Navbar/Navbar.css

@@ -48,16 +48,74 @@
 /* Desktop dropdown bubble */
 .navbar-dropdown-content {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     position: relative;
-    top: 15px;
-    padding: 12px 45px 12px 20px;
+    top: 30px;
+    padding: 20px;
     background: #fff;
     border-radius: 22px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    justify-content: space-between;
+}
+
+.navbar-services {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+}
+
+.navbar-products {
+    gap: 30px;
+}
+
+.navbar-services-cols {
+    display: flex;
+    flex-direction: column;
+}
+
+.navbar-services a {
+    border-radius: 15px;
+    padding: 10px 30px;
+}
+
+.navbar-services a:hover {
+    background: linear-gradient(90deg, #b70404, #fe2424, red) 0 0 / 200% 100% !important;
+    color: #ffffff !important;
+}
+
+.navbar-services-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    background-color: #f5f5f5;
+    box-shadow: 0 1px 10px #00000017;
+    border-radius: 20px;
+    padding: 15px;
+    gap: 15px 40px;
+    align-items: center;
+    width: 350px;
+}
+
+.navbar-services-item {
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fa0000;
+    width: 140px;
+    height: 45px;
+    border-radius: 15px;
+    color: #ffffff;
 }
 
-.navbar-dropdown-content::before {
+.navbar-services-item:hover {
+    background: linear-gradient(90deg, #b70404, #fe2424, red) 0 0 / 200% 100%;
+}
+
+/* .navbar-dropdown-content::before {
     content: "";
     position: absolute;
     top: -8px;
@@ -67,11 +125,11 @@
     background: #fff;
     transform: rotate(45deg);
     box-shadow: -2px -3px 4px #0000000d
-}
+} */
 
 .navbar-dropdown {
     position: absolute;
-    top: 20px;
+    top: 45px;
     left: -35px;
     display: none;
     z-index: 10;
@@ -86,7 +144,9 @@
 }
 
 .navbar-dropdown-link:hover {
-    background: #f2f2f2;
+    background: #ff0000;
+    color: #ffffff;
+    border-radius: 15px;
 }
 
 /* Desktop hover */
@@ -95,6 +155,11 @@
     display: flex;
     /* keep it rendered */
     flex-direction: column;
+
+    position: fixed;
+    left: 0px;
+    width: 100%;
+
     opacity: 0;
     transform: translateY(-10px);
     pointer-events: none;
@@ -206,6 +271,28 @@
    Responsive
 ------------------------- */
 @media (max-width: 1100px) {
+
+    .navbar-dropdown-content {
+        flex-direction: column;
+    }
+
+    .navbar-services {
+        flex-direction: column;
+        gap: 0px;
+    }
+
+    .navbar-services a {
+        border-radius: 0px !important;
+    }
+
+    .navbar-services a:hover {
+        background: #ff0000 !important;
+    }
+
+    .navbar-products {
+        display: none;
+    }
+
     .navbar-container {
         /* margin: 0 20px; */
         padding: 1rem 1.5rem;

package/dist/components/Navbar/Navbar.d.ts

@@ -11,9 +11,16 @@ export interface NavbarItem {
     target?: '_blank' | '_self';
     subLinks?: NavbarSubItem[];
 }
+export interface NavbarProducts {
+    name: string;
+    link: string;
+    target?: '_blank' | '_self';
+    icons?: string;
+}
 export interface NavbarProps {
     siteUrl?: string;
     items: NavbarItem[];
+    products?: NavbarProducts[];
     logoSrc?: string;
     logoAlt?: string;
     logoWidth?: number | string;

package/dist/components/Navbar/Navbar.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import './Navbar.css';
 import { SlidingPanel } from '../SlidingPanel/SlidingPanel';
-export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
+export const Navbar = ({ siteUrl, items, products, logoSrc = '', logoAlt = 'Logo', logoWidth = 220, logoHeight = 40, className = '', login = false, logedinData = null, loginContent, otherContent, onClose, }) => {
     const [menuOpen, setMenuOpen] = useState(false);
     const [showLogin, setShowLogin] = useState(false);
     const [isClosing, setIsClosing] = useState(false);
@@ -84,17 +84,19 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'Logo', logoWid
                                                 const isActive = currentPath === linkPath;
                                                 const isDropdownOpen = openDropdown === item.name;
                                                 return (_jsxs("div", { className: `navbar-item ${hasSubLinks ? 'has-dropdown' : ''} ${isDropdownOpen ? 'open' : ''}`, children: [_jsx("a", { href: hasSubLinks ? '#' : item.link, target: item.target || '_self', className: `navbar-link ${isActive ? 'active' : ''} ${hasSubLinks ? 'parent-link' : ''}`, onClick: (e) => {
-                                                                if (hasSubLinks && isMobile) {
+                                                                if (hasSubLinks) {
                                                                     e.preventDefault();
                                                                     setOpenDropdown(prev => (prev === item.name ? null : item.name));
                                                                 }
                                                                 else {
                                                                     setMenuOpen(false);
                                                                 }
-                                                            }, children: item.name }), hasSubLinks && (_jsx("div", { className: "navbar-dropdown", children: _jsx("div", { className: "navbar-dropdown-content", children: item.subLinks.map(sub => (_jsx("a", { href: sub.link, target: sub.target || '_self', className: "navbar-dropdown-link", onClick: () => {
-                                                                        setMenuOpen(false);
-                                                                        setOpenDropdown(null);
-                                                                    }, children: sub.name }, sub.name))) }) }))] }, item.name));
+                                                            }, children: item.name }), hasSubLinks && (_jsx("div", { className: "navbar-dropdown", children: _jsxs("div", { className: "navbar-dropdown-content", children: [_jsx("div", { className: "navbar-services", children: Array.from({ length: Math.ceil(item.subLinks.length / 5) }, (_, i) => item.subLinks.slice(i * 5, i * 5 + 5)).map((column, index) => (_jsx("div", { className: 'navbar-services-cols', children: column.map(sub => (_jsx("a", { href: sub.link, target: sub.target || '_self', className: "navbar-dropdown-link", onClick: () => {
+                                                                                    setMenuOpen(false);
+                                                                                    setOpenDropdown(null);
+                                                                                }, children: sub.name }, sub.name))) }, index))) }), _jsx("div", { className: "navbar-products", children: _jsx("div", { className: 'navbar-services-container', children: products.map(product => (_jsx("div", { className: 'navbar-services-item', children: _jsx("span", { style: {
+                                                                                        textAlign: 'center'
+                                                                                    }, children: product.name }) }))) }) })] }) }))] }, item.name));
                                             }) }), 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", 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" }))] })] })] }) }), 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 })] }) })) }))] }));
 };
 export default Navbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-ui-lib",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",