components/sidebar.js

class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar {
                    width: 240px;
                    flex-shrink: 0;
                }
                .filter-item {
                    padding: 10px 16px;
                    border-radius: 8px;
                    transition: all 0.2s;
                }
                .filter-item:hover {
                    background-color: #f3f4f6;
                }
                .filter-item.active {
                    background-color: #e0e7ff;
                    color: #4f46e5;
                    font-weight: 500;
                }
                .filter-count {
                    background-color: #e0e7ff;
                    color: #4f46e5;
                }
                @media (max-width: 768px) {
                    .sidebar {
                        display: none;
                    }
                }
            </style>
            <div class="sidebar hidden md:block">
                <div class="space-y-1">
                    <a href="#" class="filter-item flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i data-feather="inbox"></i>
                            <span>All Questions</span>
                        </div>
                        <span class="text-sm text-gray-500">42</span>
                    </a>
                    <a href="#" class="filter-item flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i data-feather="help-circle"></i>
                            <span>Unanswered</span>
                        </div>
                        <span class="text-sm text-gray-500">25</span>
                    </a>
<a href="#" class="filter-item active flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i data-feather="user"></i>
                            <span>My Posts</span>
                        </div>
                        <span class="filter-count text-xs px-2 py-1 rounded-full">5</span>
</a>
                    <a href="#" class="filter-item flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i data-feather="clock"></i>
                            <span>Recent</span>
                        </div>
                    </a>
                    <a href="#" class="filter-item flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i data-feather="bookmark"></i>
                            <span>Followed</span>
                        </div>
                        <span class="text-sm text-gray-500">3</span>
                    </a>
                </div>
<div class="mt-8">
                    <h3 class="font-medium text-gray-500 mb-3 flex items-center">
                        <i data-feather="tag" class="mr-2"></i>
                        Popular Tags
                    </h3>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Homework</span>
                        <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Exam</span>
                        <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Lecture</span>
                        <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Project</span>
                        <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Lab</span>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-sidebar', CustomSidebar);