chore: move footer to sidebar

begprod · May 24, 2024 · 2106892 · 2106892
1 parent b258f95
commit 2106892
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 41 deletions.
diff --git a/src/components/BaseBacklog/BaseBacklog.vue b/src/components/BaseBacklog/BaseBacklog.vue
@@ -1,47 +1,53 @@
 <template>
   <BaseSidebar :is-open="isBacklogOpen">
-    <div class="sticky top-0 mb-3 pt-4 px-3 bg-neutral-50 z-10">
-      <div class="flex items-center justify-between mb-6">
-        <BaseLogo />
+    <template #main>
+      <div class="sticky top-0 mb-3 pt-4 px-3 bg-neutral-50 z-10">
+        <div class="flex items-center justify-between mb-6">
+          <BaseLogo />
+
+          <div class="flex items-center">
+            <a href="https://github.com/begprod/todo.it" class="shrink-0" target="_blank">
+              <img
+                src="@/assets/images/github-mark.svg"
+                class="w-6 opacity-80 hover:opacity-100 transition-all duration-300"
+                alt="todo.it github"
+              />
+            </a>
+
+            <BaseButton
+              class="ml-2 hidden"
+              title="Collapse/Expand settings sidebar"
+              @click="toggleSettings"
+            >
+              <Cog6ToothIcon class="w-4 h-4" />
+            </BaseButton>
+          </div>
+        </div>
 
         <div class="flex items-center">
-          <a href="https://github.com/begprod/todo.it" class="shrink-0" target="_blank">
-            <img
-              src="@/assets/images/github-mark.svg"
-              class="w-6 opacity-80 hover:opacity-100 transition-all duration-300"
-              alt="todo.it github"
-            />
-          </a>
+          <BaseButton @click="createTask('backlog')" title="Add task to backlog">
+            Add to backlog
+            <template #rightIcon>
+              <div class="ml-4">
+                <PlusIcon class="w-4 h-4" />
+              </div>
+            </template>
+          </BaseButton>
 
-          <BaseButton
-            class="ml-2 hidden"
-            title="Collapse/Expand settings sidebar"
-            @click="toggleSettings"
-          >
-            <Cog6ToothIcon class="w-4 h-4" />
+          <BaseButton class="!w-auto ml-2" title="Collapse backlog sidebar" @click="toggleSidebar">
+            <ChevronLeftIcon class="w-4 h-4" />
           </BaseButton>
         </div>
       </div>
 
-      <div class="flex items-center">
-        <BaseButton @click="createTask('backlog')" title="Add task to backlog">
-          Add to backlog
-          <template #rightIcon>
-            <div class="ml-4">
-              <PlusIcon class="w-4 h-4" />
-            </div>
-          </template>
-        </BaseButton>
-
-        <BaseButton class="!w-auto ml-2" title="Collapse backlog sidebar" @click="toggleSidebar">
-          <ChevronLeftIcon class="w-4 h-4" />
-        </BaseButton>
+      <div class="px-3">
+        <BaseTaskListBacklog />
       </div>
-    </div>
+    </template>
 
-    <div class="px-3">
-      <BaseTaskListBacklog />
-    </div>
+    <template #footer>
+      <BaseFooter />
+    </template>
   </BaseSidebar>
 </template>
 
@@ -52,6 +58,7 @@ import { useCommonStore, useTasksStore } from '@/stores';
 import BaseLogo from '@/components/layouts/partials/BaseLogo/BaseLogo.vue';
 import BaseButton from '@/components/ui/controls/BaseButton/BaseButton.vue';
 import BaseSidebar from '@/components/ui/BaseSidebar/BaseSidebar.vue';
+import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue';
 import BaseTaskListBacklog from '@/components/BaseTaskListBacklog/BaseTaskListBacklog.vue';
 
 const commonStore = useCommonStore();

diff --git a/src/components/layouts/BaseLayout/BaseLayout.vue b/src/components/layouts/BaseLayout/BaseLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="mx-auto pb-10">
+  <main class="mx-auto">
     <div class="flex flex-col lg:flex-row">
       <BaseBacklog />
       <BaseTaskList />
@@ -8,11 +8,9 @@
   </main>
 
   <BaseTaskActionsMenu />
-  <BaseFooter />
 </template>
 
 <script setup lang="ts">
-import BaseFooter from '@/components/layouts/partials/BaseFooter/BaseFooter.vue';
 import BaseBacklog from '@/components/BaseBacklog/BaseBacklog.vue';
 import BaseSettings from '@/components/BaseSettings/BaseSettings.vue';
 import BaseTaskActionsMenu from '@/components/BaseTaskActionsMenu/BaseTaskActionsMenu.vue';

diff --git a/src/components/layouts/partials/BaseFooter/BaseFooter.vue b/src/components/layouts/partials/BaseFooter/BaseFooter.vue
@@ -1,7 +1,7 @@
 <template>
-  <footer class="bg-white">
+  <footer>
     <div
-      class="container flex flex-col items-center justify-center mx-auto p-5 pb-10 text-sm text-center text-gray-700"
+      class="container flex flex-col items-center justify-center mx-auto p-5 text-sm text-center text-gray-700"
     >
       <p>
         made with <span class="text-red-600 text-md">❤</span> by

diff --git a/src/components/ui/BaseSidebar/BaseSidebar.vue b/src/components/ui/BaseSidebar/BaseSidebar.vue
@@ -1,10 +1,11 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed lg:sticky top-0 left-0 shrink-0 mb-0 pb-3 w-60 lg:w-80 max-h-screen min-h-screen bg-neutral-50 border-r border-l shadow-xl lg:shadow-none overflow-y-auto hide-scrollbar z-50"
+    class="fixed lg:sticky top-0 left-0 shrink-0 mb-0 w-60 lg:w-80 max-h-screen min-h-screen bg-neutral-50 border-r border-l shadow-xl lg:shadow-none overflow-y-auto hide-scrollbar z-50"
   >
-    <div class="flex flex-col">
-      <slot></slot>
+    <div class="grid grid-rows-[auto_1fr_auto] h-lvh">
+      <slot name="main"></slot>
+      <slot name="footer"></slot>
     </div>
   </div>
 </template>