From 10657626e25258abba4c1bad5d31825e481d02db Mon Sep 17 00:00:00 2001
From: Bert Droesbeke <44875756+bedroesb@users.noreply.github.com>
Date: Wed, 31 Mar 2021 19:49:19 +0200
Subject: [PATCH] Collapse sidebar in mobile mode (#477)

* side-bar collapse

* line ending

* less css

* margin changes

* less css

* demonstrating the new blurbs

* more margin

* extra sentence

* negative margin top

* gutter fix

* no hover class

* no data table class

* margin fix

* sidebar name in button
---
 _data/sidebars/main.yml |   1 -
 _includes/sidebar.html  | 438 ++++++++++++++++++++--------------------
 _includes/topnav.html   |   2 +-
 _layouts/default.html   |   4 +-
 assets/css/main.css     |  63 +++---
 5 files changed, 259 insertions(+), 249 deletions(-)

diff --git a/_data/sidebars/main.yml b/_data/sidebars/main.yml
index 7fccd6257..074f14d1c 100644
--- a/_data/sidebars/main.yml
+++ b/_data/sidebars/main.yml
@@ -69,4 +69,3 @@ subitems:
         url: /nels_assembly.html
       - title: Covid-19 Data Portal
         url: /covid19_data_portal.html
-
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 86064b13e..05f826350 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -6,219 +6,225 @@
 {%- capture planning -%}{%- if page.url == "/planning.html" -%}st5{%- else -%}st15{%- endif -%}{%- endcapture -%}
 {%- capture collecting -%}{%- if page.url == "/collecting.html" -%}st6{%- else -%}st16{%- endif -%}{%- endcapture -%}
 {%- capture sharing -%}{%- if page.url == "/sharing.html" -%}st7{%- else -%}st17{%- endif -%}{%- endcapture -%}
-<ul id="menu" class="menu">
-    {% if sidebar.title or sidebar.version %}
-    <li class="sidebarTitle">{{sidebar.title}} {{sidebar.version}}</li>
-    {% endif %}
-    {%- for folder in sidebar.subitems %}
-    {%- if page.url == folder.url %}
-    <li class="active{%- if folder.hr %} hr-margin{% endif %}">
-    {%- else %}
-    <li {%- if folder.hr %} class="hr-margin"{% endif %}>
-    {%- endif %}
-    {%- if folder.external_url %}
-        <a title="{{folder.title}}" href="{{folder.external_url}}" target="_blank" rel="noopener">{{folder.title}}</a>
-    {%- else %}    
-        <a title="{{folder.title}}" href="{{folder.url | relative_url }}">{{ folder.title }}</a>
-    {%- endif %}
-    {%- if folder.subitems %}
-        <ul>
-            {%- for subfolder in folder.subitems %}
-            {%- if subfolder.RDM -%}
-            {%- if site.RDM_pages contains page.url %}
-            <li class="active sidebar_rdm_sub">
-            {% else %}
-            <li class="sidebar_rdm_sub">
-            {% endif %}
-                <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250.9 251"
-                    style="enable-background:new 0 0 250.9 251;" xml:space="preserve" class="sidebar_rdm">
-                    <style type="text/css">
-                        .st10,.st12,.st13,.st14,.st15,.st16,.st17 {fill:#83858e;}
-                        .st1{fill:#FFFFFF; pointer-events: none;}
-                        .st0{fill:#FA484B;}
-                        .st5{fill:#F67028;}
-                        .st6{fill:#FAC54B;}
-                        .st4{fill:#8ABA56;}
-                        .st3{fill:#32B890;}
-                        .st2{fill:#4176A5;}
-                        .st7{fill:#9E51AD;}
-                        .st8{font-family: 'Exo 2', sans-serif;}
-                        .st9{font-size:13.5px;}
-                        .st0,.st2,.st3,.st4,.st5,.st6,.st7 {transition: fill 0.3s;}
-                        .st10:hover{fill:#FA484B;cursor: pointer;}
-                        .st15:hover{fill:#F67028;cursor: pointer;}
-                        .st16:hover{fill:#FAC54B;cursor: pointer;}
-                        .st14:hover{fill:#8ABA56;cursor: pointer;}
-                        .st13:hover{fill:#32B890;cursor: pointer;}
-                        .st12:hover{fill:#4176A5;cursor: pointer;}
-                        .st17:hover{fill:#9E51AD;cursor: pointer;}
-                        text {pointer-events : none;}
-                    </style>
-                    <a xlink:href="./reusing" target="_top">
-                        <g id="ReusePath">
-                            <path class="{{ reusing }}" d="M63.9,52.1l14.9,33.1c10.7-12.4,26.2-20.5,43.6-21.3l16.7-32.3L122.9,0C85.3,0.8,51.7,18.1,29.2,45L63.9,52.1z
-                                " />
-                            <path class="st1" d="M92.5,17.4c2-0.9,4.1-1.3,6.3-1.3c0.2,0,0.4,0.1,0.5,0.3c0.2,0.2,0.2,0.6,0,0.8c-0.1,0.2-0.4,0.3-0.6,0.4
-                                c-0.4,0.2-0.8,0.3-1.1,0.5c-0.3,0.2-0.6,0.3-0.9,0.5c-0.6,0.4-1.2,0.8-1.7,1.2c-0.8,0.7-1.5,1.4-2,2.3c-1,1.5-1.6,3.2-1.8,5
-                                c1.1,0,2.2,0,3.3,0c0.3,0,0.5,0.1,0.6,0.4c0.1,0.2,0.1,0.4,0,0.6c-0.1,0.2-0.3,0.4-0.5,0.6c-1.9,2.1-3.9,4.3-5.8,6.4
-                                c-0.2,0.2-0.5,0.3-0.8,0.2c-0.1-0.1-0.2-0.2-0.3-0.3c-1.9-2.1-3.9-4.3-5.8-6.5c-0.2-0.2-0.5-0.5-0.4-0.8c0-0.4,0.3-0.7,0.7-0.7
-                                c1.1,0,2.3,0,3.4,0c0.2-1.9,0.8-3.7,1.8-5.2C88.7,20,90.5,18.4,92.5,17.4z" />
-                            <path class="st1" d="M104.5,19.1c0.3-0.3,0.8-0.3,1,0c2,2.2,3.9,4.4,5.9,6.5c0.2,0.2,0.5,0.5,0.4,0.8c0,0.4-0.4,0.7-0.7,0.7
-                                c-1.1,0-2.3,0-3.4,0c-0.2,2.3-1.1,4.4-2.5,6.2c-1.3,1.7-3.2,3-5.2,3.8c-0.6,0.2-1.2,0.4-1.8,0.6c-1.2,0.3-2.4,0.4-3.7,0.4
-                                c-0.4,0-0.7-0.5-0.6-0.9c0.1-0.1,0.1-0.3,0.3-0.4c0.5-0.3,1.1-0.5,1.6-0.8c0.6-0.4,1.3-0.7,1.9-1.2c0.9-0.7,1.7-1.5,2.4-2.4
-                                c0.5-0.7,0.9-1.5,1.3-2.3c0.4-1,0.7-2,0.8-3.1c-1.1,0-2.3,0-3.5,0c-0.4,0-0.8-0.4-0.7-0.8c0-0.3,0.3-0.5,0.5-0.8
-                                C100.6,23.4,102.6,21.2,104.5,19.1z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./preserving" target="_top">
-                        <g id="PreservePath">
-                            <path class="{{ preserving }}" d="M67.6,201.7l29-21.8c-14.7-7.8-25.8-21.4-30.4-37.8L31,133L3.8,155.8c8.8,35.5,32.8,65.1,64.7,81.4L67.6,201.7
-                                z" />
-                            <path class="st1" d="M48.4,150.2c1.8,0,3.6,0.1,5.3,0.4c1,0.2,2.1,0.5,3.1,0.9c0.6,0.3,1.2,0.6,1.7,1c0.3,0.3,0.5,0.6,0.6,1
-                                c0,0.4-0.1,0.7-0.3,1c-0.3,0.4-0.8,0.8-1.3,1c-0.8,0.4-1.7,0.7-2.5,0.9c-1.4,0.4-2.9,0.5-4.4,0.6c-2.3,0.1-4.7,0-7-0.5
-                                c-1-0.2-1.9-0.5-2.8-0.9c-0.6-0.3-1.1-0.6-1.5-1.1c-0.2-0.3-0.4-0.7-0.4-1c0-0.4,0.3-0.8,0.6-1.1c0.7-0.6,1.5-0.9,2.4-1.2
-                                c1.2-0.4,2.5-0.6,3.8-0.8C46.6,150.3,47.5,150.3,48.4,150.2z" />
-                            <path class="st1" d="M38.9,157.1c1.2,0.8,2.6,1.2,4,1.5c2.1,0.5,4.3,0.6,6.4,0.6c1,0,2-0.1,3.1-0.2c2-0.2,4-0.6,5.8-1.4
-                                c0.4-0.2,0.7-0.3,1-0.6c0,1.4,0,2.8,0,4.2c0,0.3-0.1,0.7-0.3,0.9c-0.3,0.4-0.7,0.7-1.2,0.9c-0.3,0.2-0.5,0.3-0.8,0.4
-                                c-1.6,0.6-3.3,0.9-4.9,1.1c-1.9,0.2-3.8,0.2-5.7,0c-1.3-0.1-2.5-0.3-3.7-0.7c-1-0.3-2-0.6-2.8-1.3c-0.3-0.3-0.7-0.6-0.8-1
-                                c0-0.1,0-0.3,0-0.4C38.9,159.8,38.9,158.4,38.9,157.1z" />
-                            <path class="st1" d="M38.9,164.8c0.5,0.3,1,0.5,1.6,0.8c1.9,0.7,3.9,1.1,5.9,1.2c1.9,0.1,3.7,0.1,5.6,0c1.9-0.2,3.9-0.5,5.7-1.2
-                                c0.5-0.2,1.1-0.5,1.6-0.8c0,1.4,0,2.8,0,4.2c0,0.2,0,0.3-0.1,0.5c-0.1,0.4-0.4,0.6-0.7,0.9c-0.7,0.6-1.6,0.9-2.4,1.2
-                                c-0.6,0.2-1.3,0.4-1.9,0.5c-1.1,0.2-2.2,0.3-3.3,0.4c-0.9,0.1-1.8,0-2.7,0c-1.8-0.1-3.6-0.3-5.4-0.7c-1-0.3-2.1-0.7-3-1.4
-                                c-0.3-0.2-0.5-0.5-0.7-0.8c-0.1-0.3-0.1-0.6-0.1-0.8C38.9,167.4,38.9,166.1,38.9,164.8z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./analysing" target="_top">
-                        <g id="AnalysePath">
-                            <path class="{{ analysing }}" d="M149,218.3l1-36.2c-7.5,3.3-15.8,5.1-24.5,5.1c-8.5,0-16.6-1.7-24-4.9l-29.1,21.8l0.9,35.5
-                                c15.9,7.3,33.6,11.4,52.2,11.4c18.4,0,36-4,51.7-11.1L149,218.3z" />
-                            <path class="st1" d="M123.3,196c1.4,0,2.8,0,4.3,0c0.5,0,0.8,0.4,0.8,0.8c0,7.2,0,14.3,0,21.5c0,0.2-0.1,0.5-0.2,0.7
-                                c-0.2,0.2-0.4,0.3-0.6,0.3c-1.4,0-2.8,0-4.1,0c-0.3,0-0.5-0.1-0.7-0.3c-0.1-0.2-0.2-0.4-0.2-0.6c0-7.2,0-14.3,0-21.5
-                                C122.5,196.4,122.8,196,123.3,196z" />
-                            <path class="st1" d="M114.6,202.5c0.2,0,0.3,0,0.5,0c1.2,0,2.4,0,3.6,0c0.2,0,0.4,0,0.5,0.1c0.3,0.1,0.5,0.3,0.5,0.6
-                                c0,0.1,0,0.3,0,0.4c0,5,0,9.9,0,14.9c0,0.5-0.4,0.9-0.8,0.9c-1.3,0-2.6,0-3.9,0c-0.2,0-0.4,0-0.6-0.1c-0.3-0.1-0.5-0.4-0.5-0.8
-                                c0-5,0-10,0-15.1C114,202.9,114.2,202.6,114.6,202.5z" />
-                            <path class="st1" d="M106.3,208.7c1.4,0,2.9,0,4.3,0c0.4,0,0.8,0.4,0.8,0.8c0,2.9,0,5.8,0,8.8c0,0.3-0.1,0.6-0.4,0.8
-                                c-0.2,0.1-0.4,0.2-0.5,0.2c-1.2,0-2.5,0-3.7,0c-0.3,0-0.6,0-0.8-0.1c-0.3-0.1-0.4-0.5-0.4-0.8c0-2.8,0-5.7,0-8.5
-                                c0-0.2,0-0.4,0.1-0.6C105.6,209,105.9,208.7,106.3,208.7z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./processing" target="_top">
-                        <g id="ProcessPath">
-                            <path class="{{ processing }}" d="M211.7,165L184,141.6c-4.4,16.4-15.5,30.1-30.1,38.1l-1.1,36.3l28.3,21.5c31.9-16.2,56-45.6,65-81.1L211.7,165
-                                z" />
-                            <path class="st1" d="M179.4,172.2c0.1,0,0.2,0,0.4,0c7,0,14,0,21,0c0.3,0,0.6,0,0.8,0.1c0.5,0.2,0.7,0.7,0.7,1.2
-                                c0,4.3,0,8.6,0,12.8c0,0.4-0.1,0.7-0.3,1c-0.3,0.3-0.7,0.5-1.1,0.5c-7.1,0-14.1,0-21.2,0c-0.4,0-0.9-0.2-1.1-0.6
-                                c-0.2-0.3-0.3-0.6-0.3-0.9c0-4.3,0-8.5,0-12.8c0-0.4,0.1-0.8,0.4-1C178.9,172.4,179.1,172.3,179.4,172.2z M184.3,178
-                                c-0.3,0-0.7,0.2-1,0.4c-0.2,0.1-0.3,0.4-0.4,0.6c-0.4,0.6-0.4,1.4,0,2.1c0.4,0.6,1,0.9,1.6,1c0.5,0,1-0.1,1.4-0.4
-                                c0.1-0.1,0.2-0.1,0.3-0.3c0.3-0.5,0.5-1.1,0.4-1.6c-0.1-0.6-0.5-1.2-1.1-1.5C185.2,178,184.8,178,184.3,178z M195.4,178
-                                c-0.4,0.1-0.9,0.2-1.2,0.5c-0.3,0.4-0.5,0.8-0.5,1.3c-0.1,1,0.7,2,1.6,2.1c0.6,0.1,1.2-0.1,1.7-0.4c0.2-0.1,0.3-0.3,0.4-0.4
-                                c0.3-0.5,0.4-1.1,0.2-1.6c-0.1-0.4-0.3-0.7-0.6-1C196.5,178.1,195.9,177.9,195.4,178z M189.8,178c-0.3,0-0.5,0.1-0.8,0.3
-                                c-0.2,0.1-0.4,0.2-0.5,0.4c-0.4,0.6-0.5,1.3-0.3,1.9c0.2,0.6,0.6,1,1.2,1.3c0.6,0.3,1.3,0.1,1.9-0.2c0.1-0.1,0.3-0.1,0.4-0.3
-                                c0.3-0.4,0.5-0.9,0.4-1.5c0-0.7-0.5-1.5-1.2-1.8C190.6,178,190.2,178,189.8,178z" />
-                            <path class="st1" d="M184.3,179.1c0.3-0.1,0.6,0,0.9,0.1c0.2,0.1,0.3,0.3,0.3,0.5c0.1,0.3,0,0.7-0.3,1c-0.4,0.4-1.3,0.2-1.5-0.4
-                                C183.6,179.9,183.9,179.3,184.3,179.1z" />
-                            <path class="st1" d="M189.9,179.1c0.4-0.2,0.9,0.1,1.1,0.5c0.1,0.3,0.1,0.6,0,0.9c-0.2,0.3-0.5,0.4-0.8,0.4c-0.3,0-0.5-0.2-0.6-0.4
-                                c-0.2-0.3-0.3-0.7-0.1-1C189.4,179.3,189.7,179.2,189.9,179.1z" />
-                            <path class="st1" d="M195.3,179.1c0.3-0.1,0.7,0,1,0.2c0.2,0.2,0.3,0.5,0.3,0.7c0,0.4-0.4,0.8-0.8,0.9c-0.3,0-0.6-0.1-0.8-0.3
-                                c-0.2-0.2-0.3-0.5-0.2-0.8C194.8,179.5,195,179.2,195.3,179.1z" />
-                            <path class="st1" d="M186.8,189c0.9,0,1.7,0,2.6,0c1.3,0,2.7,0,4,0c0.2,0,0.5,0.1,0.5,0.4c0.3,0.9,0.6,1.9,0.9,2.8
-                                c0.1,0.2,0.1,0.4,0.3,0.6c0.1,0.1,0.3,0.1,0.4,0.1c0.7,0,1.4,0,2.1,0c0.2,0,0.4,0,0.5,0.2c0.3,0.3,0.1,0.7-0.2,0.8
-                                c-0.1,0-0.2,0-0.3,0c-5,0-10.1,0-15.1,0c-0.3,0-0.6-0.3-0.5-0.6c0-0.3,0.3-0.5,0.6-0.5c0.7,0,1.5,0,2.2,0c0.3,0,0.5-0.2,0.6-0.4
-                                c0.3-0.9,0.6-1.9,0.9-2.8c0.1-0.2,0.1-0.3,0.2-0.5C186.5,189,186.7,189,186.8,189z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./planning" target="_top">
-                        <g id="PlanPath">
-                            <path class="{{ planning }}"
-                                d="M144.4,31.6l-16.6,32.3c17.5,0.7,33.2,8.6,44,20.9l35.7-7l14.6-32.4C199.6,18.3,166,0.8,128.2,0L144.4,31.6z" />
-                            <path class="st1"
-                                d="M166.7,24.1c0.3-0.4,0.8-0.6,1.4-0.6c4.7,0,9.4,0,14.1,0c0.5,0,1,0.2,1.4,0.6c0.3,0.3,0.4,0.7,0.4,1.2
-                                c0,1,0,2,0,3c-0.3,0.3-0.5,0.5-0.8,0.8c-2.6,2.6-5.3,5.3-7.9,7.9c-0.1,0.1-0.3,0.3-0.3,0.5c-0.4,1.6-0.8,3.1-1.2,4.7
-                                c0,0.2-0.1,0.4,0,0.5c0.1,0.2,0.4,0.3,0.7,0.3c1.6-0.4,3.2-0.8,4.7-1.3c0.2,0,0.3-0.1,0.4-0.3c1.5-1.5,3-3,4.5-4.5
-                                c0,2.5,0,5.1,0,7.6c0,0.4-0.1,0.8-0.3,1.1c-0.3,0.4-0.9,0.7-1.4,0.7c-4.7,0-9.4,0-14.1,0c-0.3,0-0.7,0-1-0.2
-                                c-0.3-0.2-0.6-0.4-0.7-0.8c-0.1-0.3-0.2-0.6-0.2-0.9c0-6.4,0-12.8,0-19.2C166.3,24.8,166.4,24.4,166.7,24.1z" />
-                            <path class="st1" d="M185.5,28.4c0.5-0.3,1.2-0.4,1.7-0.1c0.3,0.2,0.6,0.4,0.8,0.7c0.5,0.6,0.6,1.5,0.1,2.1
-                                c-0.1,0.2-0.3,0.4-0.5,0.5c-0.9-0.9-1.8-1.8-2.7-2.7C185.1,28.7,185.3,28.5,185.5,28.4z" />
-                            <path class="st1" d="M176.3,37.5c2.6-2.6,5.2-5.2,7.8-7.8c0.9,0.9,1.8,1.8,2.7,2.7c-2.6,2.6-5.2,5.2-7.8,7.8
-                                C178.1,39.3,177.2,38.4,176.3,37.5z" />
-                            <path class="st1"
-                                d="M175.8,38.6l0.1,0.1c0.7,0.7,1.3,1.3,2,2c-1,0.3-1.9,0.5-2.9,0.8C175.3,40.6,175.6,39.6,175.8,38.6z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./collecting" target="_top">
-                        <g id="CollectPath">
-                            <path class="{{ collecting }}" d="M213.9,159.8l34.4-8.7c1.7-8.3,2.6-16.8,2.6-25.6c0-28.5-9.5-54.7-25.4-75.8L210.8,82l-35.6,7
-                                c7.5,10.2,11.9,22.8,11.9,36.4c0,3.7-0.3,7.3-1,10.8L213.9,159.8z" />
-                            <path class="st1" d="M215.4,91.9c0.2-0.4,0.6-0.6,1.1-0.6c2.3,0,4.7,0,7,0c0.4,0,0.8,0.2,1,0.5c0.4,0.5,0.3,1.2-0.1,1.6
-                                c-0.2,0.2-0.5,0.3-0.8,0.3c-0.2,0-0.5,0-0.7,0.1c-0.2,0.1-0.3,0.2-0.3,0.4c0,1.6,0,3.1,0,4.7c0,0.8,0.1,1.6,0.4,2.4
-                                c0.2,0.4,0.4,0.8,0.6,1.2c0.6,1.1,1.2,2.1,1.8,3.2c-3.7,0-7.4,0-11.1,0c0.7-1.2,1.4-2.5,2-3.7c0.3-0.5,0.5-1,0.6-1.6
-                                c0.1-0.5,0.2-1,0.2-1.5c0-1.6,0-3.2,0-4.8c0-0.3-0.3-0.5-0.5-0.5c-0.3,0-0.5,0-0.7-0.1c-0.3-0.1-0.5-0.3-0.6-0.5
-                                C215.2,92.8,215.2,92.3,215.4,91.9z" />
-                            <path class="st1" d="M213.8,106.8c4.1,0,8.2,0,12.4,0c0.7,1.3,1.5,2.6,2.2,3.9c0.2,0.3,0.3,0.6,0.4,0.9c0.3,1-0.4,2.2-1.4,2.6
-                                c-0.3,0.1-0.5,0.1-0.8,0.1c-4.4,0-8.8,0-13.2,0c-0.6,0-1.1-0.2-1.6-0.6c-0.5-0.5-0.8-1.4-0.6-2.1c0.1-0.3,0.2-0.5,0.4-0.8
-                                C212.3,109.4,213.1,108.1,213.8,106.8z" />
-                        </g>
-                    </a>
-                    <a xlink:href="./sharing" target="_top">
-                        <g id="SharePath">
-                            <path class="{{ sharing }}" d="M29.8,127.8l35.1,9c-0.7-3.7-1.1-7.5-1.1-11.4c0-13.4,4.3-25.9,11.6-36L60.6,56.3l-34.8-7
-                                C9.6,70.4,0,96.8,0,125.5c0,8.6,0.9,17,2.5,25.1L29.8,127.8z" />
-                            <path class="st1" d="M42.7,75c0.7-0.1,1.5-0.1,2.2,0.3c1,0.4,1.7,1.3,2,2.3c0.2,0.6,0.1,1.4-0.1,2c-0.4,1.1-1.3,2-2.4,2.4
-                                c-0.4,0.1-0.8,0.1-1.3,0.1c-0.6-0.1-1.1-0.2-1.6-0.5c-1.1,0.6-2.2,1.2-3.3,1.8c-0.2,0.1-0.3,0.2-0.5,0.3c-0.8,0.4-1.5,0.9-2.3,1.3
-                                c0.1,0.4,0.2,0.8,0.2,1.2c0,0.4-0.1,0.8-0.2,1.1c0.8,0.4,1.5,0.9,2.3,1.3c0.2,0.1,0.3,0.2,0.5,0.3c1,0.6,2,1.1,3,1.7
-                                c0.5-0.4,1.1-0.7,1.8-0.7c0.8-0.1,1.6,0.1,2.3,0.5c1,0.6,1.7,1.7,1.7,2.8c0,0.7-0.1,1.4-0.4,1.9c-0.3,0.6-0.8,1.1-1.4,1.4
-                                c-0.3,0.2-0.7,0.3-1,0.4c-0.6,0.1-1.3,0.1-1.9-0.2c-0.5-0.2-0.9-0.4-1.3-0.8c-0.6-0.5-1-1.3-1.1-2.1c-0.1-0.6,0-1.2,0.2-1.8
-                                c-0.7-0.4-1.4-0.8-2.2-1.2c-0.4-0.2-0.7-0.4-1-0.5c-0.8-0.5-1.7-0.9-2.5-1.4c-0.5,0.4-1.1,0.7-1.7,0.8c-0.8,0.2-1.7,0-2.5-0.4
-                                c-0.6-0.4-1.1-0.9-1.4-1.5c-0.4-0.7-0.5-1.5-0.3-2.3c0.1-0.6,0.4-1.1,0.7-1.6c0.4-0.5,1-0.9,1.7-1.2c0.6-0.2,1.3-0.3,2-0.1
-                                c0.6,0.1,1.1,0.4,1.5,0.8c1.1-0.6,2.2-1.2,3.3-1.8c0.1-0.1,0.3-0.1,0.4-0.2c0.7-0.4,1.4-0.8,2.2-1.2c-0.7-1.3-0.4-3.1,0.7-4.1
-                                C41.4,75.5,42,75.2,42.7,75z" />
-                        </g>
-                    </a>
-                    <text transform="matrix(1 0 0 1 16.4197 111.8653)" class="st1 st8 st9">Share</text>
-                    <text transform="matrix(1 0 0 1 76.3974 53.4992)" class="st1 st8 st9">Reuse</text>
-                    <text transform="matrix(1 0 0 1 19.2957 187.4998)" class="st1 st8 st9">Preserve</text>
-                    <text transform="matrix(1 0 0 1 90.1372 234.4302)" class="st1 st8 st9">Analyse</text>
-                    <text transform="matrix(1 0 0 1 162.3473 208.6529)" class="st1 st8 st9">Process</text>
-                    <text transform="matrix(1 0 0 1 159.7342 61.5168)" class="st1 st8 st9">Plan</text>
-                    <text transform="matrix(1 0 0 1 197.0817 128.9797)" class="st1 st8 st9">Collect</text>
-                </svg>
-            </li>
-            {%- else %}
-            {%- if page.url == subfolder.url %}
-            <li class="active">
-            {%- else %}
-            <li>
-            {%- endif %}
-            {%- if subfolder.external_url %}
-                <a title="{{subfolder.title}}" href="{{subfolder.external_url}}" target="_blank" rel="noopener">{{subfolder.title}}</a>
-            {%- else %}    
-                <a title="{{subfolder.title}}" href="{{subfolder.url | relative_url }}">{{ subfolder.title }}</a>
-            {%- endif %}
-            {%- if subfolder.subitems %}
-                <ul>
-                    {%- for subsubfolder in subfolder.subitems %}
-                    {%- if page.url == subsubfolder.url %}
-                    <li class="active">
-                    {%- else %}
-                    <li>
-                    {%- endif %}
-                    {%- if subsubfolder.external_url %}
-                        <a title="{{subsubfolder.title}}" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{{subsubfolder.title}}</a>
-                    {%- else %}    
-                        <a title="{{subsubfolder.title}}" href="{{subsubfolder.url | relative_url }}">{{ subsubfolder.title }}</a>
-                    {%- endif %}
-                    </li>
-                    {%- endfor %}
-                </ul>
-            {%- endif %}
-            {%- endif %}
-            </li>
-            {%- endfor %}
-        </ul>
-    {%- endif %}
-    </li>
-    {%- endfor %}
-</ul>
-<script>$("li.active").parents('li').toggleClass("active parent");</script>
+<button class="d-lg-none collapsed sidebar-collapse btn-custom w-100 mb-4" type="button" data-bs-toggle="collapse" data-bs-target="#side-nav" aria-controls="side-nav" aria-expanded="true" aria-label="Toggle navigation">
+    {{ page.sidebar | capitalize }} menu <i title="navbar-toggler" class="fa fa-bars ms-2"></i>
+</button>
+
+<div class="collapse" id="side-nav" aria-label="Side navigation">
+    <ul id="menu" class="menu list-unstyled mb-4 mb-lg-0">
+        {% if sidebar.title or sidebar.version %}
+        <li class="sidebarTitle">{{sidebar.title}} {{sidebar.version}}</li>
+        {% endif %}
+        {%- for folder in sidebar.subitems %}
+        {%- if page.url == folder.url %}
+        <li class="active{%- if folder.hr %} hr-margin{% endif %}">
+        {%- else %}
+        <li {%- if folder.hr %} class="hr-margin"{% endif %}>
+        {%- endif %}
+        {%- if folder.external_url %}
+            <a title="{{folder.title}}" href="{{folder.external_url}}" target="_blank" rel="noopener">{{folder.title}}</a>
+        {%- else %}    
+            <a title="{{folder.title}}" href="{{folder.url | relative_url }}">{{ folder.title }}</a>
+        {%- endif %}
+        {%- if folder.subitems %}
+            <ul class="list-unstyled">
+                {%- for subfolder in folder.subitems %}
+                {%- if subfolder.RDM -%}
+                {%- if site.RDM_pages contains page.url %}
+                <li class="active sidebar_rdm_sub">
+                {% else %}
+                <li class="sidebar_rdm_sub">
+                {% endif %}
+                    <svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250.9 251"
+                        style="enable-background:new 0 0 250.9 251;" xml:space="preserve" class="sidebar_rdm">
+                        <style type="text/css">
+                            .st10,.st12,.st13,.st14,.st15,.st16,.st17 {fill:#83858e;}
+                            .st1{fill:#FFFFFF; pointer-events: none;}
+                            .st0{fill:#FA484B;}
+                            .st5{fill:#F67028;}
+                            .st6{fill:#FAC54B;}
+                            .st4{fill:#8ABA56;}
+                            .st3{fill:#32B890;}
+                            .st2{fill:#4176A5;}
+                            .st7{fill:#9E51AD;}
+                            .st8{font-family: 'Exo 2', sans-serif;}
+                            .st9{font-size:13.5px;}
+                            .st0,.st2,.st3,.st4,.st5,.st6,.st7 {transition: fill 0.3s;}
+                            .st10:hover{fill:#FA484B;cursor: pointer;}
+                            .st15:hover{fill:#F67028;cursor: pointer;}
+                            .st16:hover{fill:#FAC54B;cursor: pointer;}
+                            .st14:hover{fill:#8ABA56;cursor: pointer;}
+                            .st13:hover{fill:#32B890;cursor: pointer;}
+                            .st12:hover{fill:#4176A5;cursor: pointer;}
+                            .st17:hover{fill:#9E51AD;cursor: pointer;}
+                            text {pointer-events : none;}
+                        </style>
+                        <a xlink:href="./reusing" target="_top">
+                            <g id="ReusePath">
+                                <path class="{{ reusing }}" d="M63.9,52.1l14.9,33.1c10.7-12.4,26.2-20.5,43.6-21.3l16.7-32.3L122.9,0C85.3,0.8,51.7,18.1,29.2,45L63.9,52.1z
+                                    " />
+                                <path class="st1" d="M92.5,17.4c2-0.9,4.1-1.3,6.3-1.3c0.2,0,0.4,0.1,0.5,0.3c0.2,0.2,0.2,0.6,0,0.8c-0.1,0.2-0.4,0.3-0.6,0.4
+                                    c-0.4,0.2-0.8,0.3-1.1,0.5c-0.3,0.2-0.6,0.3-0.9,0.5c-0.6,0.4-1.2,0.8-1.7,1.2c-0.8,0.7-1.5,1.4-2,2.3c-1,1.5-1.6,3.2-1.8,5
+                                    c1.1,0,2.2,0,3.3,0c0.3,0,0.5,0.1,0.6,0.4c0.1,0.2,0.1,0.4,0,0.6c-0.1,0.2-0.3,0.4-0.5,0.6c-1.9,2.1-3.9,4.3-5.8,6.4
+                                    c-0.2,0.2-0.5,0.3-0.8,0.2c-0.1-0.1-0.2-0.2-0.3-0.3c-1.9-2.1-3.9-4.3-5.8-6.5c-0.2-0.2-0.5-0.5-0.4-0.8c0-0.4,0.3-0.7,0.7-0.7
+                                    c1.1,0,2.3,0,3.4,0c0.2-1.9,0.8-3.7,1.8-5.2C88.7,20,90.5,18.4,92.5,17.4z" />
+                                <path class="st1" d="M104.5,19.1c0.3-0.3,0.8-0.3,1,0c2,2.2,3.9,4.4,5.9,6.5c0.2,0.2,0.5,0.5,0.4,0.8c0,0.4-0.4,0.7-0.7,0.7
+                                    c-1.1,0-2.3,0-3.4,0c-0.2,2.3-1.1,4.4-2.5,6.2c-1.3,1.7-3.2,3-5.2,3.8c-0.6,0.2-1.2,0.4-1.8,0.6c-1.2,0.3-2.4,0.4-3.7,0.4
+                                    c-0.4,0-0.7-0.5-0.6-0.9c0.1-0.1,0.1-0.3,0.3-0.4c0.5-0.3,1.1-0.5,1.6-0.8c0.6-0.4,1.3-0.7,1.9-1.2c0.9-0.7,1.7-1.5,2.4-2.4
+                                    c0.5-0.7,0.9-1.5,1.3-2.3c0.4-1,0.7-2,0.8-3.1c-1.1,0-2.3,0-3.5,0c-0.4,0-0.8-0.4-0.7-0.8c0-0.3,0.3-0.5,0.5-0.8
+                                    C100.6,23.4,102.6,21.2,104.5,19.1z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./preserving" target="_top">
+                            <g id="PreservePath">
+                                <path class="{{ preserving }}" d="M67.6,201.7l29-21.8c-14.7-7.8-25.8-21.4-30.4-37.8L31,133L3.8,155.8c8.8,35.5,32.8,65.1,64.7,81.4L67.6,201.7
+                                    z" />
+                                <path class="st1" d="M48.4,150.2c1.8,0,3.6,0.1,5.3,0.4c1,0.2,2.1,0.5,3.1,0.9c0.6,0.3,1.2,0.6,1.7,1c0.3,0.3,0.5,0.6,0.6,1
+                                    c0,0.4-0.1,0.7-0.3,1c-0.3,0.4-0.8,0.8-1.3,1c-0.8,0.4-1.7,0.7-2.5,0.9c-1.4,0.4-2.9,0.5-4.4,0.6c-2.3,0.1-4.7,0-7-0.5
+                                    c-1-0.2-1.9-0.5-2.8-0.9c-0.6-0.3-1.1-0.6-1.5-1.1c-0.2-0.3-0.4-0.7-0.4-1c0-0.4,0.3-0.8,0.6-1.1c0.7-0.6,1.5-0.9,2.4-1.2
+                                    c1.2-0.4,2.5-0.6,3.8-0.8C46.6,150.3,47.5,150.3,48.4,150.2z" />
+                                <path class="st1" d="M38.9,157.1c1.2,0.8,2.6,1.2,4,1.5c2.1,0.5,4.3,0.6,6.4,0.6c1,0,2-0.1,3.1-0.2c2-0.2,4-0.6,5.8-1.4
+                                    c0.4-0.2,0.7-0.3,1-0.6c0,1.4,0,2.8,0,4.2c0,0.3-0.1,0.7-0.3,0.9c-0.3,0.4-0.7,0.7-1.2,0.9c-0.3,0.2-0.5,0.3-0.8,0.4
+                                    c-1.6,0.6-3.3,0.9-4.9,1.1c-1.9,0.2-3.8,0.2-5.7,0c-1.3-0.1-2.5-0.3-3.7-0.7c-1-0.3-2-0.6-2.8-1.3c-0.3-0.3-0.7-0.6-0.8-1
+                                    c0-0.1,0-0.3,0-0.4C38.9,159.8,38.9,158.4,38.9,157.1z" />
+                                <path class="st1" d="M38.9,164.8c0.5,0.3,1,0.5,1.6,0.8c1.9,0.7,3.9,1.1,5.9,1.2c1.9,0.1,3.7,0.1,5.6,0c1.9-0.2,3.9-0.5,5.7-1.2
+                                    c0.5-0.2,1.1-0.5,1.6-0.8c0,1.4,0,2.8,0,4.2c0,0.2,0,0.3-0.1,0.5c-0.1,0.4-0.4,0.6-0.7,0.9c-0.7,0.6-1.6,0.9-2.4,1.2
+                                    c-0.6,0.2-1.3,0.4-1.9,0.5c-1.1,0.2-2.2,0.3-3.3,0.4c-0.9,0.1-1.8,0-2.7,0c-1.8-0.1-3.6-0.3-5.4-0.7c-1-0.3-2.1-0.7-3-1.4
+                                    c-0.3-0.2-0.5-0.5-0.7-0.8c-0.1-0.3-0.1-0.6-0.1-0.8C38.9,167.4,38.9,166.1,38.9,164.8z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./analysing" target="_top">
+                            <g id="AnalysePath">
+                                <path class="{{ analysing }}" d="M149,218.3l1-36.2c-7.5,3.3-15.8,5.1-24.5,5.1c-8.5,0-16.6-1.7-24-4.9l-29.1,21.8l0.9,35.5
+                                    c15.9,7.3,33.6,11.4,52.2,11.4c18.4,0,36-4,51.7-11.1L149,218.3z" />
+                                <path class="st1" d="M123.3,196c1.4,0,2.8,0,4.3,0c0.5,0,0.8,0.4,0.8,0.8c0,7.2,0,14.3,0,21.5c0,0.2-0.1,0.5-0.2,0.7
+                                    c-0.2,0.2-0.4,0.3-0.6,0.3c-1.4,0-2.8,0-4.1,0c-0.3,0-0.5-0.1-0.7-0.3c-0.1-0.2-0.2-0.4-0.2-0.6c0-7.2,0-14.3,0-21.5
+                                    C122.5,196.4,122.8,196,123.3,196z" />
+                                <path class="st1" d="M114.6,202.5c0.2,0,0.3,0,0.5,0c1.2,0,2.4,0,3.6,0c0.2,0,0.4,0,0.5,0.1c0.3,0.1,0.5,0.3,0.5,0.6
+                                    c0,0.1,0,0.3,0,0.4c0,5,0,9.9,0,14.9c0,0.5-0.4,0.9-0.8,0.9c-1.3,0-2.6,0-3.9,0c-0.2,0-0.4,0-0.6-0.1c-0.3-0.1-0.5-0.4-0.5-0.8
+                                    c0-5,0-10,0-15.1C114,202.9,114.2,202.6,114.6,202.5z" />
+                                <path class="st1" d="M106.3,208.7c1.4,0,2.9,0,4.3,0c0.4,0,0.8,0.4,0.8,0.8c0,2.9,0,5.8,0,8.8c0,0.3-0.1,0.6-0.4,0.8
+                                    c-0.2,0.1-0.4,0.2-0.5,0.2c-1.2,0-2.5,0-3.7,0c-0.3,0-0.6,0-0.8-0.1c-0.3-0.1-0.4-0.5-0.4-0.8c0-2.8,0-5.7,0-8.5
+                                    c0-0.2,0-0.4,0.1-0.6C105.6,209,105.9,208.7,106.3,208.7z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./processing" target="_top">
+                            <g id="ProcessPath">
+                                <path class="{{ processing }}" d="M211.7,165L184,141.6c-4.4,16.4-15.5,30.1-30.1,38.1l-1.1,36.3l28.3,21.5c31.9-16.2,56-45.6,65-81.1L211.7,165
+                                    z" />
+                                <path class="st1" d="M179.4,172.2c0.1,0,0.2,0,0.4,0c7,0,14,0,21,0c0.3,0,0.6,0,0.8,0.1c0.5,0.2,0.7,0.7,0.7,1.2
+                                    c0,4.3,0,8.6,0,12.8c0,0.4-0.1,0.7-0.3,1c-0.3,0.3-0.7,0.5-1.1,0.5c-7.1,0-14.1,0-21.2,0c-0.4,0-0.9-0.2-1.1-0.6
+                                    c-0.2-0.3-0.3-0.6-0.3-0.9c0-4.3,0-8.5,0-12.8c0-0.4,0.1-0.8,0.4-1C178.9,172.4,179.1,172.3,179.4,172.2z M184.3,178
+                                    c-0.3,0-0.7,0.2-1,0.4c-0.2,0.1-0.3,0.4-0.4,0.6c-0.4,0.6-0.4,1.4,0,2.1c0.4,0.6,1,0.9,1.6,1c0.5,0,1-0.1,1.4-0.4
+                                    c0.1-0.1,0.2-0.1,0.3-0.3c0.3-0.5,0.5-1.1,0.4-1.6c-0.1-0.6-0.5-1.2-1.1-1.5C185.2,178,184.8,178,184.3,178z M195.4,178
+                                    c-0.4,0.1-0.9,0.2-1.2,0.5c-0.3,0.4-0.5,0.8-0.5,1.3c-0.1,1,0.7,2,1.6,2.1c0.6,0.1,1.2-0.1,1.7-0.4c0.2-0.1,0.3-0.3,0.4-0.4
+                                    c0.3-0.5,0.4-1.1,0.2-1.6c-0.1-0.4-0.3-0.7-0.6-1C196.5,178.1,195.9,177.9,195.4,178z M189.8,178c-0.3,0-0.5,0.1-0.8,0.3
+                                    c-0.2,0.1-0.4,0.2-0.5,0.4c-0.4,0.6-0.5,1.3-0.3,1.9c0.2,0.6,0.6,1,1.2,1.3c0.6,0.3,1.3,0.1,1.9-0.2c0.1-0.1,0.3-0.1,0.4-0.3
+                                    c0.3-0.4,0.5-0.9,0.4-1.5c0-0.7-0.5-1.5-1.2-1.8C190.6,178,190.2,178,189.8,178z" />
+                                <path class="st1" d="M184.3,179.1c0.3-0.1,0.6,0,0.9,0.1c0.2,0.1,0.3,0.3,0.3,0.5c0.1,0.3,0,0.7-0.3,1c-0.4,0.4-1.3,0.2-1.5-0.4
+                                    C183.6,179.9,183.9,179.3,184.3,179.1z" />
+                                <path class="st1" d="M189.9,179.1c0.4-0.2,0.9,0.1,1.1,0.5c0.1,0.3,0.1,0.6,0,0.9c-0.2,0.3-0.5,0.4-0.8,0.4c-0.3,0-0.5-0.2-0.6-0.4
+                                    c-0.2-0.3-0.3-0.7-0.1-1C189.4,179.3,189.7,179.2,189.9,179.1z" />
+                                <path class="st1" d="M195.3,179.1c0.3-0.1,0.7,0,1,0.2c0.2,0.2,0.3,0.5,0.3,0.7c0,0.4-0.4,0.8-0.8,0.9c-0.3,0-0.6-0.1-0.8-0.3
+                                    c-0.2-0.2-0.3-0.5-0.2-0.8C194.8,179.5,195,179.2,195.3,179.1z" />
+                                <path class="st1" d="M186.8,189c0.9,0,1.7,0,2.6,0c1.3,0,2.7,0,4,0c0.2,0,0.5,0.1,0.5,0.4c0.3,0.9,0.6,1.9,0.9,2.8
+                                    c0.1,0.2,0.1,0.4,0.3,0.6c0.1,0.1,0.3,0.1,0.4,0.1c0.7,0,1.4,0,2.1,0c0.2,0,0.4,0,0.5,0.2c0.3,0.3,0.1,0.7-0.2,0.8
+                                    c-0.1,0-0.2,0-0.3,0c-5,0-10.1,0-15.1,0c-0.3,0-0.6-0.3-0.5-0.6c0-0.3,0.3-0.5,0.6-0.5c0.7,0,1.5,0,2.2,0c0.3,0,0.5-0.2,0.6-0.4
+                                    c0.3-0.9,0.6-1.9,0.9-2.8c0.1-0.2,0.1-0.3,0.2-0.5C186.5,189,186.7,189,186.8,189z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./planning" target="_top">
+                            <g id="PlanPath">
+                                <path class="{{ planning }}"
+                                    d="M144.4,31.6l-16.6,32.3c17.5,0.7,33.2,8.6,44,20.9l35.7-7l14.6-32.4C199.6,18.3,166,0.8,128.2,0L144.4,31.6z" />
+                                <path class="st1"
+                                    d="M166.7,24.1c0.3-0.4,0.8-0.6,1.4-0.6c4.7,0,9.4,0,14.1,0c0.5,0,1,0.2,1.4,0.6c0.3,0.3,0.4,0.7,0.4,1.2
+                                    c0,1,0,2,0,3c-0.3,0.3-0.5,0.5-0.8,0.8c-2.6,2.6-5.3,5.3-7.9,7.9c-0.1,0.1-0.3,0.3-0.3,0.5c-0.4,1.6-0.8,3.1-1.2,4.7
+                                    c0,0.2-0.1,0.4,0,0.5c0.1,0.2,0.4,0.3,0.7,0.3c1.6-0.4,3.2-0.8,4.7-1.3c0.2,0,0.3-0.1,0.4-0.3c1.5-1.5,3-3,4.5-4.5
+                                    c0,2.5,0,5.1,0,7.6c0,0.4-0.1,0.8-0.3,1.1c-0.3,0.4-0.9,0.7-1.4,0.7c-4.7,0-9.4,0-14.1,0c-0.3,0-0.7,0-1-0.2
+                                    c-0.3-0.2-0.6-0.4-0.7-0.8c-0.1-0.3-0.2-0.6-0.2-0.9c0-6.4,0-12.8,0-19.2C166.3,24.8,166.4,24.4,166.7,24.1z" />
+                                <path class="st1" d="M185.5,28.4c0.5-0.3,1.2-0.4,1.7-0.1c0.3,0.2,0.6,0.4,0.8,0.7c0.5,0.6,0.6,1.5,0.1,2.1
+                                    c-0.1,0.2-0.3,0.4-0.5,0.5c-0.9-0.9-1.8-1.8-2.7-2.7C185.1,28.7,185.3,28.5,185.5,28.4z" />
+                                <path class="st1" d="M176.3,37.5c2.6-2.6,5.2-5.2,7.8-7.8c0.9,0.9,1.8,1.8,2.7,2.7c-2.6,2.6-5.2,5.2-7.8,7.8
+                                    C178.1,39.3,177.2,38.4,176.3,37.5z" />
+                                <path class="st1"
+                                    d="M175.8,38.6l0.1,0.1c0.7,0.7,1.3,1.3,2,2c-1,0.3-1.9,0.5-2.9,0.8C175.3,40.6,175.6,39.6,175.8,38.6z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./collecting" target="_top">
+                            <g id="CollectPath">
+                                <path class="{{ collecting }}" d="M213.9,159.8l34.4-8.7c1.7-8.3,2.6-16.8,2.6-25.6c0-28.5-9.5-54.7-25.4-75.8L210.8,82l-35.6,7
+                                    c7.5,10.2,11.9,22.8,11.9,36.4c0,3.7-0.3,7.3-1,10.8L213.9,159.8z" />
+                                <path class="st1" d="M215.4,91.9c0.2-0.4,0.6-0.6,1.1-0.6c2.3,0,4.7,0,7,0c0.4,0,0.8,0.2,1,0.5c0.4,0.5,0.3,1.2-0.1,1.6
+                                    c-0.2,0.2-0.5,0.3-0.8,0.3c-0.2,0-0.5,0-0.7,0.1c-0.2,0.1-0.3,0.2-0.3,0.4c0,1.6,0,3.1,0,4.7c0,0.8,0.1,1.6,0.4,2.4
+                                    c0.2,0.4,0.4,0.8,0.6,1.2c0.6,1.1,1.2,2.1,1.8,3.2c-3.7,0-7.4,0-11.1,0c0.7-1.2,1.4-2.5,2-3.7c0.3-0.5,0.5-1,0.6-1.6
+                                    c0.1-0.5,0.2-1,0.2-1.5c0-1.6,0-3.2,0-4.8c0-0.3-0.3-0.5-0.5-0.5c-0.3,0-0.5,0-0.7-0.1c-0.3-0.1-0.5-0.3-0.6-0.5
+                                    C215.2,92.8,215.2,92.3,215.4,91.9z" />
+                                <path class="st1" d="M213.8,106.8c4.1,0,8.2,0,12.4,0c0.7,1.3,1.5,2.6,2.2,3.9c0.2,0.3,0.3,0.6,0.4,0.9c0.3,1-0.4,2.2-1.4,2.6
+                                    c-0.3,0.1-0.5,0.1-0.8,0.1c-4.4,0-8.8,0-13.2,0c-0.6,0-1.1-0.2-1.6-0.6c-0.5-0.5-0.8-1.4-0.6-2.1c0.1-0.3,0.2-0.5,0.4-0.8
+                                    C212.3,109.4,213.1,108.1,213.8,106.8z" />
+                            </g>
+                        </a>
+                        <a xlink:href="./sharing" target="_top">
+                            <g id="SharePath">
+                                <path class="{{ sharing }}" d="M29.8,127.8l35.1,9c-0.7-3.7-1.1-7.5-1.1-11.4c0-13.4,4.3-25.9,11.6-36L60.6,56.3l-34.8-7
+                                    C9.6,70.4,0,96.8,0,125.5c0,8.6,0.9,17,2.5,25.1L29.8,127.8z" />
+                                <path class="st1" d="M42.7,75c0.7-0.1,1.5-0.1,2.2,0.3c1,0.4,1.7,1.3,2,2.3c0.2,0.6,0.1,1.4-0.1,2c-0.4,1.1-1.3,2-2.4,2.4
+                                    c-0.4,0.1-0.8,0.1-1.3,0.1c-0.6-0.1-1.1-0.2-1.6-0.5c-1.1,0.6-2.2,1.2-3.3,1.8c-0.2,0.1-0.3,0.2-0.5,0.3c-0.8,0.4-1.5,0.9-2.3,1.3
+                                    c0.1,0.4,0.2,0.8,0.2,1.2c0,0.4-0.1,0.8-0.2,1.1c0.8,0.4,1.5,0.9,2.3,1.3c0.2,0.1,0.3,0.2,0.5,0.3c1,0.6,2,1.1,3,1.7
+                                    c0.5-0.4,1.1-0.7,1.8-0.7c0.8-0.1,1.6,0.1,2.3,0.5c1,0.6,1.7,1.7,1.7,2.8c0,0.7-0.1,1.4-0.4,1.9c-0.3,0.6-0.8,1.1-1.4,1.4
+                                    c-0.3,0.2-0.7,0.3-1,0.4c-0.6,0.1-1.3,0.1-1.9-0.2c-0.5-0.2-0.9-0.4-1.3-0.8c-0.6-0.5-1-1.3-1.1-2.1c-0.1-0.6,0-1.2,0.2-1.8
+                                    c-0.7-0.4-1.4-0.8-2.2-1.2c-0.4-0.2-0.7-0.4-1-0.5c-0.8-0.5-1.7-0.9-2.5-1.4c-0.5,0.4-1.1,0.7-1.7,0.8c-0.8,0.2-1.7,0-2.5-0.4
+                                    c-0.6-0.4-1.1-0.9-1.4-1.5c-0.4-0.7-0.5-1.5-0.3-2.3c0.1-0.6,0.4-1.1,0.7-1.6c0.4-0.5,1-0.9,1.7-1.2c0.6-0.2,1.3-0.3,2-0.1
+                                    c0.6,0.1,1.1,0.4,1.5,0.8c1.1-0.6,2.2-1.2,3.3-1.8c0.1-0.1,0.3-0.1,0.4-0.2c0.7-0.4,1.4-0.8,2.2-1.2c-0.7-1.3-0.4-3.1,0.7-4.1
+                                    C41.4,75.5,42,75.2,42.7,75z" />
+                            </g>
+                        </a>
+                        <text transform="matrix(1 0 0 1 16.4197 111.8653)" class="st1 st8 st9">Share</text>
+                        <text transform="matrix(1 0 0 1 76.3974 53.4992)" class="st1 st8 st9">Reuse</text>
+                        <text transform="matrix(1 0 0 1 19.2957 187.4998)" class="st1 st8 st9">Preserve</text>
+                        <text transform="matrix(1 0 0 1 90.1372 234.4302)" class="st1 st8 st9">Analyse</text>
+                        <text transform="matrix(1 0 0 1 162.3473 208.6529)" class="st1 st8 st9">Process</text>
+                        <text transform="matrix(1 0 0 1 159.7342 61.5168)" class="st1 st8 st9">Plan</text>
+                        <text transform="matrix(1 0 0 1 197.0817 128.9797)" class="st1 st8 st9">Collect</text>
+                    </svg>
+                </li>
+                {%- else %}
+                {%- if page.url == subfolder.url %}
+                <li class="active">
+                {%- else %}
+                <li>
+                {%- endif %}
+                {%- if subfolder.external_url %}
+                    <a title="{{subfolder.title}}" href="{{subfolder.external_url}}" target="_blank" rel="noopener">{{subfolder.title}}</a>
+                {%- else %}    
+                    <a title="{{subfolder.title}}" href="{{subfolder.url | relative_url }}">{{ subfolder.title }}</a>
+                {%- endif %}
+                {%- if subfolder.subitems %}
+                    <ul class="list-unstyled">
+                        {%- for subsubfolder in subfolder.subitems %}
+                        {%- if page.url == subsubfolder.url %}
+                        <li class="active">
+                        {%- else %}
+                        <li>
+                        {%- endif %}
+                        {%- if subsubfolder.external_url %}
+                            <a title="{{subsubfolder.title}}" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{{subsubfolder.title}}</a>
+                        {%- else %}    
+                            <a title="{{subsubfolder.title}}" href="{{subsubfolder.url | relative_url }}">{{ subsubfolder.title }}</a>
+                        {%- endif %}
+                        </li>
+                        {%- endfor %}
+                    </ul>
+                {%- endif %}
+                {%- endif %}
+                </li>
+                {%- endfor %}
+            </ul>
+        {%- endif %}
+        </li>
+        {%- endfor %}
+    </ul>
+    <script>$("li.active").parents('li').toggleClass("active parent");</script>
+</div>
diff --git a/_includes/topnav.html b/_includes/topnav.html
index 09dd77fe4..4a505b9cd 100644
--- a/_includes/topnav.html
+++ b/_includes/topnav.html
@@ -1,6 +1,6 @@
 <!-- Navigation -->
 <header>
-    <nav class="navbar navbar-expand-lg">
+    <nav class="navbar navbar-expand-lg mb-2 mb-lg-5">
         <div class="container">
             <a class="navbar-brand" href="{{ 'index.html' | relative_url }}"><img alt="ELIXIR logo" src="{{ 'assets/img/RDMkit_logo_inverted.svg' | relative_url }}"></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
diff --git a/_layouts/default.html b/_layouts/default.html
index 87257b00a..1dd6d496f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -28,10 +28,10 @@
     <div class="container">
         <div id="main">
             <!-- Content Row -->
-            <div class="row">
+            <div class="row gx-0 gx-lg-5">
                 {%- assign content_col_size = "col-lg-12" %}{% unless page.hide_sidebar %}
                 <!-- Sidebar Column -->
-                <div class="col-lg-3 container-menu">
+                <div class="col-lg-3">
                     {% include sidebar.html %}
                 </div>
                 {%- assign content_col_size = "col-lg-9" %}{% endunless %}
diff --git a/assets/css/main.css b/assets/css/main.css
index 189988a5a..dec6f8bc6 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -28,6 +28,7 @@ body {
     font-family: 'Exo 2', sans-serif;
     font-size: 3.5em;
     font-weight: 400;
+    margin-bottom: 0.5em;
 }
 
 @media (max-width:992px) {
@@ -151,7 +152,6 @@ pre code {
 /*-----Top navigation-----*/
 
 .navbar {
-    margin-bottom: 40px;
     background-color: var(--nav-bg);
 }
 
@@ -252,17 +252,41 @@ figcaption {
 
 /*-----Sidebar-----*/
 
+@media (min-width: 992px) {
+    #side-nav {
+        display: block !important;
+    }
+}
+
+@media (max-width: 992px) {
+    button[aria-expanded="true"]+#side-nav {
+        margin-top: -1.5em;
+    }
+}
+
+.sidebar-collapse i {
+    font-size: 1.25rem;
+    float: right;
+    line-height: 1.25em;
+}
+
+.sidebar-collapse:not(.collapsed) {
+    color: var(--nav-color);
+    background-color: var(--nav-bg);
+}
+
 .sidebarTitle {
     margin: 11px 0px;
     font-weight: 800;
     font-size: 1.3em;
 }
 
-.container-menu li {
-    list-style: none;
+.menu ul {
+    display: none;
+    padding-left: 0;
 }
 
-.container-menu li a {
+.menu li a {
     margin-top: 4px;
     color: var(--main-text-color);
     background-color: var(--light-grey);
@@ -272,19 +296,15 @@ figcaption {
     border-radius: 4px;
 }
 
-.container-menu ul {
-    padding-left: 0;
+.menu li a:hover {
+    background-color: var(--primary-theme-color);
+    color: var(--white-text);
 }
 
 .hr-margin {
     margin-top: 20px;
 }
 
-.menu li a:hover {
-    background-color: var(--primary-theme-color);
-    color: var(--white-text);
-}
-
 .menu ul li a {
     padding-left: 30px;
     background-color: transparent;
@@ -299,10 +319,6 @@ figcaption {
     color: var(--white-text);
 }
 
-.menu ul {
-    display: none;
-}
-
 .menu li>a>span {
     float: right;
     font-size: 1.5em;
@@ -317,12 +333,6 @@ figcaption {
     content: '+';
 }
 
-@media (min-width:992px) {
-    .menu {
-        margin-right: 30px;
-    }
-}
-
 /* RDM wheel in sidebar */
 
 .sidebar_rdm {
@@ -390,18 +400,15 @@ li ul .sidebar_rdm_sub {
     list-style: circle outside;
 }
 
-/* Extra space if the toc is followed by a paragraph */
-
-#toc+p {
-    margin-top: 1.75em;
-}
-
 /*-----Table properties-----*/
 
 table {
     display: block;
     overflow-x: auto;
     overflow-y: hidden;
+}
+
+table, .dataTables_wrapper {
     margin: 40px 0 20px;
 }
 
@@ -613,7 +620,6 @@ h2.card-title {
 
 /*-----Social icons-----*/
 
-
 .social-icons a {
     background-color: var(--main-bg-color);
     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
@@ -640,7 +646,6 @@ h2.card-title {
     #contributors-carousel .card-body {
         padding: 0.5rem 0.5rem;
     }
-
     #contributors-carousel .card-title {
         font-size: 0.5em
     }