mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Notification, Sidebar): enhance styling and responsiveness

Browse Source 
- 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.
This commit is contained in:
AmirReza Jamali
2026-04-15 13:02:17 +03:30
parent 2f28ae8625
commit 5a96dd2341
2 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layouts/header/notification/index.tsx
+5 -5
View File
@@ -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>