69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import globalCss from './assets/styles/style.css?inline';
|
|
|
|
export class AppLayout extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
if (this.shadowRoot) {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
${globalCss}
|
|
|
|
:host {
|
|
display: block;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden; /* Empêche le scroll global sur body */
|
|
}
|
|
|
|
.app-grid {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr; /* Ligne 1: auto (header), Ligne 2: le reste */
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-area {
|
|
width: 100%;
|
|
z-index: 100;
|
|
/* Le header est posé ici, plus besoin de position: fixed */
|
|
}
|
|
|
|
.content-area {
|
|
position: relative;
|
|
overflow-y: auto; /* C'est ICI que ça scrolle */
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Scrollbar jolie */
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
|
}
|
|
|
|
/* Webkit Scrollbar */
|
|
.content-area::-webkit-scrollbar { width: 6px; }
|
|
.content-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
|
|
</style>
|
|
|
|
<div class="app-grid">
|
|
<div class="header-area">
|
|
<slot name="header"></slot>
|
|
</div>
|
|
|
|
<div class="content-area">
|
|
<slot name="content"></slot>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('app-layout', AppLayout); |