PROD-3310 - make footer collapsible

Author: vas3a

public/assets/icon-arrow.svg

@@ -85,3 +85,42 @@
     }
   }
 }
+
+.toggleBar {
+  background: #2A2A2A;
+  padding: 12px 32px;
+  @include maxViewWidth;
+
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+
+  color: #D4D4D4;
+
+  cursor: pointer;
+
+  @include mobile {
+    padding: 12px 16px;
+  }
+
+  + .footerNavigation {
+    padding-top: 16px;
+  }
+
+  .icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toggl {
+    transform: rotateZ(180deg);
+    transition: 0.15s ease;
+  }
+
+  &.isCollapsed .toggl {
+    transform: rotateZ(0deg);
+  }
+}

public/assets/icon-tmenu.svg

@@ -7,8 +7,10 @@
   import { navItems } from 'lib/config/nav-menu/nav-items.config';
   import { handleNavItemAction } from 'lib/utils/nav-item-action.handler';
   import type { NavMenuItem } from 'lib/functions/nav-menu-item.model';
+  import InlineSvg from 'lib/components/InlineSvg.svelte';
   import FooterBottomBar from './FooterBottomBar.svelte';
   import styles from './FooterNavigation.module.scss'
+  import { classnames } from 'lib/utils/classnames';
 
   const ctx = getAppContext()
   $: ({auth} = $ctx)
@@ -21,13 +23,19 @@
 
   $: ({fullFooter} = $ctx.toolConfig)
 
+  let isCollapsed = true;
+
   let supportVisible = false;
   let footerEl: Element | undefined = undefined;
 
   function toggleSupportModal() {
     supportVisible = true;
   }
 
+  function toggleFooter() {
+    isCollapsed = !isCollapsed;
+  }
+
   onMount(checkAndLoadFonts)
 
   onMount(() => {
@@ -36,15 +44,25 @@
 </script>
 
 <footer class={styles.footerWrap} bind:this={footerEl}>
-  {#if fullFooter === true}
+  {#if !fullFooter}
+    <div class={classnames(styles.toggleBar, isCollapsed && styles.isCollapsed)} on:click={toggleFooter} on:keydown={() => {}}>
+      <span class={styles.icon}>
+        <InlineSvg src="/assets/icon-tmenu.svg" />
+      </span>
+      <span class={classnames(styles.icon, styles.toggl)}>
+        <InlineSvg src="/assets/icon-arrow.svg" />
+      </span>
+    </div>
+  {/if}
+  {#if fullFooter === true || !isCollapsed}
   <div class={styles.footerNavigation}>
     <ul class={styles.menuSections}>
       {#each menuItems as menuItem}
         <li class={styles.menuSection}>
           {#if !!menuItem.label}
             <div class={styles.menuSectionHeading}>
               {menuItem.label}
-            </div>            
+            </div>
           {/if}
           {#if menuItem.children?.length}
             <ul class={styles.menuSectionEntries}>
@@ -54,7 +72,7 @@
                     <a target="_top" use:handleNavItemAction={child} href={child.url}>
                       {child.label}
                     </a>
-                  </li>                  
+                  </li>
                 {/if}
               {/each}
             </ul>