How to rotate a sidebar nav menu as in the model? - html

Question

I'll explain what I'm looking for. At the moment, I created the entire layout with a CSS grid, I just missed the sidenavbar (example on the first link), but I don't know how to make a list fit in the grid, once I transform: rotate my element it goes away from the screen.
This is the model:
This is where I stand at the moment.
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght#100&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: medium;
font-family: noto;
}
:root {
/* colors */
--colNoirPhoto: #181818;
--col1: #2F4858;
--col2: #165B6F;
--col3: #00707E;
--col4: #008483;
--col5: #00987D;
--col6: #04AA6D;
--alt1: #0BE0BA;
--alt2: #00BFC9;
--alt3: #ffffff;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
/*side nav bar*/
.sidebar {
display: flex;
position: fixed;
width: 10%;
height: 100%;
color: var(--alt3);
}
/* top content--------------------------------------------------------------------------------*/
.topcontainer {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
background-color: var(--colNoirPhoto);
margin-top: 7%;
width: 100%;
height: 20vh;
padding-left: 2vh;
}
.titretopcontainer {
color: var(--alt3);
display: flex;
flex-direction: column;
justify-content: center;
}
.tiretopcontainer h1 {
font-size: 18px;
}
.topcontainer img {
display: flex;
flex-direction: row;
align-items: center;
width: 88%;
grid-row-start: 1;
grid-column-start: 2;
}
/* fin detop content--------------------------------------------------------------------------------*/
/* biographie content--------------------------------------------------------------------------------*/
.containerAllContent {
display: grid;
grid-template-columns: 10% 90%;
background-image: url(/background\ page\ content.png);
}
.separateurdechapitre1 {
display: flex;
padding-left: 1vh;
padding-right: 1vh;
padding-top: 1vh;
background-color: var(--col1);
height: 5vh;
color: var(--alt3);
grid-column-start: 2;
}
.separateurdechapitre2 {
display: flex;
padding-left: 1vh;
padding-right: 1vh;
padding-top: 1vh;
background-color: var(--col2);
height: 5vh;
color: var(--alt3);
grid-column-start: 2;
}
.separateurdechapitre3 {
display: flex;
padding-left: 1vh;
padding-right: 1vh;
padding-top: 1vh;
background-color: var(--col3);
height: 5vh;
color: var(--alt3);
grid-column-start: 2;
}
.separateurdechapitre4 {
display: flex;
padding-left: 1vh;
padding-right: 1vh;
padding-top: 1vh;
background-color: var(--col4);
height: 5vh;
color: var(--alt3);
grid-column-start: 2;
}
.content {
padding-left: 2vh;
padding-right: 2vh;
padding-top: 2vh;
padding-bottom: 2vh;
grid-column-start: 2;
}
/* fin de biographie content--------------------------------------------------------------------------------*/
p {
color: black;
}
footer {
background-color: var(--col1);
}
<main>
<div class="topcontainer">
<div class="titretopcontainer">
<h1>John Conway
</h1>
<h2> Créateur du jeu de la vie
</h2>
</div>
<img src="/Photo de John Conway.png" alt="Photo de John Conway">
</div>
<div class="containerAllContent">
<div class="sidebar">
<a href="">Biographie
</a>
<a href="">Réalisations
</a>
<a href="">Distinctions
</a>
<a href="">Voir aussi
</a>
</div>
<div class="separateurdechapitre1">
<h6>En quelques lignes
</h6>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto laudantium, temporibus nemo possimus inventore
soluta amet exercitationem cumque nobis quasi?
</p>
</div>
<div class="separateurdechapitre2">
<h6>En quelques lignes
</h6>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto laudantium, temporibus nemo possimus inventore
soluta amet exercitationem cumque nobis quasi?
</p>
</div>
<div class="separateurdechapitre3">
<h6>En quelques lignes
</h6>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto laudantium, temporibus nemo possimus inventore
soluta amet exercitationem cumque nobis quasi?
</p>
</div>
<div class="separateurdechapitre4">
<h6>En quelques lignes
</h6>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Architecto laudantium, temporibus nemo possimus inventore
soluta amet exercitationem cumque nobis quasi?
</p>
</div>
</div>
</main>
<footer>
<p>-
</p>
</footer>

Answer 1

Reading your question, I did not fully understand:
If you want your sidebar menu to be aligned vertically instead of horizontally as before.
Or whether you want the menu text to be laid out vertically.
Solution for 1.:
This can be done by setting the CSS property's flex-direction value to column for the element <div class="sidebar">.
CSS
.sidebar {
display: flex;
flex-direction: column;
position: fixed;
width: 10%;
height: 100%;
color: var(--alt3);
}
Solution for 2.:
This can be done by setting the CSS property's writing-mode value to vertical-lr for the element <div class="sidebar">.
CSS
.sidebar {
display: flex;
writing-mode: vertical-lr;
position: fixed;
width: 10%;
height: 100%;
color: var(--alt3);
}