From e80fb9d89a1afedede45e33f06b1d4c93c10956b Mon Sep 17 00:00:00 2001
From: Made Baruna <made.setia@gmail.com>
Date: Mon, 19 Apr 2021 22:13:35 +0800
Subject: [PATCH] Update sidebar

---
 src/components/Sidebar/Sidebar.svelte     | 197 ++++++++++++----------
 src/components/Sidebar/SidebarItem.svelte |  23 +--
 2 files changed, 122 insertions(+), 98 deletions(-)

diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index 78cea8ef..1df6751e 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -50,97 +50,103 @@
 <div
   in:fly={{ x: 100, duration: 100 }}
   out:fly={{ x: 100, duration: 100 }}
-  class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col p-5 bg-background items-center z-50 
+  class={`sidebar overflow-x-hidden fixed w-full lg:w-64 h-full flex-col bg-background items-center z-50 
     ${mobile ? 'flex' : 'hidden lg:flex'}`}
 >
-  {#if !mobile}
-    <SidebarTitle />
-  {/if}
-  {#if mobile}
-    <div class="cursor-pointer" on:click={close}>
-      <Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
-    </div>
-  {/if}
-  <SidebarItem
-    on:clicked={close}
-    active={segment === undefined}
-    image="/images/home.png"
-    label={$t('sidebar.home')}
-    href="/"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'characters'}
-    image="/images/characters.png"
-    label={$t('sidebar.character')}
-    href="/characters"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'wish'}
-    image="/images/wish.png"
-    label={$t('sidebar.wishCounter')}
-    href="/wish"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'calculator'}
-    image="/images/calculator.png"
-    label={$t('sidebar.calculator')}
-    href="/calculator"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'items'}
-    image="/images/items.png"
-    label={$t('sidebar.items')}
-    href="/items"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'todo'}
-    image="/images/todos.png"
-    label={$t('sidebar.todoList')}
-    href="/todo"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'timeline'}
-    image="/images/timeline.png"
-    label={$t('sidebar.timeline')}
-    href="/timeline"
-  />
-  <SidebarItem
-    on:clicked={close}
-    active={segment === 'settings'}
-    image="/images/settings.png"
-    label={$t('sidebar.settings')}
-    href="/settings"
-  />
-  <div class="mt-8 md:mt-0 md:flex-1" />
-  <div
-    class="locale-selector flex items-center justify-center my-4 py-2 cursor-pointer 
-    rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
-  >
-    <img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
-    <span class="text-gray-400">{currentLocale.label}</span>
-    <div class="locale-dropdown" style="top: {locales.length * -45}px;">
-      {#each locales as locale}
-        <div
-          class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
-          on:click={() => changeLocale(locale.id)}
-        >
-          <img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
-          <span class="text-gray-400">{locale.label}</span>
-        </div>
-        <div class="w-40" style="height: 5px;" />
-      {/each}
-    </div>
+  <div class="flex flex-col flex-1 items-center overflow-y-auto w-full px-5 py-5">
+    {#if !mobile}
+      <SidebarTitle />
+    {/if}
+    {#if mobile}
+      <div class="cursor-pointer" on:click={close}>
+        <Icon path={mdiCloseCircle} size={2} color="white" className="mb-8 mt-4 opacity-75" />
+      </div>
+    {/if}
+    <SidebarItem
+      on:clicked={close}
+      active={segment === undefined}
+      image="/images/home.png"
+      label={$t('sidebar.home')}
+      href="/"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'characters'}
+      image="/images/characters.png"
+      label={$t('sidebar.character')}
+      href="/characters"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'wish'}
+      image="/images/wish.png"
+      label={$t('sidebar.wishCounter')}
+      href="/wish"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'calculator'}
+      image="/images/calculator.png"
+      label={$t('sidebar.calculator')}
+      href="/calculator"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'items'}
+      image="/images/items.png"
+      label={$t('sidebar.items')}
+      href="/items"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'todo'}
+      image="/images/todos.png"
+      label={$t('sidebar.todoList')}
+      href="/todo"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'timeline'}
+      image="/images/timeline.png"
+      label={$t('sidebar.timeline')}
+      href="/timeline"
+    />
+    <SidebarItem
+      on:clicked={close}
+      active={segment === 'settings'}
+      image="/images/settings.png"
+      label={$t('sidebar.settings')}
+      href="/settings"
+    />
+  </div>
+  <div
+    class="pt-2 pb-4 flex flex-col items-center w-full z-10"
+    style="width: 248px; background: linear-gradient(180deg, rgba(32, 36, 66, 0) 0%, rgba(32, 36, 66, 1) 10%);"
+  >
+    <div
+      class="locale-selector flex items-center justify-center mb-4 mt-0 py-2 cursor-pointer 
+    rounded-xl hover:bg-black hover:bg-opacity-50 relative w-40"
+    >
+      <img class="w-4 h-4 rounded-full mr-2" alt={currentLocale.label} src="/images/locales/{currentLocale.id}.svg" />
+      <span class="text-gray-400">{currentLocale.label}</span>
+      <div class="locale-dropdown" style="top: {locales.length * -45}px;">
+        {#each locales as locale}
+          <div
+            class="flex items-center justify-center py-2 cursor-pointer rounded-xl bg-opacity-50 bg-black hover:bg-opacity-75"
+            on:click={() => changeLocale(locale.id)}
+          >
+            <img class="w-4 h-4 rounded-full mr-2" alt={locale.label} src="/images/locales/{locale.id}.svg" />
+            <span class="text-gray-400">{locale.label}</span>
+          </div>
+          <div class="w-40" style="height: 5px;" />
+        {/each}
+      </div>
+    </div>
+    <Button on:click={openDonationModal}>
+      <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
+      {$t('sidebar.donate')}
+    </Button>
   </div>
-  <Button on:click={openDonationModal}>
-    <img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
-    {$t('sidebar.donate')}
-  </Button>
 </div>
 
 <style>
@@ -167,4 +173,19 @@
       @apply block;
     }
   }
