@lukso/web-components 1.122.0 → 1.123.0

package/dist/components/index.cjs

@@ -15,7 +15,7 @@ const components_luksoInput_index = require('./lukso-input/index.cjs');
 const components_luksoModal_index = require('./lukso-modal/index.cjs');
 const components_luksoNavbar_index = require('./lukso-navbar/index.cjs');
 const components_luksoPagination_index = require('./lukso-pagination/index.cjs');
-const components_luksoProfile_index = require('../index-abf2590d.cjs');
+const components_luksoProfile_index = require('../index-bb676cb5.cjs');
 const components_luksoProgress_index = require('./lukso-progress/index.cjs');
 const components_luksoSanitize_index = require('./lukso-sanitize/index.cjs');
 const components_luksoSearch_index = require('./lukso-search/index.cjs');
@@ -29,15 +29,15 @@ const components_luksoTextarea_index = require('./lukso-textarea/index.cjs');
 const components_luksoTooltip_index = require('./lukso-tooltip/index.cjs');
 const components_luksoUsername_index = require('./lukso-username/index.cjs');
 const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
-const shared_tailwindElement_index = require('../index-e17ecbf3.cjs');
+const shared_tailwindElement_index = require('../index-ca99e342.cjs');
 require('../cn-b6daa995.cjs');
-require('../property-80b4df33.cjs');
-require('../state-8f04f0af.cjs');
+require('../property-f10f7163.cjs');
+require('../state-6dddbcbd.cjs');
 require('../index-2b104ecb.cjs');
 require('../tailwind-config.cjs');
-require('../style-map-68da71db.cjs');
+require('../style-map-1130c5e0.cjs');
 require('../directive-8278ab14.cjs');
-require('../index-52e2fafd.cjs');
+require('../index-fd7f09d4.cjs');
 require('../index-e9668573.cjs');
 require('../uniq-id-f0b18085.cjs');
 

package/dist/components/index.js

@@ -11,7 +11,7 @@ export { LuksoInput } from './lukso-input/index.js';
 export { LuksoModal } from './lukso-modal/index.js';
 export { LuksoNavbar } from './lukso-navbar/index.js';
 export { LuksoPagination } from './lukso-pagination/index.js';
-export { L as LuksoProfile } from '../index-ec5cffa4.js';
+export { L as LuksoProfile } from '../index-e44e6faf.js';
 export { LuksoProgress } from './lukso-progress/index.js';
 export { LuksoSanitize } from './lukso-sanitize/index.js';
 export { LuksoSearch } from './lukso-search/index.js';
@@ -25,14 +25,14 @@ export { LuksoTextarea } from './lukso-textarea/index.js';
 export { LuksoTooltip } from './lukso-tooltip/index.js';
 export { LuksoUsername } from './lukso-username/index.js';
 export { LuksoWizard } from './lukso-wizard/index.js';
-export { a as TailwindElement, T as TailwindStyledElement } from '../index-db8c2781.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../index-819e6db0.js';
 import '../cn-90c03edf.js';
-import '../property-81c75dec.js';
-import '../state-ebd3d73f.js';
+import '../property-1b4d50de.js';
+import '../state-e7095e2c.js';
 import '../index-d14b6a34.js';
 import '../tailwind-config.js';
-import '../style-map-d9a53ff6.js';
+import '../style-map-5ffa8c2d.js';
 import '../directive-2bb7789e.js';
-import '../index-d643c9c3.js';
+import '../index-0d3b9b40.js';
 import '../index-5e194caf.js';
 import '../uniq-id-ce2d165c.js';

package/dist/components/lukso-button/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
@@ -87,12 +87,12 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
           hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
         },
         size: {
-          medium: "h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12",
-          small: "h-[28px] px-3 paragraph-inter-12-medium rounded-8"
+          medium: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
+          small: "h-7 px-3 paragraph-inter-12-medium rounded-8"
         },
         isLongPress: {
           true: `relative overflow-hidden z-[1] active:outline-0
-          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
+          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-12
           before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0`
         },
         isFullWidth: {
@@ -145,12 +145,12 @@ exports.LuksoButton = class LuksoButton extends shared_tailwindElement_index.Tai
         {
           isIcon: true,
           size: ["medium"],
-          class: "px-3"
+          class: "px-0 w-12"
         },
         {
           isIcon: true,
           size: ["small"],
-          class: "px-[1px]"
+          class: "px-0 w-7"
         }
       ]
     });

package/dist/components/lukso-button/index.js

