add footer info

src/components.d.ts

@@ -21,6 +21,7 @@ declare module 'vue' {
     MosaicViewport: typeof import('./components/MosaicViewport.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SiteFooter: typeof import('./components/site/Footer.vue')['default']
     SiteHeader: typeof import('./components/site/Header.vue')['default']
     StrapiContent: typeof import('./components/strapi/Content.vue')['default']
     StrapiCopy: typeof import('./components/strapi/Copy.vue')['default']

src/components/Layout.vue

@@ -13,6 +13,8 @@
                  </transition>
              </router-view>
          </suspense>
+
+         <site-footer :info="footerInfo" />
     </div>
 </template async>
 
@@ -34,6 +36,7 @@ const { height: headerHeight } = useElementSize(header)
 const headerCopy = computed(() => global.value?.header_copy)
 const headerDl = computed(() => global.value?.header_dl)
 const mosaicItems = computed(() => global.value?.mosaic_items || [])
+const footerInfo = computed(() => global.value?.footer_info)
 const showHeader = computed(() => !(route.name === 'mosaic-item' && isMobile.value))
 
 // SEO

src/components/site/Footer.vue

@@ -0,0 +1,132 @@
+<template>
+    <footer class="site-footer">
+        <p class="p-small">&copy; {{ currentYear }} Nic Wands</p>
+
+        <button class="info-button" @click="infoWindowOpen = !infoWindowOpen">
+            <img src="/images/info.gif" alt="Info" />
+        </button>
+
+        <transition name="footer-info">
+            <div
+                v-if="infoWindowOpen && info"
+                class="info theme-red"
+                ref="infoWindow"
+            >
+                <button class="close window" @click="infoWindowOpen = false">
+                    Close X
+                </button>
+
+                <div class="content window">
+                    <strapi-content :content="info" />
+                </div>
+            </div>
+        </transition>
+    </footer>
+</template>
+
+<script setup>
+import { onClickOutside } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+    info: Object,
+})
+
+const infoWindow = ref()
+const infoWindowOpen = ref(false)
+
+onClickOutside(infoWindow, () => {
+    infoWindowOpen.value = false
+})
+
+const currentYear = computed(() => {
+    return new Date().getFullYear()
+})
+</script>
+
+<style lang="scss">
+.site-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: var(--layout-margin);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .info-button {
+        cursor: pointer;
+
+        img {
+            width: desktop-vw(30px);
+            height: auto;
+        }
+    }
+
+    .info {
+        position: fixed;
+        bottom: var(--layout-margin);
+        right: var(--layout-margin);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: desktop-vw(10px);
+        pointer-events: none;
+
+        .window {
+            background: var(--theme-bg);
+            color: var(--theme-fg);
+            pointer-events: all;
+
+            &.close {
+                padding: desktop-vw(9px);
+                border-radius: desktop-vw(16px);
+                cursor: pointer;
+                @include label;
+            }
+            &.content {
+                width: desktop-vw(250px);
+                padding: var(--layout-margin);
+                border-radius: desktop-vw(10px);
+
+                p,
+                a {
+                    @include p-small;
+                }
+            }
+        }
+
+        &.footer-info-enter-active,
+        &.footer-info-leave-active {
+            transition-duration: 400ms;
+
+            .close {
+                clip-path: inset(0% 0% 0% 0%);
+                transition: clip-path 300ms 100ms var(--ease-out-expo);
+            }
+            .content {
+                clip-path: inset(0% 0% 0% 0% round 5px);
+                transition: clip-path 300ms var(--ease-out-expo);
+            }
+        }
+        &.footer-info-leave-active {
+            .close {
+                transition-delay: 0ms;
+            }
+            .content {
+                transition-delay: 100ms;
+            }
+        }
+        &.footer-info-enter-from,
+        &.footer-info-leave-to {
+            .close {
+                clip-path: inset(100% 0% 0% 0%);
+            }
+            .content {
+                clip-path: inset(100% 0% 0% 100% round 5px);
+            }
+        }
+    }
+}
+</style>

src/components/strapi/Map.vue

@@ -28,8 +28,6 @@ const props = defineProps({
     mediaDS: String,
     mediaMS: String,
 })
-
-console.log(props.items)
 </script>
 
 <style lang="scss">

src/styles/_layers.scss

@@ -1,7 +1,5 @@
 // z-index
-.lily-cursor {
+.site-header,
-    z-index: 20;
+.site-footer {
-}
-.site-header {
     z-index: 10;
 }