refactor(Notification, Sidebar): enhance styling and responsiveness

- Updated the Notification component's dropdown styling for improved responsiveness and visual consistency.
- Adjusted the Sidebar component's z-index handling based on mobile state to ensure proper layering during interactions.

src/components/Layouts/header/notification/index.tsx

@@ -8,7 +8,7 @@ import {
 import Modal from "@/components/ui/modal";
 import { useMarkNotificationAsSeen } from "@/hooks/queries/useNotificationQueries";
 import { useIsMobile } from "@/hooks/use-mobile";
-import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory"; // Import the type
+import { TNotificationDetailsResponse } from "@/lib/api/types/NotificationHistory";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { useState } from "react";
@@ -68,13 +68,13 @@ export function Notification() {
 
         <DropdownContent
           align={isMobile ? "end" : "center"}
-          className="border border-stroke bg-white px-3.5 py-3 shadow-md dark:border-dark-3 dark:bg-gray-dark min-[350px]:min-w-[20rem]"
+          className="w-[15rem] max-w-[calc(100vw-1rem)] min-[360px]:w-[16rem] min-[390px]:w-[17rem] min-[430px]:w-[18rem] sm:w-[22rem] border border-stroke bg-white px-2.5 py-3 shadow-md sm:px-3.5 dark:border-dark-3 dark:bg-gray-dark"
         >
-          <div className="mb-1 flex items-center justify-between px-2 py-1.5">
-            <span className="text-lg font-medium text-dark dark:text-white">
+          <div className="mb-1 flex flex-wrap items-center justify-between gap-2 px-1 py-1.5 sm:px-2">
+            <span className="text-base font-medium text-dark sm:text-lg dark:text-white">
               Notifications
             </span>
-            <span className="rounded-md bg-primary px-[9px] py-0.5 text-xs font-medium text-white">
+            <span className="shrink-0 rounded-md bg-primary px-[9px] py-0.5 text-xs font-medium text-white">
               {unreadNotificationCount} new
             </span>
           </div>

src/components/Layouts/sidebar/index.tsx

@@ -60,7 +60,9 @@ export function Sidebar() {
       <aside
         className={cn(
           "shrink-0 overflow-hidden border-r border-gray-200 bg-white transition-[width] duration-200 ease-linear dark:border-gray-800 dark:bg-gray-dark",
-          isMobile ? "fixed bottom-0 top-0 z-50" : "sticky top-0 h-screen",
+          isMobile
+            ? cn("fixed bottom-0 top-0", isOpen ? "z-50" : "z-20")
+            : "sticky top-0 h-screen",
           isMobile
             ? isOpen
               ? "w-[290px]"