From fe8562902007c4e938a8ae02be52ceebddb30b3d Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Fri, 10 Mar 2023 17:02:13 +0200
Subject: [PATCH] feat: sticky footer with calc (#847)

---
 components/app/AppFooter.vue |  2 ++
 components/app/AppLayout.vue | 16 ++++++++++++++--
 tokens.config.ts             |  2 +-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
index 109158b51..84266ebc6 100644
--- a/components/app/AppFooter.vue
+++ b/components/app/AppFooter.vue
@@ -53,6 +53,8 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
 <style lang="ts" scoped>
 css({
   footer: {
+    display: 'flex',
+    minHeight: '{docus.footer.height}',
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
     borderTopColor: '{elements.border.primary.static}',
diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
index 44ebed92e..97a8d2633 100644
--- a/components/app/AppLayout.vue
+++ b/components/app/AppLayout.vue
@@ -17,10 +17,22 @@ useContentHead(config.value as any)
 </script>
 
 <template>
-  <div>
+  <div class="app-layout">
     <AppLoadingBar />
     <AppHeader />
-    <slot />
+    <main>
+      <slot />
+    </main>
     <AppFooter />
   </div>
 </template>
+
+<style lang="ts" scoped>
+css({
+  '.app-layout': {
+    main: {
+      minHeight: 'calc(100vh - {docus.header.height} - {docus.footer.height})',
+    }
+  }
+})
+</style>
diff --git a/tokens.config.ts b/tokens.config.ts
index 1492366c1..2e2d86a98 100644
--- a/tokens.config.ts
+++ b/tokens.config.ts
@@ -13,7 +13,7 @@ export default defineTheme({
       ]
     },
     header: { height: '64px' },
-    footer: { padding: '{space.4} 0' },
+    footer: { height: { initial: '145px', sm: '100px' }, padding: '{space.4} 0' },
     readableLine: '78ch',
     loadingBar: {
       height: '3px',