+
+  @screen lg {
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.35);
+      @apply rounded-xl;
+    }
+  }
 </style>
diff --git a/src/components/Sidebar/SidebarItem.svelte b/src/components/Sidebar/SidebarItem.svelte
index 974881a5..04ede699 100644
--- a/src/components/Sidebar/SidebarItem.svelte
+++ b/src/components/Sidebar/SidebarItem.svelte
@@ -13,6 +13,19 @@
   }
 </script>
 
+<a on:click={clicked} class={`w-full rounded-xl ease-in duration-150 ${active ? 'active' : ''}`} {href}>
+  <div class="group w-full py-3 flex items-center px-4 cursor-pointer transition-colors">
+    <div class="h-8 w-8 flex justify-center mr-3 opacity-75 group-hover:opacity-100 ease-in duration-150">
+      <img class="h-full" src={image} alt={label} />
+    </div>
+    <span
+      class="font-body font-semibold flex-1 text-lg leading-none text-gray-500 group-hover:text-white ease-in duration-150"
+    >
+      {label}
+    </span>
+  </div>
+</a>
+
 <style>
   .active {
     @apply bg-primary;
@@ -27,13 +40,3 @@
     }
   }
 </style>
-
-<a on:click={clicked} class={`w-full rounded-xl ease-in duration-150 ${active ? 'active' : ''}`} {href}>
-  <div class="group w-full py-3 flex items-center px-6 cursor-pointer transition-colors">
-    <div class="h-8 w-8 flex justify-center mr-3 opacity-75 group-hover:opacity-100 ease-in duration-150">
-      <img class="h-full" src={image} alt={label} />
-    </div>
-    <span
-      class="font-body font-semibold text-lg leading-none text-gray-500 group-hover:text-white ease-in duration-150">{label}</span>
-  </div>
-</a>