@@ -1,6 +1,6 @@
-import { T as TailwindStyledElement, x, E } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
+import { T as TailwindStyledElement, x, E } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
@@ -83,12 +83,12 @@ let LuksoButton = class extends TailwindStyledElement(style) {
           hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
         },
         size: {
-          medium: "h-[48px] px-6 paragraph-inter-16-semi-bold rounded-12",
-          small: "h-[28px] px-3 paragraph-inter-12-medium rounded-8"
+          medium: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
+          small: "h-7 px-3 paragraph-inter-12-medium rounded-8"
         },
         isLongPress: {
           true: `relative overflow-hidden z-[1] active:outline-0
-          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-[48px]
+          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-12
           before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0`
         },
         isFullWidth: {
@@ -141,12 +141,12 @@ let LuksoButton = class extends TailwindStyledElement(style) {
         {
           isIcon: true,
           size: ["medium"],
-          class: "px-3"
+          class: "px-0 w-12"
         },
         {
           isIcon: true,
           size: ["small"],
-          class: "px-[1px]"
+          class: "px-0 w-7"
         }
       ]
     });

package/dist/components/lukso-card/index.cjs

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const components_luksoProfile_index = require('../../index-abf2590d.cjs');
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
-const styleMap = require('../../style-map-68da71db.cjs');
+const components_luksoProfile_index = require('../../index-bb676cb5.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
+const styleMap = require('../../style-map-1130c5e0.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
-const index$1 = require('../../index-52e2fafd.cjs');
+const index$1 = require('../../index-fd7f09d4.cjs');
 require('../lukso-image/index.cjs');
 require('../../directive-8278ab14.cjs');
 

package/dist/components/lukso-card/index.js

@@ -1,12 +1,12 @@
-import { m as makeBlockie } from '../../index-ec5cffa4.js';
-import { T as TailwindStyledElement, x, E } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
-import { o as o$1 } from '../../style-map-d9a53ff6.js';
+import { m as makeBlockie } from '../../index-e44e6faf.js';
+import { T as TailwindStyledElement, x, E } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
+import { o as o$1 } from '../../style-map-5ffa8c2d.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
-import { c as customStyleMap } from '../../index-d643c9c3.js';
+import { c as customStyleMap } from '../../index-0d3b9b40.js';
 import '../lukso-image/index.js';
 import '../../directive-2bb7789e.js';
 

package/dist/components/lukso-checkbox/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
 const index = require('../../index-e9668573.cjs');
 require('../../directive-8278ab14.cjs');
 

package/dist/components/lukso-checkbox/index.js

@@ -1,6 +1,6 @@
-import { a as TailwindElement, x, E } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
+import { a as TailwindElement, x, E } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
 import { c as customClassMap } from '../../index-5e194caf.js';
 import '../../directive-2bb7789e.js';
 

package/dist/components/lukso-color-picker/index.cjs

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
 const index = require('../../index-2b104ecb.cjs');
-const styleMap = require('../../style-map-68da71db.cjs');
+const styleMap = require('../../style-map-1130c5e0.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../lukso-icon/index.cjs');

package/dist/components/lukso-color-picker/index.js

@@ -1,8 +1,8 @@
-import { T as TailwindStyledElement, x, E } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
+import { T as TailwindStyledElement, x, E } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
 import { c as ce } from '../../index-d14b6a34.js';
-import { o } from '../../style-map-d9a53ff6.js';
+import { o } from '../../style-map-5ffa8c2d.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../lukso-icon/index.js';

package/dist/components/lukso-dropdown/index.cjs

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
-require('../../index-abf2590d.cjs');
+require('../../index-bb676cb5.cjs');
 require('../lukso-username/index.cjs');
 const uniqId = require('../../uniq-id-f0b18085.cjs');
-require('../../style-map-68da71db.cjs');
+require('../../style-map-1130c5e0.cjs');
 require('../../directive-8278ab14.cjs');
 require('../lukso-image/index.cjs');
-require('../../state-8f04f0af.cjs');
-require('../../index-52e2fafd.cjs');
+require('../../state-6dddbcbd.cjs');
+require('../../index-fd7f09d4.cjs');
 require('../../tailwind-config.cjs');
 require('../../cn-b6daa995.cjs');
 

package/dist/components/lukso-dropdown/index.js

@@ -1,15 +1,15 @@
-import { T as TailwindStyledElement, E, x } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
+import { T as TailwindStyledElement, E, x } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../lukso-icon/index.js';
-import '../../index-ec5cffa4.js';
+import '../../index-e44e6faf.js';
 import '../lukso-username/index.js';
 import { u as uniqId } from '../../uniq-id-ce2d165c.js';
-import '../../style-map-d9a53ff6.js';
+import '../../style-map-5ffa8c2d.js';
 import '../../directive-2bb7789e.js';
 import '../lukso-image/index.js';
-import '../../state-ebd3d73f.js';
-import '../../index-d643c9c3.js';
+import '../../state-e7095e2c.js';
+import '../../index-0d3b9b40.js';
 import '../../tailwind-config.js';
 import '../../cn-90c03edf.js';
 

package/dist/components/lukso-dropdown-option/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
 const index = require('../../index-2b104ecb.cjs');
 
 const style = ":host {\n    display: block\n}";

package/dist/components/lukso-dropdown-option/index.js

@@ -1,5 +1,5 @@
-import { T as TailwindStyledElement, x } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
+import { T as TailwindStyledElement, x } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
 import { c as ce } from '../../index-d14b6a34.js';
 
 const style = ":host {\n    display: block\n}";

package/dist/components/lukso-footer/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-footer/index.js

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
+import { a as TailwindElement, x } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/components/lukso-icon/index.cjs

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const styleMap = require('../../style-map-68da71db.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const styleMap = require('../../style-map-1130c5e0.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-icon/index.js

@@ -1,6 +1,6 @@
-import { x, T as TailwindStyledElement } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { o } from '../../style-map-d9a53ff6.js';
+import { x, T as TailwindStyledElement } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { o } from '../../style-map-5ffa8c2d.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n    display: inline-flex\n}";

package/dist/components/lukso-image/index.cjs

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
-const styleMap = require('../../style-map-68da71db.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
+const styleMap = require('../../style-map-1130c5e0.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../directive-8278ab14.cjs');
 

package/dist/components/lukso-image/index.js

@@ -1,7 +1,7 @@
-import { a as TailwindElement, x } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
-import { o } from '../../style-map-d9a53ff6.js';
+import { a as TailwindElement, x } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
+import { o } from '../../style-map-5ffa8c2d.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../directive-2bb7789e.js';
 

package/dist/components/lukso-input/index.cjs

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../../tailwind-config.cjs');
 const cn = require('../../cn-b6daa995.cjs');
 require('../lukso-icon/index.cjs');
-require('../../style-map-68da71db.cjs');
+require('../../style-map-1130c5e0.cjs');
 require('../../directive-8278ab14.cjs');
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";

package/dist/components/lukso-input/index.js

@@ -1,11 +1,11 @@
-import { T as TailwindStyledElement, x, E } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
-import { r } from '../../state-ebd3d73f.js';
+import { T as TailwindStyledElement, x, E } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
+import { r } from '../../state-e7095e2c.js';
 import { c as ce } from '../../index-d14b6a34.js';
 import '../../tailwind-config.js';
 import { c as cn } from '../../cn-90c03edf.js';
 import '../lukso-icon/index.js';
-import '../../style-map-d9a53ff6.js';
+import '../../style-map-5ffa8c2d.js';
 import '../../directive-2bb7789e.js';
 
 const style = ":host {\n\n    display: inline-flex\n}\n\n:host([is-full-width]) {\n\n    display: flex;\n\n    width: 100%\n}";

package/dist/components/lukso-modal/index.cjs

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
 const index = require('../../index-2b104ecb.cjs');
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-modal/index.js

@@ -1,5 +1,5 @@
-import { a as TailwindElement, x } from '../../index-db8c2781.js';
-import { n, t } from '../../property-81c75dec.js';
+import { a as TailwindElement, x } from '../../index-819e6db0.js';
+import { n, t } from '../../property-1b4d50de.js';
 import { c as ce } from '../../index-d14b6a34.js';
 
 var __defProp = Object.defineProperty;

package/dist/components/lukso-navbar/index.cjs

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-e17ecbf3.cjs');
-const property = require('../../property-80b4df33.cjs');
-const state = require('../../state-8f04f0af.cjs');
+const shared_tailwindElement_index = require('../../index-ca99e342.cjs');
+const property = require('../../property-f10f7163.cjs');
+const state = require('../../state-6dddbcbd.cjs');
 const index = require('../../index-2b104ecb.cjs');
 require('../lukso-icon/index.cjs');
 require('../lukso-tag/index.cjs');
-require('../../style-map-68da71db.cjs');
+require('../../style-map-1130c5e0.cjs');
 require('../../directive-8278ab14.cjs');
-require('../../index-52e2fafd.cjs');
+require('../../index-fd7f09d4.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -33,6 +33,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     this.isTestnet = false;
     this.icon = "";
     this.hasMenu = false;
+    this.hasMobileDropdownMenu = false;
     this.logoUrl = "";
     this.mobileBreakpoint = "md";
     this.isMenuOpen = false;
@@ -150,28 +151,64 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
   }
   desktopCenterTemplate(styles) {
     return shared_tailwindElement_index.x`<div class=${styles.desktopCenterWrapper()}>
-      <slot name="desktop-center"></slot>
-    </div>`;
+        <slot name="desktop-center"></slot>
+      </div>
+      <div class="sm:hidden"></div>`;
   }
   mobileMenuTemplate(styles) {
-    return shared_tailwindElement_index.x`<div></div>
-      <div class=${styles.mobileMenuWrapper()}>
-        <div class="flex">
-          <slot name="mobile-icons"></slot>
-        </div>
-        <div
-          class="flex items-center justify-center w-8 h-8 cursor-pointer"
-          @click=${this.handleMenuToggle}
-        >
-          <div class=${styles.mobileMenuTrigger()}></div>
-        </div>
-        <div
-          class=${styles.mobileMenuDropdown()}
-          @click=${this.handleMenuToggle}
-        >
-          <slot name="mobile-menu"></slot>
+    return shared_tailwindElement_index.x`<div class=${styles.mobileMenuWrapper()}>
+      <slot name="mobile-menu"></slot>
+
+      ${this.hasMobileDropdownMenu ? shared_tailwindElement_index.x` <div
+              class="flex items-center justify-center w-8 h-8 cursor-pointer"
+              @click=${this.handleMenuToggle}
+            >
+              <div class=${styles.mobileMenuTrigger()}></div>
+            </div>
+            <div
+              class=${styles.mobileMenuDropdown()}
+              @click=${this.handleMenuToggle}
+            >
+              <slot name="mobile-dropdown"></slot>
+            </div>` : shared_tailwindElement_index.E}
+    </div>`;
+  }
+  brandTemplate() {
+    return shared_tailwindElement_index.x`
+      <div class="flex items-center px-6 md:px-10 h-[inherit]">
+        <div class="flex cursor-pointer group" @click=${this.handleBrandClick}>
+          <img
+            src="${this.logoUrl || this.defaultLogoUrl}"
+            class="mr-2 h-[26px]"
+            alt="${this.title}"
+          />
+          <div
+            class="text-purple-51 nav-apax-14-medium-uppercase
+                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
+          >
+            <span>${this.title}</span>
+          </div>
+          ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
+                TESTNET
+              </lukso-tag>` : shared_tailwindElement_index.E}
         </div>
-      </div>`;
+        ${this.icon ? shared_tailwindElement_index.x`<div
+              class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
+            >
+              <lukso-icon
+                class="transition cursor-pointer hover:scale-105"
+                name="${this.icon}"
+                color="purple-51"
+                @click=${this.handleIconClick}
+              ></lukso-icon>
+            </div>` : shared_tailwindElement_index.E}
+      </div>
+    `;
+  }
+  menuTemplate(styles) {
+    return shared_tailwindElement_index.x`<div class="flex items-center justify-end">
+      ${this.desktopMenuTemplate(styles)} ${this.mobileMenuTemplate(styles)}
+    </div>`;
   }
   render() {
     const styles = this.styles({
@@ -183,40 +220,9 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
     });
     return shared_tailwindElement_index.x`
       <nav data-testid="navbar" class=${styles.wrapper()}>
-        <div class="flex items-center px-10 h-[inherit]">
-          <div
-            class="flex cursor-pointer group"
-            @click=${this.handleBrandClick}
-          >
-            <img
-              src="${this.logoUrl || this.defaultLogoUrl}"
-              class="mr-2 h-[26px]"
-              alt="${this.title}"
-            />
-            <div
-              class="text-purple-51 nav-apax-14-medium-uppercase
-                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
-            >
-              <span>${this.title}</span>
-            </div>
-            ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
-                  TESTNET
-                </lukso-tag>` : shared_tailwindElement_index.E}
-          </div>
-          ${this.icon ? shared_tailwindElement_index.x`<div
-                class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
-              >
-                <lukso-icon
-                  class="transition cursor-pointer hover:scale-105"
-                  name="${this.icon}"
-                  color="purple-51"
-                  @click=${this.handleIconClick}
-                ></lukso-icon>
-              </div>` : shared_tailwindElement_index.E}
-        </div>
+        ${this.brandTemplate()}
         ${this.isCenter ? shared_tailwindElement_index.E : this.desktopCenterTemplate(styles)}
-        ${this.isCenter ? shared_tailwindElement_index.E : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate(styles)}
-            ${this.mobileMenuTemplate(styles)}` : shared_tailwindElement_index.E}
+        ${this.isCenter ? shared_tailwindElement_index.E : this.hasMenu ? this.menuTemplate(styles) : shared_tailwindElement_index.E}
       </nav>
     `;
   }
@@ -242,6 +248,9 @@ __decorateClass([
 __decorateClass([
   property.n({ type: Boolean, attribute: "has-menu" })
 ], exports.LuksoNavbar.prototype, "hasMenu", 2);
+__decorateClass([
+  property.n({ type: Boolean, attribute: "has-mobile-dropdown-menu" })
+], exports.LuksoNavbar.prototype, "hasMobileDropdownMenu", 2);
 __decorateClass([
   property.n({ type: String, attribute: "logo-url" })
 ], exports.LuksoNavbar.prototype, "logoUrl", 2);