components/sidebar.js

class AppSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                }
                .sidebar-item {
                    display: flex;
                    align-items: center;
                    padding: 6px 8px;
                    border-radius: 5px;
                    cursor: pointer;
                    color: #e4e6eb;
                    font-size: 13px;
                    font-family: 'Tahoma', sans-serif;
                    margin-bottom: 2px;
                    transition: background 0.2s;
                }
                .sidebar-item:hover {
                    background-color: #3a3b3c;
                }
                .sidebar-item i {
                    margin-right: 10px;
                    width: 16px;
                    height: 16px;
                }
                .sidebar-header {
                    color: #b0b3b8;
                    font-size: 12px;
                    font-weight: bold;
                    margin: 15px 0 5px 8px;
                    text-transform: uppercase;
                }
                .separator {
                    height: 1px;
                    background-color: #3e4042;
                    margin: 10px 8px;
                }
            </style>

            <div>
                <a href="#" class="sidebar-item">
                    <i data-feather="grid" width="16" height="16"></i>
                    <span>News Feed</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i data-feather="message-square" width="16" height="16"></i>
                    <span>Messages</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i data-feather="calendar" width="16" height="16"></i>
                    <span>Events</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i data-feather="image" width="16" height="16"></i>
                    <span>Photos</span>
                </a>
                
                <div class="separator"></div>
                
                <div class="sidebar-header">Apps</div>
                <a href="#" class="sidebar-item">
                    <i data-feather="smile" width="16" height="16"></i>
                    <span>Pokes</span>
                </a>
                <a href="#" class="sidebar-item">
                    <i data-feather="gift" width="16" height="16"></i>
                    <span>Birthdays</span>
                </a>
            </div>
        `;
        if (window.feather) {
            feather.replace();
        }
    }
}
customElements.define('app-sidebar', AppSidebar);