Added TSdoc

src/components/AppNavbar/Navbar.tsx

@@ -1,19 +1,23 @@
-import { AppShell, ScrollArea } from '@mantine/core'
+import React from 'react';
-import React from 'react'
+import { AppShell, ScrollArea } from '@mantine/core';
-import allMenu from './_data/allMenu'
-import MenuItem from './_components/MenuItem'
 
+import allMenu from "./_data/allMenu";
+import MenuItem from "./_components/MenuItem";
+
+/**
+ * `AppNavbar` is a React functional component that renders the application's navigation bar.
+ * It utilizes data from `allMenu` to create a list of menu items displayed in a scrollable area.
+ *
+ * @returns A React element representing the application's navigation bar.
+ */
 export default function AppNavbar() {
 
-    const menus = allMenu.map((menu, i) => <MenuItem menu={menu} key={i} />)
+    // Mapping all menu items to MenuItem components
+	const menus = allMenu.map((menu, i) => <MenuItem menu={menu} key={i} />);
 
-    return (
+	return (
-        <AppShell.Navbar p="md">
+		<AppShell.Navbar p="md">
-            <ScrollArea style={{flex: "1"}}>
+			<ScrollArea style={{ flex: "1" }}>{menus}</ScrollArea>
-                <div>
+		</AppShell.Navbar>
-                    {menus}
+	);
-                </div>
-            </ScrollArea>
-        </AppShell.Navbar>
-    )
 }

src/components/AppNavbar/_components/ChildMenu/ChildMenu.tsx

@@ -1,14 +1,22 @@
-import { Text } from "@mantine/core";
 import React from "react";
 
+import { Text } from "@mantine/core";
+
 import classNames from "./childMenu.module.css";
-import { MenuItem } from "../_data/allMenu";
+import { MenuItem } from "../../_data/allMenu";
-import { isNotEmpty } from "@mantine/form";
 
 interface Props {
 	item: NonNullable<MenuItem["children"]>[number];
 }
 
+/**
+ * `ChildMenu` is a React functional component that renders a child menu item.
+ * It displays the item as a text link.
+ *
+ * @param props - The component props.
+ * @param props.item - The child menu item data.
+ * @returns A React element representing a child menu item.
+ */
 export default function ChildMenu(props: Props) {
 	return (
 		<Text<"a">

src/components/AppNavbar/_components/ChildMenu/index.ts

@@ -0,0 +1,3 @@
+import ChildMenu from "./ChildMenu";
+
+export default ChildMenu;

src/components/AppNavbar/_components/MenuItem/MenuItem.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import {
 	Box,
 	Collapse,
@@ -7,16 +8,24 @@ import {
 	UnstyledButton,
 	rem,
 } from "@mantine/core";
-import { MenuItem } from "../_data/allMenu";
 import { TbChevronRight } from "react-icons/tb";
 
+import { MenuItem } from "../../_data/allMenu";
+import ChildMenu from "../ChildMenu/ChildMenu";
 import classNames from "./menuItem.module.css";
-import ChildMenu from "./ChildMenu";
 
 interface Props {
 	menu: MenuItem;
 }
 
+/**
+ * `MenuItem` is a React functional component that displays an individual menu item.
+ * It can optionally include a collapsible sub-menu for items with children.
+ *
+ * @param props - The component props.
+ * @param props.menu - The menu item data to display.
+ * @returns A React element representing an individual menu item.
+ */
 export default function MenuItem({ menu }: Props) {
 	const hasChildren = Array.isArray(menu.children);
 
@@ -26,46 +35,50 @@ export default function MenuItem({ menu }: Props) {
 		setOpened((prev) => !prev);
 	};
 
-	const subItems = (hasChildren ? menu.children! : []).map((child, i) => (
+	// Mapping children menu items if available
-		<ChildMenu key={i} item={child} />
+	const subItems = (hasChildren ? menu.children! : []).map((child, index) => (
+		<ChildMenu key={index} item={child} />
 	));
 
 	return (
 		<>
-			{/* Main Section */}
+			{/* Main Menu Item */}
 			<UnstyledButton
 				onClick={toggleOpenMenu}
 				className={classNames.control}
 			>
 				<Group justify="space-between" gap={0}>
-					{/* Left Section */}
+					
+					{/* Icon and Label */}
 					<Box style={{ display: "flex", alignItems: "center" }}>
-						{/* Icon */}
 						<ThemeIcon variant="light" size={30} color={menu.color}>
 							<menu.icon
 								style={{ width: rem(18), height: rem(18) }}
 							/>
 						</ThemeIcon>
 
-						{/* Label */}
 						<Box ml="md">{menu.label}</Box>
 					</Box>
 
-					{/* Right Section (Chevron if available) */}
+					{/* Chevron Icon for collapsible items */}
 					{hasChildren && (
 						<TbChevronRight
-							// stroke="1.5"
+							strokeWidth={1.5}
 							style={{
 								width: rem(16),
 								height: rem(16),
-								transform: opened ? "rotate(-90deg)" : "rotate(90deg)",
+								transform: opened
+									? "rotate(-90deg)"
+									: "rotate(90deg)",
 							}}
-                            className={classNames.chevron}
+							className={classNames.chevron}
 						/>
 					)}
 				</Group>
 			</UnstyledButton>
-			{hasChildren ? <Collapse in={opened}>{subItems}</Collapse> : null}
+
+			{/* Collapsible Sub-Menu */}
+			{hasChildren && <Collapse in={opened}>{subItems}</Collapse>}
 		</>
 	);
 }

src/components/AppNavbar/_components/MenuItem/index.ts

@@ -0,0 +1,3 @@
+import MenuItem from "./MenuItem";
+
+export default MenuItem;

src/components/DashboardLayout/DashboardLayout.tsx

@@ -1,16 +1,25 @@
 "use client";
 import React from "react";
-import { AppShell, AppShellHeader, Burger } from "@mantine/core";
+import { AppShell } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+
 import AppHeader from "../AppHeader";
 import AppNavbar from "../AppNavbar";
 
-import { useDisclosure } from "@mantine/hooks";
-
 interface Props {
 	children: React.ReactNode;
 }
 
+/**
+ * `DashboardLayout` is a React functional component that provides a layout structure
+ * for the dashboard, including a header, navigation bar, and main content area.
+ *
+ * @param props - The component props.
+ * @param props.children - The child components to be rendered inside the layout.
+ * @returns A React element representing the dashboard layout.
+ */
 export default function DashboardLayout(props: Props) {
+	// State and toggle function for handling the disclosure of the navigation bar
 	const [openNavbar, { toggle }] = useDisclosure(false);
 
 	return (
@@ -29,7 +38,9 @@ export default function DashboardLayout(props: Props) {
 			{/* Navbar */}
 			<AppNavbar />
 
-			<AppShell.Main>{props.children}</AppShell.Main>
+			<AppShell.Main className="bg-slate-100">
+				{props.children}
+			</AppShell.Main>
 		</AppShell>
 	);
 }