* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: sans-serif;
 min-height: 100vh;
}

.container {
 display: flex;
 min-height: 100vh;
}

/* Desktop: nav on left, fixed 200px */
.xpanel {
 width: 200px;
 flex-shrink: 0;
 border: solid 1px pink;
 padding: 1rem;
 overflow-y: auto;
}

.main {
 flex: 1;
 padding: 1rem;
 overflow-y: auto;
}

/* Mobile / Tablet: nav moves to bottom */
@media (max-width: 801px) {
 .container {
  flex-direction: column-reverse; /* Puts nav at bottom */
 }

 .xpanel {
  width: 100%;
  height: auto; /* Let content determine height */
  max-height: 50vh; /* Prevent nav from taking too much space */
  padding: 15px;
 }

 .main {
  padding: 20px;
 }
}

/* Optional nice touches */
.xpanel ul {
 list-style: none;
}

.xpanel a {
 /* text-decoration: none; */
 display: block;
 padding: 10px 0;
}