uzairayed2/layoutflow-studio

1class CustomNavbar extends HTMLElement {2    connectedCallback() {3        this.attachShadow({ mode: 'open' });4        this.shadowRoot.innerHTML = `5            <style>6                :host {7                    display: block;8                    background: white;9                    border-bottom: 1px solid var(--border-color, #e2e8f0);10                    height: 64px;11                    padding: 0 24px;12                }13                14                .navbar {15                    display: flex;16                    align-items: center;17                    justify-content: space-between;18                    height: 100%;19                    max-width: 100%;20                }21                22                .brand {23                    display: flex;24                    align-items: center;25                    gap: 12px;26                    font-weight: 600;27                    font-size: 18px;28                    color: #1e293b;29                }30                31                .controls {32                    display: flex;33                    align-items: center;34                    gap: 16px;35                }36                37                .canvas-size-selector {38                    display: flex;39                    align-items: center;40                    gap: 8px;41                    background: #f8fafc;42                    padding: 6px 12px;43                    border-radius: 6px;44                    border: 1px solid #e2e8f0;45                }46                47                .export-btn {48                    background: #3b82f6;49                    color: white;50                    padding: 8px 16px;51                    border-radius: 6px;52                    border: none;53                    cursor: pointer;54                    display: flex;55                    align-items: center;56                    gap: 6px;57                    font-weight: 500;58                }59                60                .export-btn:hover {61                    background: #2563eb;62                }63                64                select {65                    border: none;66                    background: transparent;67                    outline: none;68                    font-size: 14px;69                }70            </style>71            72            <nav class="navbar">73                <div class="brand">74                    <i data-feather="layout"></i>75                    <span>LayoutFlow Studio</span>76                </div>77                78                <div class="controls">79                    <div class="canvas-size-selector">80                        <span>Canvas:</span>81                        <select id="canvasSize">82                            <option value="800x600">800×600</option>83                            <option value="1024x768">1024×768</option>84                            <option value="1280x720">1280×720</option>85                            <option value="1920x1080">1920×1080</option>86                            <option value="custom">Custom...</option>87                        </select>88                    </div>89                    90                    <button class="export-btn" id="exportBtn">91                        <i data-feather="download"></i>92                        Export93                    </button>94                </div>95            </nav>96        `;97        98        this.setupEventListeners();99    }100    101    setupEventListeners() {102        const canvasSizeSelect = this.shadowRoot.getElementById('canvasSize');103        const exportBtn = this.shadowRoot.getElementById('exportBtn');104        105        canvasSizeSelect.addEventListener('change', (e) => {106            const size = e.target.value;107            if (size !== 'custom') {108                const [width, height] = size.split('x').map(Number);109                this.dispatchEvent(new CustomEvent('canvasSizeChange', {110                    detail: { width, height }111                }));112            }113        });114        115        exportBtn.addEventListener('click', () => {116            this.dispatchEvent(new CustomEvent('exportRequest'));117        });118    }119}120 121customElements.define('custom-navbar', CustomNavbar);