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
215
ts_web/elements/dees-mobilenavigation.demo.ts
Normal file
215
ts_web/elements/dees-mobilenavigation.demo.ts
Normal file
@ -0,0 +1,215 @@
|
||||
import { html, css } from '@design.estate/dees-element';
|
||||
import './dees-button.js';
|
||||
import './dees-panel.js';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-panel .title=${'Mobile Navigation'} .subtitle=${'Shadcn-style slide-in navigation menu with icons'}>
|
||||
<div class="demo-buttons">
|
||||
<dees-button
|
||||
@click=${async () => {
|
||||
const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
|
||||
DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layout-dashboard',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to dashboard');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Profile',
|
||||
iconName: 'lucide:user',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to profile');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Messages',
|
||||
iconName: 'lucide:mail',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to messages');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to settings');
|
||||
},
|
||||
},
|
||||
{ divider: true } as any,
|
||||
{
|
||||
name: 'Help & Support',
|
||||
iconName: 'lucide:help-circle',
|
||||
action: async (nav) => {
|
||||
console.log('Show help');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Sign Out',
|
||||
iconName: 'lucide:log-out',
|
||||
action: async (nav) => {
|
||||
console.log('Sign out');
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Open Navigation Menu
|
||||
</dees-button>
|
||||
|
||||
<dees-button
|
||||
type="secondary"
|
||||
@click=${async () => {
|
||||
const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
|
||||
const nav = await DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'New Document',
|
||||
iconName: 'lucide:file-plus',
|
||||
action: async () => console.log('New document'),
|
||||
},
|
||||
{
|
||||
name: 'Upload File',
|
||||
iconName: 'lucide:upload',
|
||||
action: async () => console.log('Upload file'),
|
||||
},
|
||||
{
|
||||
name: 'Download',
|
||||
iconName: 'lucide:download',
|
||||
action: async () => console.log('Download'),
|
||||
},
|
||||
{ divider: true } as any,
|
||||
{
|
||||
name: 'Share',
|
||||
iconName: 'lucide:share-2',
|
||||
action: async () => console.log('Share'),
|
||||
},
|
||||
{
|
||||
name: 'Export',
|
||||
iconName: 'lucide:export',
|
||||
action: async () => console.log('Export'),
|
||||
},
|
||||
]);
|
||||
nav.heading = 'File Actions';
|
||||
}}
|
||||
>
|
||||
File Actions Menu
|
||||
</dees-button>
|
||||
|
||||
<dees-button
|
||||
type="outline"
|
||||
@click=${async () => {
|
||||
const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
|
||||
const nav = await DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'Cut',
|
||||
iconName: 'lucide:scissors',
|
||||
action: async () => console.log('Cut'),
|
||||
},
|
||||
{
|
||||
name: 'Copy',
|
||||
iconName: 'lucide:copy',
|
||||
action: async () => console.log('Copy'),
|
||||
},
|
||||
{
|
||||
name: 'Paste',
|
||||
iconName: 'lucide:clipboard',
|
||||
action: async () => console.log('Paste'),
|
||||
},
|
||||
{ divider: true } as any,
|
||||
{
|
||||
name: 'Select All',
|
||||
iconName: 'lucide:square-check',
|
||||
action: async () => console.log('Select all'),
|
||||
},
|
||||
{
|
||||
name: 'Find',
|
||||
iconName: 'lucide:search',
|
||||
action: async () => console.log('Find'),
|
||||
},
|
||||
{
|
||||
name: 'Replace',
|
||||
iconName: 'lucide:replace',
|
||||
action: async () => console.log('Replace'),
|
||||
},
|
||||
]);
|
||||
nav.heading = 'Edit';
|
||||
}}
|
||||
>
|
||||
Edit Menu
|
||||
</dees-button>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Features'} .subtitle=${'Modern shadcn-inspired mobile navigation'}>
|
||||
<div style="padding: 16px;">
|
||||
<ul style="margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<li>Smooth slide-in animation from the right</li>
|
||||
<li>Z-index registry integration for proper stacking</li>
|
||||
<li>Backdrop blur with window layer</li>
|
||||
<li>Support for icons using Lucide icons</li>
|
||||
<li>Menu item dividers for grouping</li>
|
||||
<li>Staggered animation for menu items</li>
|
||||
<li>Responsive design that adapts to mobile screens</li>
|
||||
<li>Clean, modern shadcn-style aesthetics</li>
|
||||
<li>Dark/light theme support</li>
|
||||
<li>Singleton pattern ensures only one instance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Code Example'} .subtitle=${'How to use the mobile navigation'}>
|
||||
<div style="padding: 16px; background: var(--background-secondary); border-radius: 8px;">
|
||||
<pre style="margin: 0; font-family: monospace; font-size: 13px; line-height: 1.6;"><code>import { DeesMobilenavigation } from '@design.estate/dees-catalog';
|
||||
|
||||
DeesMobilenavigation.createAndShow([
|
||||
{
|
||||
name: 'Dashboard',
|
||||
iconName: 'lucide:layout-dashboard',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to dashboard');
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Settings',
|
||||
iconName: 'lucide:settings',
|
||||
action: async (nav) => {
|
||||
console.log('Navigate to settings');
|
||||
},
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
name: 'Sign Out',
|
||||
iconName: 'lucide:log-out',
|
||||
action: async (nav) => {
|
||||
console.log('Sign out');
|
||||
},
|
||||
},
|
||||
]);</code></pre>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
@ -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