Increased height to 30vh & added expand/collapse icon on hover

src/components/LandingBanner.vue

@@ -1,16 +1,29 @@
 <template>
-  <header v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }">
+  <header
+    :class="{ expanded, noselect: true }"
+    v-bind:style="{ 'background-image': 'url(' + imageFile + ')' }"
+    @click="expanded = !expanded"
+  >
     <div class="container">
       <h1 class="title">Request movies or tv shows</h1>
       <strong class="subtitle"
         >Create a profile to track and view requests</strong
       >
     </div>
+
+    <div class="expand-icon">
+      <IconExpand v-if="!expanded" />
+      <IconShrink v-else />
+    </div>
   </header>
 </template>
 
 <script>
+import IconExpand from "../icons/IconExpand.vue";
+import IconShrink from "../icons/IconShrink.vue";
+
 export default {
+  components: { IconExpand, IconShrink },
   props: {
     image: {
       type: String,
@@ -25,7 +38,8 @@ export default {
         "dune.jpg",
         "mandalorian.jpg"
       ],
-      imageFile: undefined
+      imageFile: undefined,
+      expanded: false
     };
   },
   beforeMount() {
@@ -46,7 +60,7 @@ export default {
 
 header {
   width: 100%;
-  height: 200px;
+  height: 30vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,8 +69,29 @@ header {
   background-position: 50% 50%;
   position: relative;
 
-  @include tablet-min {
+  &.expanded {
-    height: 284px;
+    height: calc(100vh - var(--header-size));
+    width: calc(100vw - var(--header-size));
+  }
+
+  .expand-icon {
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.5s ease-in-out;
+    height: 1.8rem;
+    width: 1.8rem;
+    fill: var(--text-color-50);
+
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+  }
+
+  &:hover {
+    .expand-icon {
+      visibility: visible;
+      opacity: 1;
+    }
   }
 
   &:before {