Spaces:
Configuration error
Configuration error
File size: 3,188 Bytes
298575c 6b42561 298575c 6b42561 298575c 6b42561 298575c 25d2813 298575c 326ad46 25d2813 326ad46 ae58435 8be40d5 298575c 8be40d5 298575c 8be40d5 298575c 555bfe6 298575c ce8bf77 298575c 555bfe6 ce8bf77 555bfe6 298575c 555bfe6 298575c 8be40d5 298575c 8be40d5 298575c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
width: 280px;
background: #f8fafc;
height: 100vh;
position: fixed;
left: 0;
top: 0;
border-right: 1px solid #e2e8f0;
padding: 1.5rem;
overflow-y: auto;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 2rem;
cursor: pointer;
}
.menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 0.5rem;
color: #475569;
cursor: pointer;
}
.menu-item:hover {
background: #e2e8f0;
color: #1e40af;
}
.menu-item.active {
background: #dbeafe;
color: #1e40af;
}
.submenu {
padding-left: 1.5rem;
margin-top: 0.25rem;
}
.submenu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
color: #475569;
cursor: pointer;
}
.submenu-item:hover {
background: #e2e8f0;
}
i {
width: 20px;
height: 20px;
}
</style>
<a href="/" class="logo">
<i data-feather="code"></i>
<span>MON SITE</span>
</a>
<div class="collab-note" style="color: #ef4444; font-weight: 500;">
⚠️ 100% Indépendant - Aucun lien avec DeepSite
</div>
<div class="menu-item active">
<i data-feather="clipboard"></i>
<span>📋 NOUVELLE TÂCHE</span>
</div>
<div class="menu-item">
<i data-feather="search"></i>
<span>🔍 RECHERCHER</span>
</div>
<div class="menu-item">
<i data-feather="book"></i>
<span>📚 BIBLIOTHÈQUE</span>
</div>
<div class="menu-item" data-target="code-editor">
<i data-feather="folder"></i>
<span>📁 MES PROJETS</span>
</div>
<div class="submenu">
<div class="submenu-item" data-target="code-editor">
<i data-feather="file-text"></i>
<span>Fichier 1.html</span>
</div>
<div class="submenu-item active" data-target="code-editor">
<i data-feather="file"></i>
<span>Fichier 2.css</span>
</div>
<div class="submenu-item" data-target="code-editor">
<i data-feather="code"></i>
<span>Fichier 3.js</span>
</div>
</div>
<div class="menu-item" data-target="rosalinda-chat">
<i data-feather="message-circle"></i>
<span>💬 CHAT ROSALINDA</span>
</div>
<div class="menu-item">
<i data-feather="check-square"></i>
<span>✅ TOUTES LES TÂCHES</span>
</div>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |