diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index b63a954..08c7a0f 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -193,6 +193,7 @@ declare global {
   const useImage: typeof import('@vueuse/core')['useImage']
   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
   const useInjectedScroll: typeof import('./composables/useInjectedScroll')['useInjectedScroll']
+  const useInjectedSidebar: typeof import('./composables/useInjectedSidebar')['useInjectedSidebar']
   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
   const useInterval: typeof import('@vueuse/core')['useInterval']
   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
@@ -508,6 +509,7 @@ declare module 'vue' {
     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
     readonly useInjectedScroll: UnwrapRef<typeof import('./composables/useInjectedScroll')['useInjectedScroll']>
+    readonly useInjectedSidebar: UnwrapRef<typeof import('./composables/useInjectedSidebar')['useInjectedSidebar']>
     readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
     readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
diff --git a/src/components.d.ts b/src/components.d.ts
index 38db0e7..96df8f8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScrollIndicator: typeof import('./components/partials/ScrollIndicator.vue')['default']
+    SidebarOverlay: typeof import('./components/SidebarOverlay.vue')['default']
     SocialCard: typeof import('./components/partials/about/SocialCard.vue')['default']
     SocialLink: typeof import('./components/partials/about/SocialLink.vue')['default']
     ToggleButton: typeof import('./components/partials/ToggleButton.vue')['default']
diff --git a/src/components/AppLogo.vue b/src/components/AppLogo.vue
index c7dafcd..2ed6c84 100644
--- a/src/components/AppLogo.vue
+++ b/src/components/AppLogo.vue
@@ -3,6 +3,8 @@ import { breakpointsTailwind } from '@vueuse/core'
 import { useInjectedScroll } from '~/composables/useInjectedScroll'
 
 const { isOnTop, isOnBottom } = useInjectedScroll()
+const { isSidebarOpen } = useInjectedSidebar()
+
 const notTopBottom = computed(() => {
   return !isOnTop.value && !isOnBottom.value
 })
@@ -21,8 +23,8 @@ const onLgBreakpoint = computed(() => {
 </script>
 
 <template>
-  <RouterLink to="/" flex gap="12" pointer-events="auto" select="none" class="swipe" :class="onLgBreakpoint ? `scale-80` : `to-bottom`">
-    <h1 :data-scrolled="onLgBreakpoint" aria-label="SIkhlas" aria-description="Sajid Ikhlas Personal Website Title Logo" truncate tracking="wider" font="extralight" text="5xl nowrap" select="none" class="title">
+  <RouterLink to="/" pointer-events="auto" select="none" class="swipe" :class="onLgBreakpoint || isSidebarOpen ? `scale-90 sm:scale-100 lg:scale-80` : `*:scale-125 *:sm:scale-100 to-bottom`">
+    <h1 :data-scrolled="onLgBreakpoint" aria-label="SIkhlas" aria-description="Sajid Ikhlas Personal Website Title Logo" truncate tracking="wider" transition="composite" font="extralight" text="3xl sm:5xl nowrap" select="none" class="title">
       <span>S<span tracking="widest" class="widen">I</span>k</span>hlas
     </h1>
   </RouterLink>
@@ -37,7 +39,8 @@ const onLgBreakpoint = computed(() => {
 }
 
 .to-bottom {
-  transform: translateY(calc(100dvh - 100% - 13rem)) translateX(calc(100vw - 100% - 2rem - 1rem - 1rem / 2));
+  transform: translateY(calc(100dvh - 100% - 13rem - 1rem))
+    translateX(calc(100vw - 100% - 2rem - 1rem - 1rem / 2 - 1rem));
 }
 @media (min-width: 640px) {
   .to-bottom {
@@ -47,7 +50,7 @@ const onLgBreakpoint = computed(() => {
 /* 784px instead of 768px for flex wrapping footer content */
 @media (min-width: 768px) {
   .to-bottom {
-    transform: translateY(calc(100dvh - 100% - 7.5rem));
+    transform: translateY(calc(100dvh - 100% - 7.5rem - 1rem / 2));
   }
 }
 
diff --git a/src/components/HeaderOverlay.vue b/src/components/HeaderOverlay.vue
index 5f2d62b..b5cb063 100644
--- a/src/components/HeaderOverlay.vue
+++ b/src/components/HeaderOverlay.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { LabelHrefItem } from '~/types'
-import { breakpointsTailwind } from '@vueuse/core'
 import { useInjectedScroll } from '~/composables/useInjectedScroll'
 import { HEADER } from '~/constants'
 
 const { isOnTop, isOnBottom } = useInjectedScroll()
+const { isSidebarOpen } = useInjectedSidebar()
 
 const route = useRoute()
 
@@ -35,31 +35,30 @@ const notTopBottom = computed(() => {
   return !isOnTop.value && !isOnBottom.value
 })
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isLg = breakpoints.lg
-
-const returnInert = computed(() => {
-  if (!isLg.value)
-    return !isOnBottom.value
-  else return false
+const returnSectionClass = computed(() => {
+  if (isSidebarOpen.value)
+    return 'opacity-0 swipe-first swipe-last'
+  else if (notTopBottom.value)
+    return 'swipe-first'
+  return null
 })
 </script>
 
 <template>
-  <header :inert="returnInert" gap="1.5" transition="composite" duration="500" lg="flex flex-col translate-y-0 justify-end opacity-100" :class="!isOnBottom && `translate-y-80 md:opacity-0`">
+  <header gap="1.5" transition="composite" duration="500" lg="flex flex-col translate-y-0 justify-end opacity-100" :class="!isOnBottom && `translate-y-80 md:opacity-0`">
     <div flex gap="4 lg:16" text="sm" class="justify-between md:items-end">
-      <section v-for="(section, i) in HEADER" :key="i" transition="composite" duration="500" first="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-(x-8 y-4)" last="flex-(~ wrap) flex-col lg:flex-row items-start md:items-end justify-end gap-2 lg:gap-8" class="max-w-fit" :class="notTopBottom && `swipe-left`">
+      <section v-for="(section, i) in HEADER" :key="i" transition="composite" duration="500" first="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-(x-8 y-4)" last="flex-(~ wrap) flex-col lg:flex-row items-start md:items-end justify-end gap-2 lg:gap-8" class="max-w-fit" :class="returnSectionClass">
         <div v-for="(card, idx) in section" :key="idx" flex="~ col" w="40" gap="1.5">
           <template v-for="item in card" :key="item.label">
             <template v-if="item.href">
-              <a v-if="isExternalUrl(item.href, true)" :href="item.href" target="_blank" flex gap="4" p="y-0.5" pointer-events="auto" class="smooth-transition group items-center hover:scale-x-110" :class="notTopBottom && `opacity-75 hover:opacity-100`">
+              <a v-if="isExternalUrl(item.href, true)" :href="item.href" target="_blank" flex gap="4" p="y-0.5" pointer-events="auto" class="variable-transition group items-center hover:scale-x-110" :class="notTopBottom && `opacity-75 hover:opacity-100`">
                 <span v-if="getHrefNumLabel(item)" aria-hidden="true" font="light" select="none" tabular-nums>{{ `0${getHrefNumLabel(item)}` }}</span>
                 <h4 font="medium">
                   {{ item.label }}
                 </h4>
                 <span aria-hidden="true" block i="carbon-arrow-up-right" origin="top-left" transition="composite" duration="300" class="opacity-25 scale-75 -translate-x-full" group-hover="opacity-50 scale-100 translate-0" />
               </a>
-              <RouterLink v-else :to="item.href" :data-active="currentPath === item.href" flex gap="4" p="y-0.5" pointer-events="auto" select="none" class="smooth-transition route-line items-center hover:scale-x-110" :class="notTopBottom && `to-top`">
+              <RouterLink v-else :to="item.href" :data-active="currentPath === item.href" flex gap="4" p="y-0.5" pointer-events="auto" select="none" class="variable-transition line-divider items-center hover:scale-x-110" :class="notTopBottom && `to-top`">
                 <span aria-hidden="true" font="light" select="none" tabular-nums>{{ `0${getHrefNumLabel(item)}` }}</span>
                 <h4 font="medium">
                   {{ item.label }}
@@ -77,16 +76,20 @@ const returnInert = computed(() => {
 </template>
 
 <style scoped>
-.swipe-left:first-child {
+.swipe-first:first-child {
   transform: translateX(calc(-10rem - 2rem));
 }
 
-.route-line[data-active='true']::after,
-.route-line:hover::after {
+.swipe-last:last-child {
+  transform: translateX(calc(100% + 2rem));
+}
+
+.line-divider[data-active='true']::after,
+.line-divider:hover::after {
   scale: 1;
 }
 
-.route-line::after {
+.line-divider::after {
   content: '';
   width: 100%;
   height: 1px;
@@ -97,7 +100,7 @@ const returnInert = computed(() => {
   border-radius: 100%;
 }
 
-.smooth-transition {
+.variable-transition {
   transition:
     scale var(--ease-o-back) 0.3s,
     translate var(--ease-io-quint) 0.5s;
diff --git a/src/components/LinkCTA.vue b/src/components/LinkCTA.vue
index 6c40aaf..7d08de1 100644
--- a/src/components/LinkCTA.vue
+++ b/src/components/LinkCTA.vue
@@ -23,7 +23,7 @@ const spanClassName = 'text-(lg nowrap) tracking-widest font-bold select-none lg
 </script>
 
 <template>
-  <RouterLink relative :to="to" p="y-1 x-2 sm:y-2 sm:x-3" class="wrapper-img group/button text-center *:first:absolute-overlay" border="2" :class="wrapperColorMap[color]">
+  <RouterLink relative :to="to" active-class="*:first:opacity-0" p="y-1 x-2 sm:y-2 sm:x-3" class="wrapper-img group/button text-center *:first:absolute-overlay" border="2" :class="wrapperColorMap[color]">
     <slot name="overlay">
       <div aria-hidden="true" ease="out-expo" duration="500" transition="composite" class="flex-centered group-focus/button:opacity-0 group-hover/button:opacity-0" :class="overlayColorMap[color]">
         <span :class="spanClassName">{{ label }}</span>
diff --git a/src/components/NavOverlay.vue b/src/components/NavOverlay.vue
index e317993..791084b 100644
--- a/src/components/NavOverlay.vue
+++ b/src/components/NavOverlay.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { useInjectedSidebar } from '~/composables/useInjectedSidebar'
 import { availableLocales, loadLanguageAsync } from '~/modules/i18n'
 
 const isDark = useDark()
 const { t, locale } = useI18n()
+const { isSidebarOpen, toggle: toggleSidebar } = useInjectedSidebar()
 
 async function toggleLocale() {
   const newLocale = availableLocales[(availableLocales.indexOf(locale.value) + 1) % availableLocales.length]
@@ -12,19 +14,35 @@ async function toggleLocale() {
 </script>
 
 <template>
-  <nav flex pointer-events="none" class="justify-between">
+  <nav flex="~ justify-between" pointer-events="none">
     <slot name="left">
       <div />
     </slot>
     <slot name="right">
-      <div class="tracking-wider flex h-full w-30 items-center relative md:w-80">
-        <ToggleButton class="flex-1 pointer-events-auto hover:bg-primary/10" :state="locale === 'en'" truthy-label="ENG" falsy-label="IDN" @click="toggleLocale">
-          <span aria-hidden="true" i="carbon-language" block />
-          <span class="text-sm truncate sr-only md:not-sr-only">{{ t('button.toggle_lang') }}</span>
-        </ToggleButton>
-        <ToggleButton class="flex-1 pointer-events-auto hover:bg-primary/10" :state="isDark" :truthy-label="t('button.toggle_theme.dark')" :falsy-label="t('button.toggle_theme.light')" @click="toggleDark()">
-          <span aria-hidden="true" block i="carbon-sun dark:carbon-moon" />
-          <span class="text-sm truncate sr-only md:not-sr-only">{{ t('button.toggle_theme._label') }}</span>
+      <div class="tracking-wider flex gap-1 h-full relative">
+        <div flex>
+          <ToggleButton block class="p-1" :state="locale === 'en'" initial-label="EN" toggled-label="ID" @click="toggleLocale">
+            <template #leading>
+              <span aria-hidden="true" i="carbon-language" class="hidden sm:block" />
+            </template>
+          </ToggleButton>
+          <ToggleButton block class="p-1 capitalize" :state="isDark" :label-width="6" @click="toggleDark()">
+            <template #leading>
+              <span aria-hidden="true" block i="carbon-sun dark:carbon-moon" />
+            </template>
+            <template #content>
+              <Transition mode="out-in" name="slide-y">
+                <span v-if="isDark" class="hidden sm:inline-block">{{ t('button.toggle_theme.dark') }}</span>
+                <span v-else class="hidden sm:inline-block">{{ t('button.toggle_theme.light') }}</span>
+              </Transition>
+            </template>
+          </ToggleButton>
+        </div>
+        <ToggleButton class="p-1" @click="toggleSidebar">
+          <template #leading>
+            <span inline-block :class="isSidebarOpen ? `i-carbon-close-large` : `i-carbon-menu`" />
+            <span>Menu</span>
+          </template>
         </ToggleButton>
       </div>
     </slot>
diff --git a/src/components/SidebarOverlay.vue b/src/components/SidebarOverlay.vue
new file mode 100644
index 0000000..0a539a5
--- /dev/null
+++ b/src/components/SidebarOverlay.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+interface SocialType {
+  platform: string
+  label?: string
+  href: string
+}
+
+const SOCIALS: SocialType[] = [
+  {
+    platform: 'Instagram',
+    label: 'say1ddd',
+    href: 'https://www.instagram.com/say1ddd',
+  },
+  {
+    platform: 'LinkedIn',
+    label: '/in/sajid-ikhlas',
+    href: 'https://www.linkedin.com/in/sajid-ikhlas',
+  },
+  {
+    platform: 'Github',
+    label: 'say1ddd',
+    href: 'https://www.github.com/say1ddd/',
+  },
+  {
+    platform: 'Email',
+    label: 'hello@sikhlas.com',
+    href: 'mailto:hello@sikhlas.com',
+  },
+]
+
+function getIconType(platform: string) {
+  function isPlatform(value: string) {
+    return platform.toLowerCase() === value
+  }
+  if (isPlatform('linkedin') || isPlatform('email'))
+    return 'link'
+  else return 'at'
+}
+</script>
+
+<template>
+  <aside fixed z="25" p="t-24 sm:t-26 b-20" flex="~ col" class="border-l-2 rounded bg-background/90 h-full w-full right-0 top-0 dark:bg-background/95 sm:w-md">
+    <ul aria-hidden="true" absolute class="h-full events-none right-full top-0" flex="~ col justify-evenly">
+      <li v-for="i in 5" :key="i" i="carbon-chevron-left" class="text-xl opacity-50" />
+    </ul>
+    <div p="y-12 sm:y-6" flex="~ col 1 justify-items-center gap-8" border="y dashed foreground/50" class="overflow-x-hidden overflow-y-auto">
+      <ul relative m="x-1" p="x-4 y-4" flex="~ col gap-2" class="nav-border">
+        <li aria-hidden="true" absolute flex="~ items-center gap-2" p="x-1" bg="primary" text="xs black" class="events-none translate-y-1/2 bottom-full left-0">
+          <span block font="medium jetbrains-mono" class="uppercase">
+            tap to open
+          </span>
+          <div i="carbon-arrow-down" />
+        </li>
+        <li>
+          <LinkCTA to="/about" :replace="true" :label="t('button.about')" color="secondary" class="w-full inline-block uppercase scale-105" />
+        </li>
+        <li>
+          <LinkCTA to="/resume" :label="t('button.resume')" color="secondary" class="w-full inline-block uppercase scale-105" />
+        </li>
+      </ul>
+      <div flex="~ col" gap="3">
+        <div m="x-2" p="x-2" border="l-2 primary" class="line-divider events-none">
+          <span class="tracking-wider uppercase" font="medium">MY SOCIALS</span>
+        </div>
+        <ul flex="~ col gap-2" p="x-6">
+          <li v-for="social in SOCIALS" :key="social.href" relative>
+            <SocialCard>
+              <SocialLink :title="social.platform" :subtitle="social.label" :href="social.href" :icon-type="getIconType(social.platform)" class="rounded shadow shadow-foreground/5" />
+            </SocialCard>
+          </li>
+        </ul>
+      </div>
+      <div text="center" p="x-2">
+        <span text="sm" class="*:text-primary">
+          handcrafted with love<span>&hearts;</span>
+        </span>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.nav-border::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border: 1px dotted rgb(var(--color-foreground-raw) / 25%);
+  transform: scale(105%);
+  pointer-events: none;
+}
+
+.line-divider {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.line-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background-color: var(--color-foreground);
+}
+</style>
diff --git a/src/components/partials/PreviousButton.vue b/src/components/partials/PreviousButton.vue
index 71b99d2..a6cb119 100644
--- a/src/components/partials/PreviousButton.vue
+++ b/src/components/partials/PreviousButton.vue
@@ -1,7 +1,7 @@
 <template>
   <RouterLink to="/" pointer-events="auto" class="group border-none opacity-80 flex size-16 scale-80 items-center justify-center rounded-none! md:(opacity-100 scale-100)">
     <span class="sr-only">Previous</span>
-    <span aria-hidden="true" transition="composite" border="~ dashed" class="rotate-clockwise rounded-full h-full w-full duration-500 group-focus:(opacity-100 scale-100) group-hover:(opacity-100 scale-100) sm:(opacity-0 scale-75)" />
+    <span aria-hidden="true" transition="composite" border="~ dashed" bg="background" class="rotate-clockwise rounded-full h-full w-full duration-500 group-focus:(opacity-100 scale-100) group-hover:(opacity-100 scale-100) sm:(opacity-0 scale-75)" />
     <svg
       viewBox="0 0 128 128"
       aria-hidden="true"
diff --git a/src/components/partials/ToggleButton.vue b/src/components/partials/ToggleButton.vue
index f7988e5..c23e85e 100644
--- a/src/components/partials/ToggleButton.vue
+++ b/src/components/partials/ToggleButton.vue
@@ -1,65 +1,77 @@
 <script setup lang="ts">
 interface PropType {
-  truthyLabel?: string
-  falsyLabel?: string
-  state: boolean
+  initialLabel?: string
+  toggledLabel?: string
+  state?: boolean
+  labelWidth?: number
 }
 
-const {
-  truthyLabel = 'true',
-  falsyLabel = 'false',
-} = defineProps<PropType>()
+const props = defineProps<PropType>()
+
+const returnWidth = computed(() => {
+  function setChWidth(value?: number) {
+    if (props.labelWidth || value)
+      return `${props.labelWidth || value}ch`
+    else return 'auto'
+  }
+
+  if (props.initialLabel && props.toggledLabel) {
+    if (props.initialLabel.length >= props.toggledLabel.length)
+      return setChWidth(props.initialLabel.length)
+    else return setChWidth(props.toggledLabel.length)
+  }
+  return setChWidth()
+})
 </script>
 
 <template>
-  <button class="group bottom-line p-2 flex gap-3 h-full truncate items-center overflow-y-clip">
-    <span aria-hidden="true" inline-block absolute transition="composite" bg="primary" pointer-events="none" duration="300" class="opacity-0 h-px w-full bottom-full group-hover:opacity-100" />
-    <span aria-hidden="true" inline-block absolute transition="composite" bg="primary" pointer-events="none" duration="300" class="opacity-0 h-1.5 w-1 top-0 group-hover:opacity-100" />
-    <slot />
-    <span aria-hidden="true" truncate transition="composite" tracking="wide" text="sm black" bg="primary" w="14" pointer-events="none" duration="300" class="state-label opacity-0" group-hover="visible rotate-none scale-90 opacity-100">
-      <Transition mode="out-in" name="slide-y">
-        <span v-if="state">{{ truthyLabel }}</span>
-        <span v-else>{{ falsyLabel }}</span>
-      </Transition>
+  <button class="wrapper text-xs cursor-pointer pointer-events-auto sm:text-base">
+    <span relative border="~ foreground/15" class="after-btn inline-block">
+      <span relative z="20" flex="~ items-center justify-between" gap="2" bg="background" p="x-3 y-2" class="font-jetbrains-mono overflow-hidden tabular-nums *:last:w-[--w]" :style="{ '--w': returnWidth }">
+        <slot>
+          <slot name="leading">
+            <span i="carbon-menu" block />
+            <span>menu</span>
+          </slot>
+          <slot name="content">
+            <template v-if="initialLabel && toggledLabel">
+              <Transition mode="out-in" name="slide-y">
+                <span v-if="state" inline-block>{{ initialLabel }}</span>
+                <span v-else inline-block>{{ toggledLabel }}</span>
+              </Transition>
+            </template>
+          </slot>
+        </slot>
+      </span>
     </span>
   </button>
 </template>
 
 <style scoped>
-.bottom-line::after {
-  content: '';
-  position: absolute;
-  z-index: 10;
-  top: 100%;
-  width: 10rem;
-  transform: translateY(2px) scaleX(0);
-  height: 6px;
-  background-color: var(--color-primary);
-  transform-origin: left;
-  transition-property: var(--property-composite);
-  transition-duration: 0.5s;
-  transition-timing-function: ease-in-out;
-  pointer-events: none;
+.wrapper:hover .after-btn::after {
+  transform-origin: center;
+  transform: scaleX(105%);
+  opacity: 100%;
 }
 
-.bottom-line:hover::after {
-  transform: translateY(0) scaleX(100%);
+.wrapper:active .after-btn::after {
+  transform-origin: center;
+  background-color: var(--color-primary);
+  transform: scaleX(110%) scaleY(55%);
+  opacity: 100%;
 }
 
-.state-label {
+.after-btn::after {
+  content: '';
+  transition-property: var(--property-composite);
+  transition-duration: 0.5s;
+  transition-timing-function: var(--ease-o-back);
   position: absolute;
-  bottom: 100%;
-  right: 0;
+  inset: 0;
+  transform-origin: top;
+  background-color: var(--color-foreground);
+  transform: scaleY(105%);
   z-index: 10;
-  visibility: hidden;
-  text-transform: uppercase;
-  transform-origin: left;
-  rotate: calc(45deg / 2);
-  translate: 0 50%;
-}
-
-.state-label > * {
-  font-weight: 900;
-  display: block;
+  opacity: 50%;
 }
 </style>
diff --git a/src/components/partials/index/HeroCTA.vue b/src/components/partials/index/HeroCTA.vue
index 409065e..3248484 100644
--- a/src/components/partials/index/HeroCTA.vue
+++ b/src/components/partials/index/HeroCTA.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 interface Prop {
-  isVisible: boolean
+  isVisible?: boolean
 }
-const props = defineProps<Prop>()
+const { isVisible = false } = defineProps<Prop>()
 
 const { t } = useI18n()
 const ctaClassName = 'w-full scale-105 sm:w-sm'
@@ -10,8 +10,8 @@ const ctaClassName = 'w-full scale-105 sm:w-sm'
 
 <template>
   <div border="~ x-none dashed foreground/25">
-    <div transition="composite" duration="2000" m="x-auto" class="wrap" :class="props.isVisible && `skew-x-10`">
-      <div flex="~ col sm:row" gap="2 sm:4" transition="composite" duration="1000" ease="out-expo" :class="!props.isVisible && `-translate-x-1/5`">
+    <div transition="composite" duration="2000" m="x-auto" class="wrap" :class="isVisible && `skew-x-10`">
+      <div flex="~ col sm:row" gap="2 sm:4" transition="composite" duration="1000" ease="out-expo" :class="!isVisible && `-translate-x-1/5`">
         <HeroButtonIndicator fade-direction="right" class="hidden sm:block">
           <div i="carbon-chevron-right" />
         </HeroButtonIndicator>
diff --git a/src/composables/useInjectedSidebar.ts b/src/composables/useInjectedSidebar.ts
new file mode 100644
index 0000000..aa80062
--- /dev/null
+++ b/src/composables/useInjectedSidebar.ts
@@ -0,0 +1,20 @@
+import { isSidebarOpenKey } from '~/keys/sidebar'
+
+export function useInjectedSidebar() {
+  const isSidebarOpen = inject(isSidebarOpenKey)
+
+  if (!isSidebarOpen) {
+    throw new Error('sidebar injection has not been provided by kei-chan')
+  }
+
+  function toggle() {
+    if (typeof isSidebarOpen !== 'undefined')
+      isSidebarOpen.value = !isSidebarOpen.value
+    throw new Error('sidebar injection may has been provided by kei-chan but is undefined')
+  }
+
+  return {
+    isSidebarOpen,
+    toggle,
+  }
+}
diff --git a/src/keys/sidebar.ts b/src/keys/sidebar.ts
new file mode 100644
index 0000000..d4468d4
--- /dev/null
+++ b/src/keys/sidebar.ts
@@ -0,0 +1 @@
+export const isSidebarOpenKey: InjectionKey<Ref<boolean>> = Symbol('kei-chan is injecting sidebar overlay')
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index a2388ca..3ffd7cf 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { UseScrollReturn } from '@vueuse/core'
 import { scrollKey } from '~/keys/scroll'
+import { isSidebarOpenKey } from '~/keys/sidebar'
 
 const route = useRoute()
 
@@ -16,7 +17,7 @@ const { arrivedState, measure } = scrollReturn
 const { bottom: isOnBottom } = toRefs(arrivedState)
 
 const transitionClass = {
-  enterFromLeaveTo: 'opacity-0 rotate-90 translate-x-24',
+  enterFromLeaveTo: 'opacity-0 rotate-90 translate-x-32',
   enterToLeaveFrom: 'opacity-100 rotate-0 translate-x-none',
   enterActive: 'transition-composite pointer-events-none duration-500 delay-300',
   leaveActive: 'transition-composite pointer-events-none duration-300 delay-500',
@@ -31,13 +32,16 @@ router.afterEach(() => {
   console.info('afterEach after 1 second timeout')
 })
 */
+
+const isSidebarOpen = ref(false)
+provide(isSidebarOpenKey, isSidebarOpen)
 </script>
 
 <template>
   <div>
     <!-- top overlay -->
-    <div w="full" fixed z="30" top="0" pointer-events="none">
-      <div m="x-4" p="x-4" translate-y="4">
+    <div flex="~ col" w="full" fixed z="30" top="0" pointer-events="none">
+      <div m="x-4" p="y-2 x-4" class="translate-y-4">
         <NavOverlay>
           <template #left>
             <AppLogo />
@@ -59,8 +63,15 @@ router.afterEach(() => {
       </div>
     </div>
 
+    <!-- sidebar overlay -->
+    <SidebarOverlay transition="composite duration-500 ease-out-expo" :class="!isSidebarOpen && `translate-x-full events-none opacity-0`" />
+    <!-- dismiss overlay -->
+    <Transition mode="out-in" name="fade">
+      <div v-show="isSidebarOpen" absolute z="20" class="bg-black/50 inset-0" @click="isSidebarOpen = false" />
+    </Transition>
+
     <!-- content -->
-    <main h="dvh lg:screen *:full" overflow="hidden" z="1" relative class="min-w-0">
+    <main :inert="isSidebarOpen" h="dvh lg:screen *:full" overflow="hidden" z="1" relative class="min-w-0">
       <RouterView v-slot="{ Component, route: r }">
         <Transition name="fade-reveal" mode="out-in" @after-enter="measure">
           <component :is="Component" ref="scrollRef" :key="r.path" />
@@ -70,12 +81,8 @@ router.afterEach(() => {
 
     <!-- bottom overlay -->
     <div bottom="0" fixed pointer-events="none" w="full" z="25">
-      <div translate-y="-4" flex="~ col" gap="4 sm:0">
-        <!-- fuck firefox -->
-        <FooterBackground inset-0 absolute z="5" bg="primary" transition="composite" duration="1000" ease="out-expo" :class="isOnBottom ? `opacity-100 -translate-y-2 sm:-translate-y-16 md:-translate-y-8 lg:-translate-y-16` : `opacity-0 translate-y-1/10`" />
-        <FooterBackground inset-0 absolute z="5" bg="background" transition="composite" duration="1000" ease="in-out-circ" border="4 t-primary transparent" :class="isOnBottom ? `opacity-100 -translate-y-2 sm:-translate-y-16 md:-translate-y-8 lg:-translate-y-16` : `opacity-0 translate-y-1/4 lg:translate-y-1/10`" />
-
-        <HeaderOverlay lowercase relative z="10" m="x-4" p="x-0 sm:x-4" />
+      <div :data-open="isOnBottom && !isSidebarOpen" translate-y="-4" flex="~ col" gap="4 sm:0" class="footer-background">
+        <HeaderOverlay :inert="isSidebarOpen" lowercase relative z="10" m="x-4" p="x-0 sm:x-4" />
         <FooterOverlay relative z="10" transition="composite" duration="300" ease="out-back" m="sm:(x-4 y-0)" p="sm:x-4" :class="!isOnBottom ? `mx-4 p-2 sm:px-4 opacity-50 hover:opacity-75` : `mx-2 opacity-75 translate-y-2`" />
       </div>
     </div>
@@ -101,6 +108,64 @@ router.afterEach(() => {
 </template>
 
 <style scoped>
+.footer-background::before,
+.footer-background::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  transition-property: var(--property-composite);
+  transition-duration: 1s;
+  transition-timing-function: var(--ease-o-expo);
+  height: 100vh;
+  pointer-events: none;
+}
+
+.footer-background::before {
+  background-color: var(--color-primary);
+}
+
+.footer-background::after {
+  background-color: var(--color-background);
+  border-top: 4px solid var(--color-primary);
+}
+
+.footer-background[data-open='false']::before,
+.footer-background[data-open='false']::after {
+  transform: translateY(10%);
+  opacity: 0;
+}
+
+.footer-background[data-open='true']::after {
+  transition-delay: 0.3s;
+}
+
+.footer-background[data-open='true']::before,
+.footer-background[data-open='true']::after {
+  transform: translateY(-0.5rem);
+}
+
+@media (min-width: 640px) {
+  .footer-background[data-open='true']::before,
+  .footer-background[data-open='true']::after {
+    transform: translateY(-4rem);
+  }
+}
+
+@media (min-width: 768px) {
+  .footer-background[data-open='true']::before,
+  .footer-background[data-open='true']::after {
+    transform: translateY(-2rem);
+  }
+}
+
+@media (min-width: 1024px) {
+  .footer-background[data-open='true']::before,
+  .footer-background[data-open='true']::after {
+    transform: translateY(-4rem);
+  }
+}
+
 /* named transitions */
 .scale-up-enter-active,
 .scale-up-leave-active,