feat: add compact option to sidebar footer

ICIJ · Jul 3, 2024 · 6d6f223 · 6d6f223
1 parent dd4cac4
commit 6d6f223
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 8 deletions.
diff --git a/src/components/AppSidebarFooter.vue b/src/components/AppSidebarFooter.vue
@@ -6,6 +6,15 @@ import PhosphorIcon from '@/components/PhosphorIcon'
 const props = defineProps({
   compact: {
     type: Boolean
+  },
+  noHelp: {
+    type: Boolean
+  },
+  noRemoveAll: {
+    type: Boolean
+  },
+  noSignOut: {
+    type: Boolean
   }
 })
 
@@ -26,17 +35,21 @@ const classList = computed(() => {
     </div>
     <div class="app-sidebar-footer__links">
       <router-link v-b-tooltip.body :to="{ name: 'settings' }" title="Settings" class="app-sidebar-footer__links__item">
-        <phosphor-icon name="gear" hover-weight="bold" />
+        <phosphor-icon class="app-sidebar-footer__links__item__icon" name="gear" hover-weight="bold" />
         <span class="visually-hidden">Settings</span>
       </router-link>
-      <a v-b-tooltip.body title="Help" class="app-sidebar-footer__links__item">
-        <phosphor-icon name="question" hover-weight="bold" />
+      <a v-if="!noHelp" v-b-tooltip.body title="Help" class="app-sidebar-footer__links__item">
+        <phosphor-icon class="app-sidebar-footer__links__item__icon" name="question" hover-weight="bold" />
         <span class="visually-hidden">Help</span>
       </a>
-      <a v-b-tooltip.body title="Remove all" class="app-sidebar-footer__links__item">
-        <phosphor-icon name="trash" hover-weight="bold" />
+      <a v-if="!noRemoveAll" v-b-tooltip.body title="Remove all" class="app-sidebar-footer__links__item">
+        <phosphor-icon class="app-sidebar-footer__links__item__icon" name="trash" hover-weight="bold" />
         <span class="visually-hidden">Remove all</span>
       </a>
+      <a v-if="!noSignOut" v-b-tooltip.body title="Sign out" class="app-sidebar-footer__links__item">
+        <phosphor-icon class="app-sidebar-footer__links__item__icon" name="sign-out" hover-weight="bold" />
+        <span class="visually-hidden">Sign out</span>
+      </a>
     </div>
   </footer>
 </template>
@@ -52,6 +65,27 @@ const classList = computed(() => {
     background-color: #070707;
   }
 
+  &--compact {
+    flex-direction: column;
+
+    .app-sidebar-footer__links__item,
+    .app-sidebar-footer__content,
+    .app-sidebar-footer__logo {
+      margin: 0;
+    }
+
+
+    .app-sidebar-footer__links {
+      order: -1;
+      flex-direction: column;
+      margin-bottom: $spacer;
+
+      &__item {
+        margin-bottom: $spacer-xs;
+      }
+    }
+  }
+
   &__logo {
     height: calc(#{$line-height-base * 1em} + #{$spacer-xxs * 2});
     line-height: $line-height-base * 1em;
@@ -76,9 +110,13 @@ const classList = computed(() => {
 
     &__item {
       text-align: center;
-      padding: $spacer-xxs;
       color: inherit;
       cursor: pointer;
+      margin: $spacer-xxs;
+
+      &__icon:hover {
+        color: var(--bs-primary);
+      }
     }
   }
 }

diff --git a/src/stories/components/AppSidebarFooter.stories.js b/src/stories/components/AppSidebarFooter.stories.js
@@ -8,16 +8,55 @@ export default {
   decorators: [vueRouter(routes)],
   title: 'Components/AppSidebar/Footer',
   tags: ['autodocs'],
+  argTypes: {
+    compact: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    noHelp: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    noRemoveAll: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    noSignOut: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
   render: (args) => ({
     components: {
       AppSidebarFooter
     },
+    setup: () => ({ args }),
     template: `
-      <app-sidebar-footer>
+      <app-sidebar-footer v-bind="args">
         v17.1.0
       </app-sidebar-footer>
     `
   })
 }
 
-export const Default = {}
+export const Default = {
+  args: {
+    compact: false,
+    noHelp: false,
+    noRemoveAll: false,
+    noSignOut: true
+  }
+}
+
+export const Compact = {
+  args: {
+    compact: true,
+    noHelp: true,
+    noRemoveAll: true,
+    noSignOut: true
+  }
+}