Hide some UI elements when printing

src/client/theme-default/components/VPCarbonAds.vue

@@ -106,4 +106,10 @@ if (carbonOptions) {
 .VPCarbonAds :deep(> div:first-of-type) {
  display: block;
 }
+
+@media print {
+ .VPCarbonAds {
+ display: none;
+ }
+}
 </style>

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -55,6 +55,12 @@ useActiveAnchor(container, marker)
  display: block;
 }
 
+@media print {
+ .VPDocAsideOutline {
+ display: none;
+ }
+}
+
 .content {
  position: relative;
  border-left: 1px solid var(--vp-c-divider);

src/client/theme-default/components/VPDocFooter.vue

@@ -61,6 +61,12 @@ const showFooter = computed(() => {
  margin-top: 64px;
 }
 
+@media print {
+ .VPDocFooter {
+ display: none;
+ }
+}
+
 .edit-info {
  padding-bottom: 18px;
 }

src/client/theme-default/components/VPFooter.vue

@@ -44,6 +44,12 @@ const { hasSidebar } = useSidebar()
  }
 }
 
+@media print {
+ .VPFooter {
+ display: none;
+ }
+}
+
 .container {
  margin: 0 auto;
  max-width: var(--vp-layout-max-width);

src/client/theme-default/components/VPLocalNav.vue

@@ -114,6 +114,12 @@ const classes = computed(() => {
  }
 }
 
+@media print {
+ .VPLocalNav {
+ display: none;
+ }
+}
+
 @media (min-width: 1440px) {
  .VPLocalNav.has-sidebar {
  padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));

src/client/theme-default/components/VPNav.vue

@@ -30,7 +30,7 @@ watchEffect(() => {
  <template #nav-bar-content-before><slot name="nav-bar-content-before" /></template>
  <template #nav-bar-content-after><slot name="nav-bar-content-after" /></template>
  </VPNavBar>
- <VPNavScreen :open="isScreenOpen">
+ <VPNavScreen :open="isScreenOpen" class="VPNavScreen">
  <template #nav-screen-content-before><slot name="nav-screen-content-before" /></template>
  <template #nav-screen-content-after><slot name="nav-screen-content-after" /></template>
  </VPNavScreen>
@@ -54,4 +54,14 @@ watchEffect(() => {
  position: fixed;
  }
 }
+
+@media print {
+ .VPNav {
+ position: fixed;
+ }
+
+ .VPNavScreen {
+ display: none;
+ }
+}
 </style>

src/client/theme-default/components/VPNavBar.vue

@@ -177,6 +177,12 @@ watchPostEffect(() => {
  }
 }
 
+@media print {
+ .content {
+ display: none;
+ }
+}
+
 .content-body {
  display: flex;
  justify-content: flex-end;

src/client/theme-default/components/VPSidebar.vue

@@ -105,6 +105,12 @@ watch(
  }
 }
 
+@media print {
+ .VPSidebar {
+ display: none;
+ }
+}
+
 @media (min-width: 960px) {
  .curtain {
  position: sticky;