tree shake the AP layout

src/layouts/HeaderContentBottom.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="ap-container">
   <div id="ap-page">
     <header class="ap-page-header" ref="apheader">
       <slot name="header"></slot>
@@ -8,183 +7,27 @@
       <slot name="content"></slot>
     </main>
   </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useVisibility } from "@/utils";
 import useNavStore from "@/stores/nav";
-import { onBeforeRouteUpdate, RouteParams, useRoute } from "vue-router";
 
 const nav = useNavStore();
-
-const props = defineProps<{
-  /**
-   *  Called when the bottom container is raised.
-   */
-  bottomRaisedCallback?: (routeparams: RouteParams) => void;
-}>();
-
-let elem: HTMLElement;
-let classlist: DOMTokenList;
-
-const route = useRoute();
 const apheader = ref<any>(null);
-const apbottomcontainer = ref(null);
-const bottomContainerRaised = ref(false);
-
-onMounted(() => {
-  elem = document.getElementById("ap-page") as HTMLElement;
-  classlist = elem.classList as DOMTokenList;
-});
-
-onBeforeRouteUpdate((to) => {
-  if (bottomContainerRaised.value) {
-    if (!props.bottomRaisedCallback) return;
-    props.bottomRaisedCallback(to.params);
-  }
-});
 
 function handleVisibilityState(state: boolean) {
-  resetBottomPadding();
-
   nav.toggleShowPlay(state);
 }
 
 useVisibility(apheader, handleVisibilityState);
-
-function resetBottomPadding() {
-  if (bottomContainerRaised.value) return;
-
-  classlist.remove("addbottompadding");
-}
-
-let bottomRaisedCallbackExecuted = false;
-
-function toggleBottom() {
-  bottomContainerRaised.value = !bottomContainerRaised.value;
-
-  if (bottomContainerRaised.value) {
-    classlist.add("addbottompadding");
-    if (!bottomRaisedCallbackExecuted) {
-      bottomRaisedCallbackExecuted = true;
-      if (!props.bottomRaisedCallback) return;
-      props.bottomRaisedCallback(route.params);
-    }
-    return;
-  }
-  if (elem.scrollTop == 0) {
-    classlist.remove("addbottompadding");
-  }
-}
 </script>
 
 <style lang="scss">
-.ap-container {
+#ap-page {
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-
-  #ap-page {
-    overflow: auto;
-    height: 100%;
-    position: relative;
   display: grid;
   grid-template-rows: 18rem 1fr;
   gap: 1rem;
-
-    .ap-page-content {
-      // padding-bottom: 16rem;
-      
-      @include for-desktop-down {
-        min-height: calc(100vh - 38.75rem);
-      }
-    }
-  }
-
-  .ap-page-bottom-container {
-    position: absolute;
-    bottom: 0;
-    height: 15rem;
-    width: 100%;
-    background-color: $gray;
-    transition: all 0.5s ease !important;
-    overscroll-behavior: contain;
-    display: grid;
-    grid-template-rows: 2rem 1fr;
-
-    .bottom-content {
-      overflow: hidden;
-      scroll-behavior: contain;
-    }
-
-    .click-to-expand {
-      height: 1.5rem;
-      display: flex;
-      align-items: center;
-      color: $gray1;
-
-      div {
-        margin: 0 auto;
-        font-size: small;
-        cursor: default;
-        user-select: none;
-        display: flex;
-        gap: $small;
-      }
-
-      .arrow {
-        max-width: min-content;
-        transition: all 0.2s ease-in-out;
-      }
-
-      &:hover {
-        color: $accent !important;
-      }
-    }
-  }
-
-  .bottomexpanded {
-    height: 33rem !important;
-
-    .arrow {
-      transform: rotate(180deg) !important;
-    }
-
-    .bottom-content {
-      overflow: auto !important;
-      scrollbar-width: none;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  .addbottompadding {
-    padding-bottom: 16rem;
-  }
-
-  @include for-desktop-down {
-    overflow: auto;
-
-    #ap-page {
-      height: max-content;
-
-      .ap-page-content {
-        padding-bottom: 0;
-      }
-    }
-
-    .ap-page-bottom-container {
-      position: relative;
-      margin-top: 1rem;
-    }
-
-    .addbottompadding {
-      padding-bottom: 0;
-    }
-  }
 }
 </style>