Spaces:
Running
Running
File size: 5,850 Bytes
9f828c9 |
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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
class CustomSidebar extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.sidebar {
background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
color: white;
transition: width 0.3s;
display: flex;
flex-direction: column;
}
.sidebar-header {
padding: 1rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.module-btn {
transition: all 0.2s;
display: flex;
align-items: center;
padding: 0.75rem;
border-radius: 0.5rem;
margin-bottom: 0.25rem;
}
.module-btn:hover {
background: rgba(255,255,255,0.1);
}
.module-btn.active {
background: rgba(255,255,255,0.2);
border-left: 4px solid white;
}
.settings-select {
background: white;
color: #1f2937;
border-radius: 0.25rem;
padding: 0.5rem;
font-size: 0.875rem;
width: 100%;
}
</style>
<div class="sidebar w-72">
<div class="sidebar-header">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-blue-600">CC</div>
<div>
<h1 class="font-bold">CodeCraft</h1>
<p class="text-xs opacity-80">Studio Pro</p>
</div>
</div>
<button id="toggle-sidebar" class="text-blue-100 hover:text-white">
<i data-feather="x"></i>
</button>
</div>
<div class="flex-1 overflow-y-auto p-3 space-y-2">
<button data-module="generation" class="module-btn active">
<span class="text-xl mr-2">⚡</span>
<span class="font-medium text-sm">Génération Rapide</span>
</button>
<button data-module="pricing" class="module-btn">
<span class="text-xl mr-2">💰</span>
<span class="font-medium text-sm">Pricing SaaS</span>
</button>
<button data-module="landing" class="module-btn">
<span class="text-xl mr-2">🚀</span>
<span class="font-medium text-sm">Landing Pro</span>
</button>
<button data-module="dashboard" class="module-btn">
<span class="text-xl mr-2">📊</span>
<span class="font-medium text-sm">Dashboard Pro</span>
</button>
<button data-module="boutique" class="module-btn">
<span class="text-xl mr-2">🛍️</span>
<span class="font-medium text-sm">Boutique Pro</span>
</button>
<button data-module="video" class="module-btn">
<span class="text-xl mr-2">🎬</span>
<span class="font-medium text-sm">Script Vidéo</span>
</button>
</div>
<div class="p-4 border-t border-blue-500 space-y-3">
<div>
<label class="text-xs opacity-80">Thème</label>
<select class="settings-select mt-1">
<option>Brand Blue</option>
<option>Dark Mode</option>
<option>Light Mode</option>
</select>
</div>
<div>
<label class="text-xs opacity-80">Industrie</label>
<select class="settings-select mt-1">
<option>App Hosting</option>
<option>SaaS</option>
<option>E-commerce</option>
<option>Agence</option>
</select>
</div>
<button class="w-full bg-white bg-opacity-20 hover:bg-opacity-30 p-2 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2">
<i data-feather="settings"></i>
<span>Configuration</span>
</button>
</div>
</div>
`;
}
connectedCallback() {
this.shadowRoot.querySelector('#toggle-sidebar').addEventListener('click', () => {
const sidebar = this.shadowRoot.querySelector('.sidebar');
sidebar.classList.toggle('w-72');
sidebar.classList.toggle('w-20');
// Toggle text visibility
this.shadowRoot.querySelectorAll('.module-btn span:not(:first-child)').forEach(el => {
el.classList.toggle('hidden');
});
this.shadowRoot.querySelectorAll('.settings-select, .sidebar-header > div > div:last-child, button span').forEach(el => {
el.classList.toggle('hidden');
});
});
// Initialize feather icons
feather.replace();
}
}
customElements.define('custom-sidebar', CustomSidebar); |