feat(dees-mobilenavigation): update to use zindex registry and shadcn-like design
- Replace old zIndexLayers with new zIndexRegistry system - Update design to match shadcn aesthetic with clean borders and shadows - Add support for icons in menu items using Lucide icons - Improve animations with staggered item appearance - Better typography using Geist font family - Add divider support for menu item grouping - Improve hover and active states - Add custom scrollbar styling - Create comprehensive demo showcasing all features - Ensure proper cleanup in disconnectedCallback
This commit is contained in:
Juergen Kunz
@ -1,5 +1,6 @@
|
||||
import * as plugins from './00plugins.js';
|
||||
import { zIndexLayers } from './00zindex.js';
|
||||
import { zIndexRegistry } from './00zindex.js';
|
||||
import { cssGeistFontFamily } from './00fonts.js';
|
||||
import {
|
||||
cssManager,
|
||||
css,
|
||||
@ -9,8 +10,10 @@ import {
|
||||
domtools,
|
||||
html,
|
||||
property,
|
||||
state,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesWindowLayer } from './dees-windowlayer.js';
|
||||
import './dees-icon.js';
|
||||
|
||||
@customElement('dees-mobilenavigation')
|
||||
export class DeesMobilenavigation extends DeesElement {
|
||||
@ -19,14 +22,48 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
<dees-button @click=${() => {
|
||||
DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'Test',
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layout-dashboard',
|
||||
action: async (deesMobileNav) => {
|
||||
alert('test');
|
||||
console.log('Navigate to dashboard');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Profile',
|
||||
iconName: 'lucide:user',
|
||||
action: async (deesMobileNav) => {
|
||||
console.log('Navigate to profile');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
action: async (deesMobileNav) => {
|
||||
console.log('Navigate to settings');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{ divider: true } as any,
|
||||
{
|
||||
name: 'Help',
|
||||
iconName: 'lucide:help-circle',
|
||||
action: async (deesMobileNav) => {
|
||||
console.log('Show help');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Sign Out',
|
||||
iconName: 'lucide:log-out',
|
||||
action: async (deesMobileNav) => {
|
||||
console.log('Sign out');
|
||||
return null;
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}></dees-button>
|
||||
}}>Open Mobile Navigation</dees-button>
|
||||
`;
|
||||
|
||||
private static singletonRef: DeesMobilenavigation;
|
||||
@ -44,15 +81,18 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
type: Array,
|
||||
type: String,
|
||||
})
|
||||
public heading: string = `MENU`;
|
||||
public heading: string = `Menu`;
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
|
||||
|
||||
@state()
|
||||
private mobileNavZIndex: number = 1000;
|
||||
|
||||
readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
|
||||
|
||||
constructor() {
|
||||
@ -74,25 +114,32 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
font-family: ${cssGeistFontFamily};
|
||||
}
|
||||
|
||||
.main {
|
||||
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
will-change: transform;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
min-width: 280px;
|
||||
transform: translateX(200px);
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
z-index: ${zIndexLayers.fixed.mobileNav};
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
transform: translateX(100%);
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
z-index: var(--z-index);
|
||||
opacity: 0;
|
||||
padding: 16px 32px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
border-left: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
pointer-events: none;
|
||||
box-shadow: ${cssManager.bdTheme(
|
||||
'-20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
'-20px 0 25px -5px rgba(0, 0, 0, 0.3), -10px 0 10px -5px rgba(0, 0, 0, 0.2)'
|
||||
)};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main.show {
|
||||
@ -101,47 +148,151 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
margin-left: -8px;
|
||||
margin-right: -8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.menuItem:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#333')};;
|
||||
.header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
}
|
||||
|
||||
.heading {
|
||||
text-align: left;
|
||||
font-size: 24px;
|
||||
padding: 8px 0px;
|
||||
font-family: 'Geist Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
border-bottom: 1px dashed #444;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.menuItem:active {
|
||||
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.menuItem dees-icon {
|
||||
flex-shrink: 0;
|
||||
color: ${cssManager.bdTheme('#71717a', '#71717a')};
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.menuItem:hover dees-icon {
|
||||
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||||
}
|
||||
|
||||
.menuItem-text {
|
||||
flex: 1;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.menuItem-divider {
|
||||
height: 1px;
|
||||
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 400px) {
|
||||
.main {
|
||||
max-width: 100vw;
|
||||
width: 85vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for menu items */
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.main.show .menuItem {
|
||||
animation: slideInRight 0.3s ease-out forwards;
|
||||
animation-delay: calc(var(--item-index, 0) * 0.05s);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.menu-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.menu-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menu-container::-webkit-scrollbar-thumb {
|
||||
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.menu-container::-webkit-scrollbar-thumb:hover {
|
||||
background: ${cssManager.bdTheme('#d1d5db', '#52525b')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<style>
|
||||
.main {
|
||||
--z-index: ${this.mobileNavZIndex};
|
||||
}
|
||||
</style>
|
||||
<div class="main">
|
||||
<div class="heading">${this.heading}</div>
|
||||
${this.menuItems.map((menuItem) => {
|
||||
return html`
|
||||
<div
|
||||
class="menuItem"
|
||||
@click="${() => {
|
||||
this.hide();
|
||||
menuItem.action(this);
|
||||
}}"
|
||||
>
|
||||
${menuItem.name}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
<div class="header">
|
||||
<h2 class="heading">${this.heading}</h2>
|
||||
</div>
|
||||
<div class="menu-container">
|
||||
${this.menuItems.map((menuItem, index) => {
|
||||
if ('divider' in menuItem && menuItem.divider) {
|
||||
return html`<div class="menuItem-divider"></div>`;
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
class="menuItem"
|
||||
style="--item-index: ${index}"
|
||||
@click="${() => {
|
||||
this.hide();
|
||||
menuItem.action(this);
|
||||
}}"
|
||||
>
|
||||
${menuItem.iconName ? html`
|
||||
<dees-icon .icon=${menuItem.iconName} size="20"></dees-icon>
|
||||
` : ''}
|
||||
<span class="menuItem-text">${menuItem.name}</span>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -154,18 +305,25 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
public async show() {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const main = this.shadowRoot.querySelector('.main');
|
||||
|
||||
// Create window layer first (it will get its own z-index)
|
||||
if (!this.windowLayer) {
|
||||
this.windowLayer = new DeesWindowLayer();
|
||||
this.windowLayer.options.blur = true;
|
||||
this.windowLayer = await DeesWindowLayer.createAndShow({
|
||||
blur: true,
|
||||
});
|
||||
this.windowLayer.addEventListener('click', () => {
|
||||
this.hide();
|
||||
});
|
||||
} else {
|
||||
document.body.append(this.windowLayer);
|
||||
await this.windowLayer.show();
|
||||
}
|
||||
document.body.append(this.windowLayer);
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
this.windowLayer.show();
|
||||
|
||||
// Get z-index for mobile nav (will be above window layer)
|
||||
this.mobileNavZIndex = zIndexRegistry.getNextZIndex();
|
||||
zIndexRegistry.register(this, this.mobileNavZIndex);
|
||||
|
||||
await domtools.convenience.smartdelay.delayFor(0);
|
||||
await domtools.convenience.smartdelay.delayFor(10);
|
||||
main.classList.add('show');
|
||||
}
|
||||
|
||||
@ -176,10 +334,23 @@ export class DeesMobilenavigation extends DeesElement {
|
||||
const domtools = await this.domtoolsPromise;
|
||||
const main = this.shadowRoot.querySelector('.main');
|
||||
main.classList.remove('show');
|
||||
this.windowLayer.hide();
|
||||
|
||||
// Unregister from z-index registry
|
||||
zIndexRegistry.unregister(this);
|
||||
|
||||
if (this.windowLayer) {
|
||||
await this.windowLayer.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
document.body.removeChild(this.windowLayer);
|
||||
super.disconnectedCallback();
|
||||
|
||||
// Cleanup
|
||||
zIndexRegistry.unregister(this);
|
||||
|
||||
if (this.windowLayer) {
|
||||
await this.windowLayer.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user