mirror of
https://codeberg.org/Codeberg/Documentation.git
synced 2026-06-16 05:13:54 -07:00
Implemented collapsing sub-menus - closes #93
This commit is contained in:
Lucas Hinderberger
parent
a20230f555
commit
84378a22ea
3 changed files with 46 additions and 12 deletions
|
|
@ -14,19 +14,23 @@ header > .container { display: flex; align-items: center; }
|
|||
main { flex: 1; }
|
||||
main > .container { display: flex; }
|
||||
|
||||
#sidebar { display: flex; flex-direction: column; padding: 50px 10px; background: #2185d0; color: white; font-weight: 500; }
|
||||
#sidebar { display: flex; flex-direction: column; padding: 50px 10px; background: #2185d0; color: white; font-weight: 500; box-sizing: border-box; }
|
||||
#sidebar nav { width: 350px; box-sizing: border-box; flex: 1; }
|
||||
#sidebar nav .fas { width: 30px; text-align: center; }
|
||||
#sidebar nav a { text-decoration: none; color: white; }
|
||||
#sidebar nav ul { list-style-type: none; padding: 0; margin: 0; }
|
||||
#sidebar .nav-section a { display: block; padding: 7px 10px; margin: 0 -10px 5px; background: #4595d3; font-size: 14pt; }
|
||||
#sidebar .nav-section a:hover, #sidebar .nav-section.active a { background: #27628f; margin-left: -15px; padding-left: 15px; margin-right: -15px; }
|
||||
#sidebar .nav-section a { display: block; padding: 7px 10px; margin: 0 -10px 5px; background: #4595d3; font-size: 12pt; }
|
||||
#sidebar .nav-section:hover a, #sidebar .nav-section.active a { background: #27628f; margin-left: -15px; padding-left: 15px; padding-right: 15px; margin-right: -15px; }
|
||||
#sidebar .nav-second-level a { font-size: 11pt; }
|
||||
#sidebar .nav-second-level ul { margin-left: 15px; padding: 7px 0; }
|
||||
#sidebar .nav-second-level li { margin-bottom: 10px; }
|
||||
#sidebar .nav-second-level a:hover, #sidebar .nav-second-level a.active { text-decoration: underline; }
|
||||
#sidebar .sidebar-close-button { display: none; position: relative; text-align: right; top: -35px; }
|
||||
#sidebar .sidebar-close-button a:hover { color: red; }
|
||||
#sidebar-overlay { display: none; opacity: 0; position: absolute; width: 100%; height: 100%; z-index: 999; background: #000a; }
|
||||
#sidebar .section-collapse-button { margin-left: 0 !important; padding-left: 5px !important; }
|
||||
#sidebar .section-collapse-button:hover { color: #cfffff; }
|
||||
#sidebar .section-link { margin-right: 0 !important; padding-right: 5px !important; }
|
||||
#sidebar-overlay { display: none; opacity: 0; position: fixed; width: 100%; height: 100%; z-index: 999; background: #000a; }
|
||||
.sidebar-overlay-in { opacity: 1; }
|
||||
|
||||
article { padding: 50px 0; width: 800px; }
|
||||
|
|
@ -65,6 +69,7 @@ footer { background: #f5f5f5; text-align: center; font-size: 8pt; padding: 15px;
|
|||
.action-buttons { flex: 1; }
|
||||
.action-buttons a { text-decoration: none; color: black; margin-left: 10px; }
|
||||
.action-buttons a:hover { text-decoration: underline; }
|
||||
.collapsible { overflow-y: hidden; transition: max-height 500ms; }
|
||||
.container { max-width: 1300px; margin: auto; height: 100%; }
|
||||
.flex-spacer { flex: 99; }
|
||||
|
||||
|
|
@ -75,11 +80,10 @@ footer { background: #f5f5f5; text-align: center; font-size: 8pt; padding: 15px;
|
|||
.narrow-only { display: initial; }
|
||||
|
||||
#header-logo { margin-left: 0; }
|
||||
#sidebar { display: block; position: absolute; left: 0; top: 0; height: 100%; transform: translateX(-400px); z-index: 9999; }
|
||||
#sidebar { display: block; position: fixed; overflow-y: auto; left: 0; top: 0; height: 100%; transform: translateX(-400px); z-index: 9999; }
|
||||
#sidebar .sidebar-close-button { display: block; }
|
||||
#sidebar nav { width: 300px; }
|
||||
#sidebar .nav-section a { font-size: 12pt; }
|
||||
#sidebar .nav-second-level { font-size: 11pt; }
|
||||
#sidebar .nav-section a { font-size: 11pt; }
|
||||
|
||||
#sidebar-overlay.sidebar-overlay-in { display: block; }
|
||||
article { margin-left: 0; margin-right: 0; padding-top: 0; width: 100%; }
|
||||
|
|
|
|||
22
assets/js/collapse.js
Normal file
22
assets/js/collapse.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
function onCollapseButtonClick(button) {
|
||||
let icon = button.querySelector(".fas")
|
||||
|
||||
let collapseId = button.dataset["collapseId"]
|
||||
let collapseElement = document.getElementById(collapseId)
|
||||
if (collapseElement.style.maxHeight == "0px") {
|
||||
icon.classList.remove("fa-plus-square")
|
||||
icon.classList.add("fa-minus-square")
|
||||
collapseElement.style.maxHeight = collapseElement.scrollHeight + "px"
|
||||
} else {
|
||||
console.log(collapseElement.style.maxHeight)
|
||||
if (collapseElement.style.maxHeight === "") { // This is a workaround to fix animation when no initial maxHeight has been set
|
||||
collapseElement.style.maxHeight = collapseElement.scrollHeight + "px"
|
||||
void collapseElement.offsetWidth // Needed to trigger render
|
||||
}
|
||||
|
||||
|
||||
icon.classList.add("fa-plus-square")
|
||||
icon.classList.remove("fa-minus-square")
|
||||
collapseElement.style.maxHeight = "0px"
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/solid.min.css" async>
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.codeberg.org/dist/fontawesome5/css/fontawesome.min.css" async>
|
||||
|
||||
<script type="text/javascript" src="/assets/js/collapse.js"></script>
|
||||
<script type="text/javascript" src="/assets/js/sidebar.js"></script>
|
||||
</head>
|
||||
|
||||
|
|
@ -53,17 +54,24 @@
|
|||
<div class="container">
|
||||
<div id="sidebar">
|
||||
<nav>
|
||||
<div class="sidebar-close-button"><a href="#" onclick="hideSidebar()">{% fas_icon "times-circle" %}</a></div>
|
||||
<div class="sidebar-close-button"><a href="javascript:void(0)" onclick="hideSidebar()">{% fas_icon "times-circle" %}</a></div>
|
||||
|
||||
<ul>
|
||||
{% for entry in collections.all | eleventyNavigation %}
|
||||
{% set active = entry.url == page.url or entry.key == eleventyNavigation.parent %}
|
||||
{% if (not entry.draft) or active %}
|
||||
<li class="nav-section{% if active %} active{% endif %}">
|
||||
<a href="{{ entry.url }}">{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a>
|
||||
<li class="nav-section{% if active %} active{% endif %}" style="display: flex;">
|
||||
<a class="section-link" href="{{ entry.url }}" style="flex: 1;">{% fas_icon entry.icon | default("caret-right") %} {{ entry.title }}</a>
|
||||
{% if entry.children.length > 0 %}
|
||||
<a class="section-collapse-button" data-collapse-id="nav-second-level-{{ entry.key }}" href="javascript:void(0)" onclick="onCollapseButtonClick(this)">
|
||||
{% if active %}{% fas_icon "minus-square" %}{% else %}{% fas_icon "plus-square" %}{% endif %}
|
||||
</a>
|
||||
{% else %}
|
||||
<a class="section-collapse-button"><!-- Intentionally left blank --></a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% if active and entry.children.length > 0 %}
|
||||
<li class="nav-second-level">
|
||||
{% if entry.children.length > 0 %}
|
||||
<li class="nav-second-level collapsible" id="nav-second-level-{{ entry.key }}"{% if not active %} style="max-height: 0px;"{% endif %}>
|
||||
<ul>
|
||||
{% for child in entry.children %}
|
||||
{% set child_active = child.url == page.url %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue