refactor(notification): blocking added

frontend/src/components/Sidebar/DocBar.tsx

@@ -0,0 +1,105 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { ChevronRight } from "lucide-react";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../ui/collapsible";
+
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+const docs = [
+	{
+		title: "Notifications",
+		url: "/intro",
+		//icon,
+		isActive: window.location.pathname.includes("notifications") ?? false,
+		items: [
+			{
+				title: "Reprints",
+				url: "/reprints",
+			},
+			{
+				title: "New Blocking order",
+				url: "/qualityBlocking",
+			},
+		],
+	},
+];
+export default function DocBar() {
+	const { setOpen } = useSidebar();
+	const pathname = useRouterState({
+		select: (s) => s.location.pathname,
+	});
+
+	const isNotifications = pathname.includes("notifications");
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Docs</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					<SidebarMenuItem key={"docs"}>
+						<SidebarMenuButton asChild>
+							<Link to={"/docs"} onClick={() => setOpen(false)}>
+								{/* <item.icon /> */}
+								<span>{"Intro"}</span>
+							</Link>
+						</SidebarMenuButton>
+					</SidebarMenuItem>
+				</SidebarMenu>
+				<SidebarMenu>
+					{docs.map((item) => (
+						<Collapsible
+							key={item.title}
+							asChild
+							defaultOpen={isNotifications}
+							className="group/collapsible"
+						>
+							<SidebarMenuItem>
+								<CollapsibleTrigger asChild>
+									<SidebarMenuButton tooltip={item.title}>
+										<Link
+											to={"/docs/$"}
+											params={{ _splat: `notifications${item.url}` }}
+										>
+											{item.title}
+										</Link>
+										<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+									</SidebarMenuButton>
+								</CollapsibleTrigger>
+								<CollapsibleContent>
+									<SidebarMenuSub>
+										{item.items?.map((subItem) => (
+											<SidebarMenuSubItem key={subItem.title}>
+												<SidebarMenuSubButton asChild>
+													<Link
+														to={"/docs/$"}
+														params={{ _splat: `notifications${subItem.url}` }}
+													>
+														{subItem.title}
+													</Link>
+												</SidebarMenuSubButton>
+											</SidebarMenuSubItem>
+										))}
+									</SidebarMenuSub>
+								</CollapsibleContent>
+							</SidebarMenuItem>
+						</Collapsible>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/components/ui/sidebar";
 import { useSession } from "@/lib/auth-client";
 import AdminSidebar from "./AdminBar";
+import DocBar from "./DocBar";
 
 export function AppSidebar() {
 	const { data: session } = useSession();
@@ -21,6 +22,7 @@ export function AppSidebar() {
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
+							<DocBar/>
 							{session &&
 								(session.user.role === "admin" ||
 									session.user.role === "systemAdmin") && (