enter image description here

So I'm attempting to create the above. Is there a smart way of making the menu component? Or does the container element have to cover most of the content component (it has to be a rectangle and in itself use CSS Grid to position the left part and the top part of the menu)?

1 Answers

0
Neil On

This doesn't exactly match your single 'L' shape component requirement, but should get you closer than you were before.

A couple notes worth mentioning:

  1. This simply answers your question as a html/css question, not in React style. You could split this up into two components like you were hoping for by using every html/css element other than body-content, then having body-content html/css as the child
  2. Not sure exactly how you want to handle your content, but with this code the App-Header will scroll with your content. If you want it to be fixed and stay above the content copy the MainMenu's css, but style it for vertical scrolling.

Hope this gets you going in the right direction.

body {
  margin: 0px;
}

.App-header {
  background-color: #203764;
  height: 80px;
  padding: 10px;
  color: white;
}

/* Style page content */
.main-content {
    margin-left: 160px; /* Same as the width of the MainMenu */
}

.body-content {
  padding: 20px;
}


/* The MainMenu menu */
.MainMenu {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 160px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    color: #FFF;
}
<div class="App">
  <div class="MainMenu">Main Menu</div>
  <div class="main-content">
    <header class="App-header">Header</header>
    <div class="body-content">Content</div>
  </div>
</div>