title: Fixed sidebar with header. Havent found the solution yet
body: <p>I did try some designing in Figma but I am stuck now figuring out how to do something. I want a fixed sidebar, with the header full width until it reaches the sidebar (or at least, the button etc should not go through my sidebar)</p>
  <p>My design, with on the right the sidebar: <a href="https://i.gyazo.com/eaf28c70587ad014777f065c524c4a92.png" rel="nofollow noreferrer">https://i.gyazo.com/eaf28c70587ad014777f065c524c4a92.png</a></p>
  <p>What I have right now, as you can see the div inside the header is full width but it should be full width until it reaches sidebar: <a href="https://i.gyazo.com/a222cdaf11031095a13bfa35e3f1395a.png" rel="nofollow noreferrer">https://i.gyazo.com/a222cdaf11031095a13bfa35e3f1395a.png</a></p>
  <p>My css:</p>
  <p>HEADER:</p>
  <pre class="lang-css prettyprint-override"><code>import styled from &quot;styled-components&quot;
  
  export const NavWrapper = styled.nav`
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    border: solid red 1px;
    color: #fdfdfd;
  `
  </code></pre>
  <p>SIDEBAR:</p>
  <pre class="lang-css prettyprint-override"><code>export const SidebarRight = styled.div`
    max-width: 100px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    padding: 80px 0;
    border: 1px solid red;
  `
  </code></pre>
  <p>Or is it fine how I styled it and should I use a different method of having the button and everything perfect inside the header</p>