aik aesi app bnao jis mein mein apny sary coding projects ko category wise save kr skon, aur har category mein kitny codes hain aur kon se complete ho chuky Hain, kis date ko, kitny bajy, project ki pics, aur baki kch zrori cheezain bhi honi chahiyen, jo project complete ho jay us py tick lgany ka option, jo abhi nae huy wo sb untick hon aur us mein bhi jo zrori cheezain rakhna hon to rakh dena, project complete krny py client se kitny paisy liye, kitny baki hain ye bhi manage krna he aur accounts ki alag alag reports bhi bnani hain jin ko easyly print bhi kia ja sky, ye aik professional look app hona chahiye, jis mein advance technology ko use krty huy advance interface hona chahiye. App bht bhari na ho loading mein bht ziada time na ly. Aesa zbrdast design ho aur futuristic animations honi chahiye. Jb bhi kisi client ko add krna ho to us ki each and everything details save krni hon. Kisi bhi professional app ka look hona lazmi he
b3cd563 verified | class SideBar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| aside { | |
| position: fixed; | |
| top: 64px; | |
| left: 0; | |
| bottom: 0; | |
| width: 256px; | |
| background: rgba(15, 23, 42, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| z-index: 999; | |
| padding: 1.5rem 0; | |
| overflow-y: auto; | |
| transform: translateX(0); | |
| transition: transform 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| aside { | |
| transform: translateX(-100%); | |
| } | |
| aside.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| .nav-section { | |
| margin-bottom: 2rem; | |
| } | |
| .nav-title { | |
| padding: 0 1.5rem; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: #94a3b8; | |
| margin-bottom: 0.75rem; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 0.75rem 1.5rem; | |
| color: #cbd5e1; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .nav-item:hover { | |
| background: rgba(99, 102, 241, 0.1); | |
| color: white; | |
| padding-left: 2rem; | |
| } | |
| .nav-item.active { | |
| background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), transparent); | |
| color: white; | |
| border-left: 3px solid #6366f1; | |
| } | |
| .nav-item.active::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background: linear-gradient(to bottom, #6366f1, #8b5cf6); | |
| } | |
| .nav-item i { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .badge { | |
| margin-left: auto; | |
| padding: 2px 8px; | |
| background: rgba(99, 102, 241, 0.2); | |
| color: #6366f1; | |
| border-radius: 12px; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| .category-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 0 1.5rem; | |
| margin-top: 1rem; | |
| } | |
| .category-tag { | |
| padding: 4px 12px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| font-size: 0.75rem; | |
| color: #94a3b8; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .category-tag:hover { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: white; | |
| border-color: #6366f1; | |
| } | |
| .category-tag.active { | |
| background: rgba(99, 102, 241, 0.3); | |
| color: white; | |
| border-color: #6366f1; | |
| } | |
| .mobile-toggle { | |
| display: none; | |
| position: fixed; | |
| bottom: 2rem; | |
| left: 2rem; | |
| width: 56px; | |
| height: 56px; | |
| background: linear-gradient(45deg, #6366f1, #f59e0b); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| z-index: 1001; | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .mobile-toggle:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4); | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-toggle { | |
| display: flex; | |
| } | |
| } | |
| </style> | |
| <aside id="sidebar"> | |
| <div class="nav-section"> | |
| <div class="nav-title">Main</div> | |
| <a href="index.html" class="nav-item active" data-nav="dashboard"> | |
| <i data-feather="home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="projects.html" class="nav-item" data-nav="projects"> | |
| <i data-feather="folder"></i> | |
| <span>Projects</span> | |
| <span class="badge">42</span> | |
| </a> | |
| <a href="clients.html" class="nav-item" data-nav="clients"> | |
| <i data-feather="users"></i> | |
| <span>Clients</span> | |
| <span class="badge">15</span> | |
| </a> | |
| <a href="categories.html" class="nav-item" data-nav="categories"> | |
| <i data-feather="grid"></i> | |
| <span>Categories</span> | |
| </a> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-title">Financial</div> | |
| <a href="payments.html" class="nav-item" data-nav="payments"> | |
| <i data-feather="dollar-sign"></i> | |
| <span>Payments</span> | |
| </a> | |
| <a href="invoices.html" class="nav-item" data-nav="invoices"> | |
| <i data-feather="file-text"></i> | |
| <span>Invoices</span> | |
| <span class="badge">3</span> | |
| </a> | |
| <a href="reports.html" class="nav-item" data-nav="reports"> | |
| <i data-feather="pie-chart"></i> | |
| <span>Reports</span> | |
| </a> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-title">Categories</div> | |
| <div class="category-tags"> | |
| <span class="category-tag active" onclick="filterProjects('all')">All</span> | |
| <span class="category-tag" onclick="filterProjects('web')">Web</span> | |
| <span class="category-tag" onclick="filterProjects('mobile')">Mobile</span> | |
| <span class="category-tag" onclick="filterProjects('ai')">AI/ML</span> | |
| <span class="category-tag" onclick="filterProjects('game')">Games</span> | |
| <span class="category-tag" onclick="filterProjects('blockchain')">Blockchain</span> | |
| </div> | |
| </div> | |
| <div class="nav-section"> | |
| <div class="nav-title">Settings</div> | |
| <a href="settings.html" class="nav-item" data-nav="settings"> | |
| <i data-feather="settings"></i> | |
| <span>Settings</span> | |
| </a> | |
| <a href="help.html" class="nav-item" data-nav="help"> | |
| <i data-feather="help-circle"></i> | |
| <span>Help & Support</span> | |
| </a> | |
| </div> | |
| </aside> | |
| <div class="mobile-toggle" id="mobileToggle"> | |
| <i data-feather="menu"></i> | |
| </div> | |
| `; | |
| // Initialize Feather icons | |
| setTimeout(() => { | |
| if (this.shadowRoot.querySelector('[data-feather]')) { | |
| feather.replace(); | |
| } | |
| }, 100); | |
| // Add mobile toggle functionality | |
| this.shadowRoot.getElementById('mobileToggle').addEventListener('click', () => { | |
| const sidebar = this.shadowRoot.getElementById('sidebar'); | |
| sidebar.classList.toggle('active'); | |
| }); | |
| // Close sidebar when clicking outside on mobile | |
| document.addEventListener('click', (e) => { | |
| if (window.innerWidth <= 768) { | |
| const sidebar = this.shadowRoot.getElementById('sidebar'); | |
| const toggle = this.shadowRoot.getElementById('mobileToggle'); | |
| if (!sidebar.contains(e.target) && !toggle.contains(e.target)) { | |
| sidebar.classList.remove('active'); | |
| } | |
| } | |
| }); | |
| // Make filterProjects available globally | |
| window.filterProjects = (category) => { | |
| const tags = this.shadowRoot.querySelectorAll('.category-tag'); | |
| tags.forEach(tag => tag.classList.remove('active')); | |
| this.shadowRoot.querySelector(`.category-tag[onclick*="${category}"]`).classList.add('active'); | |
| // Call the global filter function | |
| if (typeof window.filterProjectsGlobal === 'function') { | |
| window.filterProjectsGlobal(category); | |
| } | |
| }; | |
| } | |
| } | |
| customElements.define('side-bar', SideBar); |