Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 13:19:42 +02:00
Code Issues Releases Activity

Sidebar redesign (#200)

Browse source 
* New sidebar

* Save state to local storage

* Make sidebar sticky

* Text overflow

* Fix add page button on mobile

* Mobile layout

* Display sidebar when ready

* Add logo

* Remove files

* Fix margin

* Update logo padding-bottom

* Hovers

* Decrease logo's font size

* Make logo not sticky

* Cleanup classnames

* Simplify css

* Update sidebar module

* Fix animation

* Fix cursor issue

* Fix vars and logo paddings
This commit is contained in:
Tanya 2022-06-16 21:37:37 +08:00 • committed by GitHub
parent 16ba86fddb
commit 30d96909d3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 531 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/backend/views/components/sidebar.twig Normal file
View file

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