44 lines
1012 B
HTML
44 lines
1012 B
HTML
<template id="side-menu-template">
|
|
<style></style>
|
|
:host {
|
|
display: block;
|
|
width: var(--side-menu-width, 250px);
|
|
height: 100%;
|
|
background: var(--side-menu-bg, #f9f9f9);
|
|
border-right: 1px solid #ccc;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.menu {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.toggle {
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: -1.5rem;
|
|
background: var(--toggle-bg, #f0f0f0);
|
|
border: 1px solid #ccc;
|
|
border-left: none;
|
|
border-radius: 0 4px 4px 0;
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.collapsed {
|
|
transform: translateX(-100%);
|
|
}
|
|
</style>
|
|
|
|
<div class="toggle" part="toggle">☰</div>
|
|
<nav class="menu" part="menu">
|
|
<slot></slot>
|
|
<color-picker></color-picker>
|
|
<label id="grid-toggle-label"><input type="checkbox" id="grid-toggle"> Grid</label>
|
|
</nav>
|
|
</template>
|