From cb9b4a63470cd9e3e3042328ae4e0cb7b46e7c5f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 20 Sep 2023 23:27:30 +0530
Subject: [PATCH] fix: collapsible sidebar

---
 frontend/src/components/AppSidebar.vue        | 91 ++++++++++++++-----
 frontend/src/components/DesktopLayout.vue     |  2 +-
 .../src/components/Icons/CollapseSidebar.vue  | 27 ++++++
 .../src/components/Icons/ExpandSidebar.vue    | 23 +++++
 frontend/src/components/NavLink.vue           | 16 ----
 frontend/src/components/NavLinks.vue          | 17 ----
 frontend/src/components/SidebarLink.vue       | 57 ++++++++++++
 frontend/src/components/UserDropdown.vue      | 19 +++-
 8 files changed, 190 insertions(+), 62 deletions(-)
 create mode 100644 frontend/src/components/Icons/CollapseSidebar.vue
 create mode 100644 frontend/src/components/Icons/ExpandSidebar.vue
 delete mode 100644 frontend/src/components/NavLink.vue
 delete mode 100644 frontend/src/components/NavLinks.vue
 create mode 100644 frontend/src/components/SidebarLink.vue

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 0bfe4682..398d8646 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,32 +1,38 @@
 <template>
-  <div class="flex flex-col h-full justify-between">
+  <div
+    class="flex flex-col h-full justify-between transition-all duration-300 ease-in-out"
+    :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
+  >
     <div>
       <div class="flex p-2">
-        <UserDropdown />
+        <UserDropdown :isCollapsed="isSidebarCollapsed" />
       </div>
-      <div class="flex-1">
-        <nav class="space-y-0.5 px-2">
-          <NavLinks
-            :links="navigations"
-            class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
-            active="bg-white shadow-sm"
-            inactive="hover:bg-gray-100"
-          >
-            <template v-slot="{ link }">
-              <div class="flex w-full items-center space-x-2">
-                <span class="grid h-5 w-6 place-items-center">
-                  <component
-                    :is="link.icon"
-                    class="h-4.5 w-4.5 text-gray-700"
-                  />
-                </span>
-                <span class="text-base">{{ link.name }}</span>
-              </div>
-            </template>
-          </NavLinks>
-        </nav>
+      <div v-for="link in links">
+        <SidebarLink
+          :icon="link.icon"
+          :label="link.label"
+          :to="link.to"
+          :isCollapsed="isSidebarCollapsed"
+          class="my-0.5 mx-2"
+        />
       </div>
     </div>
+    <SidebarLink
+      :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
+      :isCollapsed="isSidebarCollapsed"
+      @click="isSidebarCollapsed = !isSidebarCollapsed"
+      class="m-2"
+    >
+      <template #icon>
+        <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+          <component
+            :is="CollapseSidebar"
+            class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+            :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+          />
+        </span>
+      </template>
+    </SidebarLink>
   </div>
 </template>
 
