fix: removed isSidebarCollapsed from global and use absolute positioning to position notification panel

frontend/src/components/Layouts/AppSidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
+    class="relative flex h-full flex-col justify-between transition-all duration-300 ease-in-out"
     :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
   >
     <div>
@@ -91,6 +91,7 @@
         </span>
       </template>
     </SidebarLink>
+    <Notifications />
   </div>
 </template>
 
@@ -108,18 +109,16 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
 import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
 import SidebarLink from '@/components/SidebarLink.vue'
+import Notifications from '@/components/Notifications.vue'
 import { viewsStore } from '@/stores/views'
 import { notificationsStore } from '@/stores/notifications'
-import { globalStore } from '@/stores/global'
+import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 
 const { getPinnedViews, getPublicViews } = viewsStore()
 const { toggle: toggleNotificationPanel } = notificationsStore()
 
-const isSidebarCollapsed = computed({
-  get: () => globalStore().isSidebarCollapsed,
-  set: (value) => globalStore().setIsSidebarCollapsed(value),
-})
+const isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
 
 const links = [
   {

frontend/src/components/Layouts/DesktopLayout.vue

@@ -3,7 +3,6 @@
     <div class="h-full border-r bg-gray-50">
       <AppSidebar />
     </div>
-    <Notifications />
     <div class="flex-1 flex flex-col h-full overflow-auto">
       <AppHeader />
       <slot />
@@ -12,6 +11,5 @@
 </template>
 <script setup>
 import AppSidebar from '@/components/Layouts/AppSidebar.vue'
-import Notifications from '@/components/Notifications.vue'
 import AppHeader from '@/components/Layouts/AppHeader.vue'
 </script>

frontend/src/components/Notifications.vue

@@ -2,51 +2,58 @@
   <div
     v-if="notificationsStore().visible"
     ref="target"
-    class="fixed z-20 h-screen overflow-auto bg-white transition-all duration-300 ease-in-out"
+    class="absolute left-[102%] z-20 h-screen bg-white transition-all duration-300 ease-in-out"
     :style="{
       'box-shadow': '8px 0px 8px rgba(0, 0, 0, 0.1)',
       'max-width': '350px',
       'min-width': '350px',
-      left: isSidebarCollapsed ? '3rem' : '14rem',
     }"
   >
-    <div
-      class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-5 py-2.5"
-    >
-      <span class="text-lg font-medium">Notifications</span>
-      <span>
-        <Button
-          theme="blue"
-          variant="ghost"
-          @click="() => notificationsStore().mark_as_read.reload()"
-        >
-          <template #icon>
-            <MarkAsDoneIcon class="h-4 w-4" />
-          </template>
-        </Button>
-        <Button
-          theme="gray"
-          variant="ghost"
-          @click="() => toggleNotificationPanel()"
-        >
-          <template #icon>
-            <FeatherIcon name="x" class="h-4 w-4" />
-          </template>
-        </Button>
-      </span>
-    </div>
-    <div class="divide-y text-base">
-      <RouterLink
-        v-for="n in notificationsStore().allNotifications"
-        :key="n.comment"
-        :to="getRoute(n)"
-        class="flex cursor-pointer items-start gap-3.5 px-5 py-2.5 hover:bg-gray-100"
-        @click="mark_as_read(n.comment)"
+    <div class="flex h-screen flex-col">
+      <div
+        class="z-20 flex items-center justify-between border-b bg-white px-5 py-2.5"
       >
-        <UserAvatar :user="n.from_user.name" size="md" />
-        <span>
-          <div class="mb-2 leading-5">
-            <span class="space-x-1 text-gray-700">
+        <div class="text-base font-medium">Notifications</div>
+        <div class="flex gap-1">
+          <Tooltip text="Mark all as read">
+            <Button
+              variant="ghost"
+              @click="() => notificationsStore().mark_as_read.reload()"
+            >
+              <template #icon>
+                <MarkAsDoneIcon class="h-4 w-4" />
+              </template>
+            </Button>
+          </Tooltip>
+          <Tooltip text="Close">
+            <Button variant="ghost" @click="() => toggleNotificationPanel()">
+              <template #icon>
+                <FeatherIcon name="x" class="h-4 w-4" />
+              </template>
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+      <div
+        v-if="notificationsStore().allNotifications?.length"
+        class="divide-y overflow-auto text-base"
+      >
+        <RouterLink
+          v-for="n in notificationsStore().allNotifications"
+          :key="n.comment"
+          :to="getRoute(n)"
+          class="flex cursor-pointer items-start gap-2.5 px-4 py-2.5 hover:bg-gray-100"
+          @click="mark_as_read(n.comment)"
+        >
+          <div class="mt-1 flex items-center gap-2.5">
+            <div
+              class="h-1.5 w-1.5 rounded-full"
+              :class="[n.read ? 'bg-transparent' : 'bg-gray-900']"
+            />
+            <UserAvatar :user="n.from_user.name" size="lg" />
+          </div>
+          <div>
+            <div class="mb-2 space-x-1 leading-5 text-gray-700">
               <span class="font-medium text-gray-900">
                 {{ n.from_user.full_name }}
               </span>
@@ -54,29 +61,35 @@
               <span class="font-medium text-gray-900">
                 {{ n.reference_name }}
               </span>
-            </span>
-          </div>
-          <div class="flex items-center gap-2">
+            </div>
             <div class="text-sm text-gray-600">
               {{ timeAgo(n.creation) }}
             </div>
-            <div v-if="!n.read" class="h-1.5 w-1.5 rounded-full bg-gray-900" />
           </div>
-        </span>
-      </RouterLink>
+        </RouterLink>
+      </div>
+      <div
+        v-else
+        class="flex flex-1 flex-col items-center justify-center gap-2"
+      >
+        <NotificationsIcon class="h-20 w-20 text-gray-300" />
+        <div class="text-lg font-medium text-gray-500">
+          No new notifications
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script setup>
 import MarkAsDoneIcon from '@/components/Icons/MarkAsDoneIcon.vue'
+import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { notificationsStore } from '@/stores/notifications'
 import { globalStore } from '@/stores/global'
 import { timeAgo } from '@/utils'
 import { onClickOutside } from '@vueuse/core'
-import { ref, computed } from 'vue'
-
-const isSidebarCollapsed = computed(() => globalStore().isSidebarCollapsed)
+import { Tooltip } from 'frappe-ui'
+import { ref } from 'vue'
 
 const target = ref(null)
 onClickOutside(

frontend/src/stores/global.js

@@ -7,7 +7,6 @@ export const globalStore = defineStore('crm-global', () => {
   const { $dialog } = app.appContext.config.globalProperties
 
   let twilioEnabled = ref(false)
-  let isSidebarCollapsed = useStorage('isSidebarCollapsed', false)
   let callMethod = () => {}
 
   function setTwilioEnabled(value) {
@@ -22,15 +21,9 @@ export const globalStore = defineStore('crm-global', () => {
     callMethod(number)
   }
 
-  function setIsSidebarCollapsed(value) {
-    isSidebarCollapsed.value = value
-  }
-
   return {
     $dialog,
     twilioEnabled,
-    isSidebarCollapsed,
-    setIsSidebarCollapsed,
     makeCall,
     setTwilioEnabled,
     setMakeCall,