Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-07 22:45:23 +02:00
Code Issues Releases Activity

menu wrapper added

Browse source
This commit is contained in:
Umang G. Patel 2022-06-19 23:09:32 +05:30
parent 5bb3d2c06b
commit 8a4bcc38a0
3 changed files with 55 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/backend/views/components/sidebar.twig
View file

@ -1,55 +1,53 @@
<div data-module="sidebar" class="docs-sidebar"> <div data-module="sidebar" class="docs-sidebar">
<div class="docs-sidebar__toggler"> <div class="docs-sidebar__toggler">
{{ svg('menu') }} Table of contents {{ svg('menu') }}
</div> Table of contents
</div>
<aside class="docs-sidebar__content docs-sidebar__content--hidden"> <aside class="docs-sidebar__content docs-sidebar__content--hidden">
{% for firstLevelPage in menu %} <div class="docs-sidebar__menu-wrapper">
<section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}"> {% for firstLevelPage in menu %}
<a class="docs-sidebar__section-title-wrapper" <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}" <a class="docs-sidebar__section-title-wrapper" href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}">
> <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
<div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}"> <span>
<span> {{ firstLevelPage.title | striptags }}
{{ firstLevelPage.title | striptags }} </span>
</span> {% if firstLevelPage.children is not empty %}
{% if firstLevelPage.children is not empty %} <button class="docs-sidebar__section-toggler">
<button class="docs-sidebar__section-toggler"> {{ svg('arrow-up') }}
{{ svg('arrow-up') }} </button>
</button> {% endif %}
{% endif %} </div>
</div> </a>
</a> {% if firstLevelPage.children is not empty %}
{% if firstLevelPage.children is not empty %} <ul class="docs-sidebar__section-list">
<ul class="docs-sidebar__section-list"> {% for child in firstLevelPage.children %}
{% for child in firstLevelPage.children %} <li>
<li> <a class="docs-sidebar__section-list-item-wrapper" href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
<a <div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
class="docs-sidebar__section-list-item-wrapper" <span>{{ child.title | striptags }}</span>
href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}"> </div>
<div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}"> </a>
<span>{{ child.title | striptags }}</span> </li>
</div> {% endfor %}
</a> </ul>
</li> {% endif %}
{% endfor %} </section>
</ul> {% endfor %}
{% endif %} </div>
</section>
{% endfor %}
<div class="docs-sidebar__logo"> <div class="docs-sidebar__logo">
<a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs"> <a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">
<div class="docs-sidebar__logo-image"> <div class="docs-sidebar__logo-image">
{{ svg('aside-logo') }} {{ svg('aside-logo') }}
</div> </div>
<p class="docs-sidebar__logo-caption"> <p class="docs-sidebar__logo-caption">
Powered by CodeX Docs Powered by CodeX Docs
</p> </p>
</a> </a>
</div> </div>
</aside> </aside>
</div> </div>

13
src/frontend/styles/components/sidebar.pcss
View file

@ -1,9 +1,9 @@
.docs-sidebar { .docs-sidebar {
width: 100vw; width: 100vw;
position: fixed;
top: var(--layout-height-header);
@media (--desktop) { @media (--desktop) {
position: fixed;
top: var(--layout-height-header);
width: var(--layout-sidebar-width); width: var(--layout-sidebar-width);
} }
@ -11,11 +11,9 @@
border-bottom: 1px solid var(--color-line-gray); border-bottom: 1px solid var(--color-line-gray);
box-sizing: border-box; box-sizing: border-box;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal); padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
position: sticky;
top: var(--layout-height-header);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: hidden;
@media (--desktop) { @media (--desktop) {
height: calc(100vh - var(--layout-height-header)); height: calc(100vh - var(--layout-height-header));
@ -28,7 +26,10 @@
display: none; display: none;
} }
} }
&__menu-wrapper {
overflow: auto;
height: 100%;
}
&__section { &__section {
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;

2
src/frontend/styles/vars.pcss
View file

@ -25,7 +25,7 @@
--layout-padding-horizontal: 22px; --layout-padding-horizontal: 22px;
--layout-padding-vertical: 30px; --layout-padding-vertical: 30px;
--layout-width-aside: 300px; --layout-sidebar-width: 344px;
--layout-padding-horizontal-aside: 22px; --layout-padding-horizontal-aside: 22px;
--layout-width-main-col: 650px; --layout-width-main-col: 650px;