feat(docs): use initOnMounted: true for useSessionStorage in CarbonAdOverlay (#4275)

* feat(docs): use computed for `hide-ad`

* Update CarbonAdOverlay.vue

* Update CarbonAdOverlay.vue

* feat(site): add initOnMounted: true to useSessionStorage in CarbonAdOverlay.vue

docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue

@@ -5,11 +5,18 @@ import IconButton from '../base/IconButton.vue';
 import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue';
 import { x } from '../../../data/iconNodes';
 import Icon from '@lucide/vue/src/Icon';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 const { theme } = useData();
-const showAd = useSessionStorage('show-carbon-ads', true);
+const showAd = useSessionStorage('show-carbon-ads', true, {
+  initOnMounted: true,
+});
 const carbonLoaded = ref(true);
+const shouldHideAd = computed(() => !showAd.value || !carbonLoaded.value);
+
+function hideAd() {
+  showAd.value = false;
+}
 
 defineProps<{
   drawerOpen: boolean;
@@ -28,13 +35,13 @@ onMounted(() => {
   <div
     :class="{
       'drawer-open': drawerOpen,
-      'hide-ad': !(showAd && carbonLoaded),
+      'hide-ad': shouldHideAd,
     }"
     class="floating-ad"
     v-if="theme.carbonAds"
   >
     <IconButton
-      @click="showAd = false"
+      @click="hideAd"
       class="hide-button"
     >
       <Icon
@@ -66,6 +73,7 @@ onMounted(() => {
 .floating-ad.hide-ad {
   transform: translateX(224px);
   opacity: 0;
+  pointer-events: none;
 }
 
 .floating-ad.drawer-open.hide-ad {
@@ -96,6 +104,7 @@ onMounted(() => {
   position: absolute;
   top: 8px;
   right: 8px;
+  z-index: 3;
   background-color: transparent;
 }
 </style>