making a navbar responsive using css and html

Question

i have a problem with a website am curntly working on the html is this

 "`<header class="header">
        <button class="burger-switch"></button>
        <img src="assets/logo.svg" alt="" class="logo">
        <nav class="main-menu">
            <ul>
                <li class="menu-item">Faire&nbsp;les&nbsp;courses</li>
                <li class="menu-item">Passer&nbsp;en&nbsp;cuisine</li>
                
            </ul>
        </nav>
        <button class="user-menu">
            <img class="user-icon" src="assets/profile.svg" alt="Icône utilisateur">
            <img class="user-icon" src="assets/recompense.svg" alt="Icône utilisateur">
            <img class="user-icon" src="assets/theme.svg" alt="Icône utilisateur">
        </buton>
    </header> `"

and the css of the header is this ==>"

`.header {
    /* padding: 10px; */
    background-color: var(--color-white);
    color: var(--color-red);
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 10px #000c;
    padding-left: 50px;
    padding-right: 50px; 
    padding-top: 25px;
    padding-bottom: 25px;
}`
```"


but the issue is in the reponsive design the code is this  "`

`.header { width: calc(100vw - 100px); height: 100vh; display: block; position: fixed; top: 0; left: -100vw; box-shadow: 0 0px 20px #000c; font-size: 1.5em; transition: left .3s ease; } .header:focus-within { left: 0; } .header:focus-within .burger-switch { left: 0; background-color: transparent;

}
.burger-switch {
    display: inherit;
    position: relative;
    left: 100vw;
    height: 50px;
    width: 50px;
}
/* Pour animer le burger button */
.burger-switch::before {
    content: '-';
    background: #000;
    display: block;
    width: 30px;
    height: 4px;
    position: relative;
    left: 10px;
    top: -7px;
    color: transparent;
    overflow: hidden;
    font-size: 1px;
}
.burger-switch::after {
    content: '-';
    background: #000;
    display: block;
    width: 30px;
    height: 4px;
    position: relative;
    top: 7px;
    left: 10px;
    color: transparent;
    overflow: hidden;
    font-size: 1px;
}
.header:focus-within .burger-switch::before {
    content: '-';
    background: #fff;
    transform: rotate(-45deg);
    top: 2px;
    transition: all .3s ease;
}
.header:focus-within .burger-switch::after {
    content: '-';
    background: #fff;
    transform: rotate(45deg);
    top: -2px;
    transition: all .3s ease;
}
.logo {
    position: absolute;
    top: 10px;
    left: calc(50% - 50px);
}
.user-menu {
    position: absolute;
    top: 10px;
    right: 10px;
}
.main-menu ul{
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
}``

"
the issue is that in the responsive design i want the humbergmenu to be beside the logo and the icons to be on the right but once the website reach responsive the menu takes the whole navbar inside of it  .all i want inside the menu is this 

" ` Faire les courses Passer en cuisine

        </ul>
    </nav>`" 

while the effect of showing from left to right remain and the navbar should also remain the same in phone only showing this

" `

    <button class="user-menu">
        <img class="user-icon" src="assets/profile.svg" alt="Icône utilisateur">
        <img class="user-icon" src="assets/recompense.svg" alt="Icône utilisateur">
        <img class="user-icon" src="assets/theme.svg" alt="Icône utilisateur">
    </buton>`"

and i can only use css html 



helping adjusting the css code to what i need i would really apprciate your kind help