@@ -38,7 +44,42 @@ import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import NavLinks from '@/components/NavLinks.vue'
+import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { ref } from 'vue'
+
+const links = [
+  {
+    label: 'Leads',
+    icon: LeadsIcon,
+    to: 'Leads',
+  },
+  {
+    label: 'Deals',
+    icon: DealsIcon,
+    to: 'Deals',
+  },
+  {
+    label: 'Contacts',
+    icon: ContactsIcon,
+    to: 'Contacts',
+  },
+  {
+    label: 'Notes',
+    icon: NoteIcon,
+    to: 'Notes',
+  },
+  {
+    label: 'Call Logs',
+    icon: PhoneIcon,
+    to: 'Call Logs',
+  },
+  // {
+  //   label: 'Dashboard',
+  //   icon: DashboardIcon,
+  //   to: 'Dashboard',
+  // },
+]
 
 const navigations = [
   {
@@ -72,4 +113,6 @@ const navigations = [
   //   route: { name: 'Dashboard' },
   // },
 ]
+
+const isSidebarCollapsed = ref(false)
 </script>
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 2d81c21e..36f2a068 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-screen w-screen">
-    <div class="h-full border-r bg-gray-50 w-[220px]">
+    <div class="h-full border-r bg-gray-50">
       <AppSidebar />
     </div>
     <div class="flex-1 flex flex-col h-full overflow-auto">
diff --git a/frontend/src/components/Icons/CollapseSidebar.vue b/frontend/src/components/Icons/CollapseSidebar.vue
new file mode 100644
index 00000000..2cfccee3
--- /dev/null
+++ b/frontend/src/components/Icons/CollapseSidebar.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.875 9.06223L3 9.06232"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.74537 5.31699L3 9.06236L6.74527 12.8076"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.1423 4L14.1423 14.125"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/Icons/ExpandSidebar.vue b/frontend/src/components/Icons/ExpandSidebar.vue
new file mode 100644
index 00000000..0cb7e9ba
--- /dev/null
+++ b/frontend/src/components/Icons/ExpandSidebar.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.26733 9.06277L14.1423 9.06268"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.397 12.808L14.1423 9.06264L10.3971 5.31737"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M3 14.125L3 4" stroke="currentColor" stroke-linecap="round" />
+  </svg>
+</template>
diff --git a/frontend/src/components/NavLink.vue b/frontend/src/components/NavLink.vue
deleted file mode 100644
index 732012d9..00000000
--- a/frontend/src/components/NavLink.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <router-link custom :to="link.route" v-slot="{ href, isActive, navigate }">
-    <a
-      :href="href"
-      @click="navigate"
-      :class="[isActive ? active : inactive, $attrs.class]"
-    >
-      <slot :link="link">
-        {{ link.name }}
-      </slot>
-    </a>
-  </router-link>
-</template>
-<script setup>
-const props = defineProps(['link', 'active', 'inactive'])
-</script>
diff --git a/frontend/src/components/NavLinks.vue b/frontend/src/components/NavLinks.vue
deleted file mode 100644
index 7950bbd3..00000000
--- a/frontend/src/components/NavLinks.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <NavLink
-    v-for="link in links"
-    :key="link.name"
-    :class="$attrs.class"
-    v-bind="{ link, active, inactive }"
-  >
-    <slot :link="link">
-      {{ link.name }}
-    </slot>
-  </NavLink>
-</template>
-<script setup>
-import NavLink from '@/components/NavLink.vue'
-
-const props = defineProps(['links', 'active', 'inactive'])
-</script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
new file mode 100644
index 00000000..76af1e36
--- /dev/null
+++ b/frontend/src/components/SidebarLink.vue
@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="flex items-center rounded text-gray-800 cursor-pointer transition-all duration-300 ease-in-out"
+    :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
+    @click="handleClick"
+  >
+    <div class="flex items-center p-1">
+      <component :is="isCollapsed ? Tooltip : 'div'" :text="label" placement="right">
+        <slot name="icon">
+          <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+            <component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
+          </span>
+        </slot>
+      </component>
+      <span
+        class="flex-shrink-0 text-base duration-300 ease-in-out"
+        :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Tooltip } from 'frappe-ui'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps({
+  icon: {
+    type: Object,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+function handleClick() {
+  router.push({ name: props.to })
+}
+
+let isActive = computed(() => {
+  return router.currentRoute.value.name === props.to
+})
+</script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 78c844d7..7a5f34f6 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -2,17 +2,21 @@
   <Dropdown :options="userDropdownOptions">
     <template v-slot="{ open }">
       <button
-        class="flex w-full items-center space-x-2 rounded-md p-2 text-left"
+        class="flex w-full items-center rounded-md px-1 py-2 text-left"
         :class="open ? 'bg-gray-300' : 'hover:bg-gray-200'"
         v-if="user"
       >
-        <UserAvatar :user="user.name" size="md" />
-        <span class="hidden text-base font-medium text-gray-900 sm:inline">
+        <UserAvatar class="flex-shrink-0" :user="user.name" size="md" />
+        <span
+          class="hidden text-base font-medium text-gray-900 sm:inline duration-300 ease-in-out"
+          :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
+        >
           {{ user.full_name }}
         </span>
         <FeatherIcon
           name="chevron-down"
-          class="h-4 w-4 sm:inline"
+          class="h-4 w-4 sm:inline duration-300 ease-in-out"
+          :class="isCollapsed ? 'opacity-0 ml-0' : 'opacity-100 ml-2'"
           aria-hidden="true"
         />
       </button>
@@ -27,6 +31,13 @@ import { usersStore } from '@/stores/users'
 import { Dropdown, FeatherIcon } from 'frappe-ui'
 import { computed } from 'vue'
 
+const props = defineProps({
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const { logout } = sessionStore()
 const { getUser } = usersStore()