File size: 3,506 Bytes
c5ca729 6073f89 c5ca729 6073f89 c5ca729 |
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 |
class CustomSidebar extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
#sidebar-overlay {
position: fixed;
inset: 0;
z-index: 30;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
}
#profile-sidebar {
position: fixed;
top: 0;
right: 0;
z-index: 40;
width: 100%;
max-width: 24rem;
height: 100%;
background-color: white;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
#profile-sidebar.open {
transform: translateX(0);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
</style>
<div id="sidebar-overlay"></div>
<aside id="profile-sidebar">
<div class="flex flex-col h-full">
<div class="sidebar-header">
<h3 class="text-lg font-semibold text-slate-900">Profile & Settings</h3>
<button id="profile-sidebar-close-btn" class="p-2 rounded-full text-slate-400 hover:bg-slate-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="flex-1 p-6 space-y-6">
<!-- Sidebar content would go here -->
<div class="space-y-2">
<label class="block text-sm font-medium text-slate-700">Profile Image</label>
<div class="flex items-center space-x-4">
<div id="profile-img-preview" class="h-16 w-16 rounded-full flex items-center justify-center overflow-hidden bg-slate-200 text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</div>
<input type="text" id="profile-img-url-input" placeholder="https://... image URL" class="block w-full rounded-md border-slate-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
</div>
</div>
</div>
</div>
</aside>
`;
}
}
customElements.define('custom-sidebar', CustomSidebar); |