new file mode 100644

@@ -0,0 +1,37 @@

+import { LitElement, html, css, svg } from 'lit';

+

+export class WinzerNav extends LitElement {

+    static properties = {

+        activeTab: { type: String },

+        items: { type: Array } // [{ id: 'news', label: 'News', icon: '...', url: '/news' }]

+    };

+

+    static styles = css`

+        :host { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-white); border-top: 1px solid var(--border-color); padding-bottom: env(safe-area-inset-bottom); z-index: 100; }

+        .nav-bar { display: flex; justify-content: space-around; padding: 10px 0; }

+        .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: var(--text-main); cursor: pointer; width: 80px; text-decoration: none; }

+        .nav-item.active { color: var(--primary-color); }

+        .nav-item svg { width: 24px; height: 24px; margin-bottom: 4px; fill: none; stroke: currentColor; stroke-width: 2; }

+    `;

+

+    constructor() {

+        super();

+        this.items = [];

+    }

+

+    render() {

+        if (!this.items || this.items.length === 0) return html``;

+

+        return html`

+            <div class="nav-bar">

+                ${this.items.map(item => html`

+                    <a href="${item.url || '#'}" class="nav-item ${this.activeTab === item.id ? 'active' : ''}">

+                        ${item.icon}

+                        <span>${item.label}</span>

+                    </a>

+                `)}

+            </div>

+        `;

+    }

+}

+customElements.define('winzer-nav', WinzerNav);