|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
{%if is_space %}
|
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
|
{% endif %}
|
|
<style>
|
|
|
|
body, h1, h2, h3, p, ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
max-height: calc(100vh - 50px);
|
|
width: 300px;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
width: 0;
|
|
}
|
|
|
|
.sidebar a {
|
|
display: block;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
color: rgb(107 114 128);
|
|
}
|
|
|
|
.sidebar a:hover {
|
|
color: black;
|
|
transform: translateX(1px);
|
|
}
|
|
|
|
|
|
.sidebar a.active {
|
|
background-color: rgb(251 146 60);
|
|
color: white;
|
|
border-radius: 0.75rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
cursor: pointer;
|
|
border: none;
|
|
background-color: white;
|
|
font-size: xx-large;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.content {
|
|
margin-left: 300px;
|
|
padding: 20px;
|
|
display: block;
|
|
height: 100vh;
|
|
transition: margin-left 0.3s ease;
|
|
}
|
|
|
|
.content.collapsed {
|
|
margin-left: 0;
|
|
}
|
|
|
|
|
|
.content iframe {
|
|
width: 100%;
|
|
border: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
position: relative;
|
|
height: auto;
|
|
}
|
|
|
|
.content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
<script src="//unpkg.com/alpinejs" defer></script>
|
|
</head>
|
|
<body x-data="{ current_demo: '{{ initial_demo }}', is_collapsed: false }">
|
|
<div style="display: flex; flex-direction: column;">
|
|
<div>
|
|
<button @click="is_collapsed = !is_collapsed" class="close-btn">
|
|
<a x-text="is_collapsed ? '➡️' : '⬅️'"></a>
|
|
</button>
|
|
</div>
|
|
<div :class="{ 'sidebar': true, 'collapsed': is_collapsed }" style="margin-top: 50px;">
|
|
{% for name in names %}
|
|
<a @click="current_demo = '{{ name[0] }}'" :class="current_demo == '{{ name[0] }}' ? 'active' : ''">{{ name[0] }} {% if name[1] %}❌{% endif %}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div :class="{ 'content': true, 'collapsed': is_collapsed }">
|
|
<iframe :src="`/demo/${current_demo}${document.location.search}`"></iframe>
|
|
</div>
|
|
</body>
|
|
</html> |
