Add a menu in the sidebar
This menu is hidden, it will be used once we have the necessity to have
others pages.
MODIFY
website/src/_includes/layouts/base.njk
website/src/_includes/layouts/base.njk
<span class="logo-text">Rome</span>
</a>
</div>
+ <nav class="menu">
+ <ul>
+ <li>
+ <a href="#">Item 1</a>
+ </li>
+ <li>
+ <a href="#">Item 2</a>
+ </li>
+ <li>
+ <a href="#">Item 3</a>
+ </li>
+ <li>
+ <a href="#">Item 4</a>
+ </li>
+ <ul>
+ </nav>
<div class="table-of-contents">
<div class="toc-container">
{{ content | toc(tags=['h1', 'h2'], wrapperClass='fixed toc') | safe }}

MODIFY
website/src/styles/_header.scss
website/src/styles/_header.scss
// so i can align the website in the middle of the page
.header-mobile {
- z-index: 2;
+ z-index: 3;
background-color: #ffffff;
height: $unit * 4;
display: none;
}
.header-desktop{
- z-index: 2;
background-color: #ffffff;
height: $unit * 4;
display: flex;

MODIFY
website/src/styles/_table-of-contents.scss
website/src/styles/_table-of-contents.scss
a {
text-decoration: none;
height: auto;
- padding: $unit / 4 $unit / 2;
+ padding: $unit / 5 $unit / 2;
margin-left: $unit / 2;
border-radius: 2px;
display: inline-block;

MODIFY
website/src/styles/index.scss
website/src/styles/index.scss
font-size: 0.9rem;
padding: $unit;
padding-right: 0;
- padding-top: $unit * 2;
position: sticky;
top: 0;
height: 100vh;
@include top-border;
border-top-width: 0;
transition-duration: 150ms;
+ padding-top: $unit * 2;
}
@include mobile-only() {
transform: translateX(-100%);
position: fixed;
min-width: 256px;
- top: 64px;
+ padding-top: 64px + $unit;
&.visible {
transform: translateX(0);
width: 100%;
}
}
+
+.menu {
+ padding-bottom: $unit;
+ border-bottom: 1px solid #e8e8e8;
+ margin-bottom: $unit;
+ font-weight: bold;
+ display: none;
+ ul{
+ margin: 0;
+ padding: 0;
+ }
+
+ li{
+ list-style-type: none;
+ }
+
+ a{
+ @include transition-timing;
+ text-decoration: none;
+ font-size: 1.1em;
+ transition-duration: 100ms;
+ height: auto;
+ padding: $unit / 5 $unit / 2;
+ margin-left: $unit / 2;
+ display: inline-block;
+ }
+
+ a:hover{
+ padding-left: $unit / 1.5;
+ text-decoration: dashed;
+ color: $gray-5;
+ }
+
+ a:active{
+ padding-left: $unit / 1.5;
+ text-decoration: dashed;
+ color: $gray-6;
+ }
+
+}
\ No newline at end of file

Add a menu in the sidebar

This menu is hidden, it will be used once we have the necessity to have
others pages.