menu header inner panel layout

components/SiteMenu.vue

@@ -1,12 +1,13 @@
 <template>
   <section :class="{ 'is-open': isMenuOpen }"
-           class="site-menu panel-container">
+           class="site-menu panel-container"
+           @click="toggleMenu">
     <div class="panel-content">
       <nav class="nav-main"></nav>
       <footer class="nav-social"></footer>
     </div>
-    <div class="panel-header"
-         @click="toggleMenu">
+    <div class="panel-header">
+      <div class="panel-header__inner">This is the Menu Header</div>
     </div>
   </section>
 </template>
@@ -78,8 +79,32 @@ $bp-layout: $bp__m;
 }
 
 .panel-header {
+  position: relative;
   flex: 0 0 $site-menu__header-height;
 
+  @media (min-width: $bp-layout) {
+    max-width: $site-menu__header-width;
+  }
+
   background-color: cyan; // TEMP
 }
+
+  .panel-header__inner {
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(green, .5);
+
+    @media (min-width: $bp-layout) {
+      position: absolute;
+      top: 0;
+      right: 100%;
+      width: 100vh;
+      height: $site-menu__header-width;
+
+      transform-origin: 100% 0;
+      transform: rotate(-90deg);
+    }
+    
+  }
 </style>