ml-ui-lib 1.0.19 → 1.0.21

package/dist/components/Footer/Footer.css

@@ -297,9 +297,9 @@
     text-align: center;
   }
 
-  .footer-column {
+  /* .footer-column {
     text-align: center;
-  }
+  } */
 
   .footer-bottom {
     flex-direction: column;

package/dist/components/Navbar/Navbar.css

@@ -20,7 +20,7 @@
 
 .navbar-links {
     display: flex;
-    gap: 1.5rem;
+    /* gap: 1.5rem; */
     transition: all 0.3s ease;
     margin-left: 35px;
 }
@@ -29,18 +29,24 @@
     text-decoration: none;
     color: #333;
     font-weight: 400;
-    font-size: 1rem;
+    font-size: 17px;
     transition: color 0.2s;
 }
 
 .navbar-links a:hover {
-    color: #ff0000;
+    transition: all 0.5s ease;
+    background: #ff0000;
+    color: #fff;
 }
 
 .navbar-links a.active {
     color: #ff0000;
 }
 
+.navbar-links a.active:hover {
+    color: #fff;
+}
+
 
 /* Burger Icon */
 .burger {
@@ -97,49 +103,79 @@
 
 }
 
+.mobile-login-btn {
+    display: none;
+}
+
 /* Responsive Menu */
 @media (max-width: 992px) {
+    .mobile-login-btn {
+        display: block;
+    }
+
+    .login-btn {
+        display: none !important;
+    }
+
     .burger {
         display: flex;
+        z-index: 10000;
     }
 
     .navbar-container {
         padding: 1rem 1.5rem;
+        justify-content: space-between;
+    }
+
+    /* ⭐ SLIDE-IN MENU */
+
+    .nav-items {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
     }
 
     .navbar-links {
-        position: absolute;
-        top: 65px;
-        right: 0;
+        position: fixed;
+        top: 0;
+        right: -100%;
+        height: 100vh;
+        width: 400px;
         background: #fff;
         flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-        max-height: 0;
-        overflow: hidden;
-        opacity: 0;
-        transition: all 0.3s ease;
-        padding: 0 2rem;
-        z-index: 100;
+        padding: 65px 0px 70px;
+        transition: right 0.3s ease-in-out;
+        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
+        z-index: 9999;
     }
 
     .navbar-links.open {
-        max-height: 460px;
-        opacity: 1;
-        padding: 1rem 2rem;
-        border-bottom: 1px solid #eee;
+        right: 0;
     }
 
     .navbar-links a {
-        padding: 0.75rem 0;
+        padding: 1rem 50px;
         width: 100%;
+        font-size: 1.2rem;
     }
 
-    .navbar-logo img {
-        height: 35px;
+    /* ⭐ MOBILE LOGIN FIXED AT BOTTOM */
+    .mobile-login-btn {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 1.3rem;
+        border: none;
+        /* background: #d00000; */
+        color: #333;
+        font-size: 1.1rem;
+        font-weight: 600;
+        /* text-align: center; */
     }
 }
 
+
 /* Login Button */
 .login-btn {
     color: #333;
@@ -207,4 +243,36 @@
         background: rgba(255, 0, 0, 1) !important;
         backdrop-filter: blur(3px);
     }
+
+    .navbar-links {
+        width: 100%;
+    }
+}
+
+/* Right-side group */
+.navbar-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #757575;
+    border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #4f4f4f;
 }

package/dist/components/Navbar/Navbar.js

@@ -22,18 +22,15 @@ export const Navbar = ({ siteUrl, items, logoSrc = '', logoAlt = 'M Lhuillier Lo
         document.body.style.overflow = '';
         onClose?.();
     };
-    return (_jsxs(_Fragment, { children: [_jsx("nav", { className: `navbar ${className}`, children: _jsxs("div", { className: "navbar-container", children: [_jsxs("div", { style: { display: 'flex', gap: '10px', alignItems: 'center' }, children: [_jsxs("button", { className: `burger ${menuOpen ? 'active' : ''}`, onClick: toggleMenu, "aria-label": "Toggle menu", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _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' } }) }) }), _jsx("div", { className: `navbar-links ${menuOpen ? 'open' : ''}`, children: items.map((item) => {
-                                        const linkPath = new URL(item.link, 'https://dummybase').pathname;
-                                        const isActive = currentPath === linkPath;
-                                        return (_jsx("a", { href: item.link, target: item.target || '_self', rel: item.target === '_blank' ? 'noopener noreferrer' : undefined, className: `navbar-link ${isActive ? 'active' : ''}`, onClick: () => setMenuOpen(false), children: item.name.includes('-')
-                                                ? item.name
-                                                    .split('-')
-                                                    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
-                                                    .join(' & ')
-                                                : item.name }, item.name));
-                                    }) })] }), login &&
-                            (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" }) })] }) })] })) })) : (
-                /* Mobile → Bottom sliding */
-                _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" }) })] }) })) }))] }));
+    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) => {
+                                                const linkPath = new URL(item.link, 'https://dummybase').pathname;
+                                                const isActive = currentPath === linkPath;
+                                                return (_jsx("a", { href: item.link, target: item.target || '_self', className: `navbar-link ${isActive ? 'active' : ''}`, onClick: () => setMenuOpen(false), children: item.name.includes('-')
+                                                        ? item.name
+                                                            .split('-')
+                                                            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                                                            .join(' & ')
+                                                        : item.name }, item.name));
+                                            }) }), _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" }) })] }) })) }))] }));
 };
 export default Navbar;

package/package.json

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