@evenicanpm/storefront-core 1.2.2 → 1.4.0

package/src/components-v2/mini-cart/components/top-header.tsx

@@ -1,15 +1,16 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
-import IconButton from "@mui/material/IconButton";
-import ClearIcon from "@mui/icons-material/Clear";
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import {
 	FlexBetween,
 	FlexBox,
 } from "@evenicanpm/storefront-core/src/components-v2/flex-box/index";
-import { MdOutlineShoppingBag as CartBagIcon } from "react-icons/md";
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import ClearIcon from "@mui/icons-material/Clear";
+import IconButton from "@mui/material/IconButton";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { createContext, useContext } from "react";
+import { MdOutlineShoppingBag as CartBagIcon } from "react-icons/md";
 
 interface TopHeaderContextValue {
 	total: number;
@@ -42,9 +43,9 @@ TopHeader.Heading = ({
 	icon?: React.ReactNode;
 }) => {
 	const ctx = useContext(TopHeaderContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { total } = ctx;
-	const t = useTranslations("Cart");
 
 	return (
 		<FlexBox gap={1} alignItems="center" color="secondary.main">
@@ -62,9 +63,9 @@ TopHeader.CloseButton = ({
 	icon?: React.ReactNode;
 }) => {
 	const ctx = useContext(TopHeaderContext);
+	const t = useTranslations("Cart");
 	if (!ctx) return null;
 	const { toggle } = ctx;
-	const t = useTranslations("Cart");
 
 	return (
 		<IconButton onClick={toggle} title={t("closeMiniCart")}>

package/src/components-v2/mini-cart/mini-cart-trigger.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import React, { useState, useContext, createContext } from "react";
-import { Badge, Drawer, IconButton } from "@mui/material";
-import { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
-import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import type { Cart } from "@evenicanpm/storefront-core/src/api-manager/schemas/cart.schema";
 import { MiniCart } from "@evenicanpm/storefront-core/src/components-v2/mini-cart/index";
+import { useNotification } from "@evenicanpm/storefront-core/src/providers/notifications/use-notification";
+import { Badge, Drawer, IconButton } from "@mui/material";
+import React, { createContext, useContext, useState } from "react";
 
 const BADGE_STYLES = {
 	"& .MuiBadge-badge": {

package/src/components-v2/mini-cart/mini-cart.tsx

@@ -1,20 +1,19 @@
 "use client";
 
-import React, { createContext, useContext } from "react";
-import { useRouter } from "next/navigation";
-import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
-
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
-import TopHeader from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/top-header";
+import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
+import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
+import BottomActions from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/bottom-actions";
 import MiniCartItem from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/cart-item";
 import EmptyCart from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/empty-view";
-import BottomActions from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/bottom-actions";
-
-import { Cart, CartLine } from "@/schemas/cart.schema";
+import TopHeader from "@evenicanpm/storefront-core/src/components-v2/mini-cart/components/top-header";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar/index";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import { useRouter } from "next/navigation";
 import { useFormatter } from "next-intl";
-import useUpdateCartLines from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/update-cart-lines";
-import useDeleteCartLine from "@evenicanpm/storefront-core/src/api-manager/services/cart/mutations/delete-cart-line";
+import type React from "react";
+import { createContext, useContext } from "react";
+import type { Cart, CartLine } from "@/schemas/cart.schema";
 
 interface MiniCartContextValue {
 	cart: Cart;

package/src/components-v2/mobile-navigation/MobileNavigationBar.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MobileNavigationBar } from "./index";
 import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
 import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MobileNavigationBar } from "./index";
 
 const meta = {
 	title: "MobileNavigationBar",

package/src/components-v2/mobile-navigation/mobile-navigation-bar.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Fragment, createContext, useContext } from "react";
-import Box from "@mui/material/Box";
-import Badge from "@mui/material/Badge";
-import { Theme } from "@mui/material/styles";
-import { SvgIconComponent } from "@mui/icons-material";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTranslations } from "next-intl";
+// API and Context
+import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
+import CategoryOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/category-outline";
+// ICON COMPONENTS
+import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
+import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/shopping-bag-outlined";
+import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
 // STYLED COMPONENTS
 import {
 	iconStyle,
@@ -14,14 +14,14 @@ import {
 	StyledNavLink,
 	Wrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/mobile-navigation/styles/index";
-// ICON COMPONENTS
-import Home from "@evenicanpm/storefront-core/src/components-v2/icons/home";
-import User2 from "@evenicanpm/storefront-core/src/components-v2/icons/user2";
-import CategoryOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/category-outline";
-import ShoppingBagOutlined from "@evenicanpm/storefront-core/src/components-v2/icons/shopping-bag-outlined";
-// API and Context
-import getCart from "@evenicanpm/storefront-core/src/api-manager/services/cart/queries/get-cart";
 import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import type { SvgIconComponent } from "@mui/icons-material";
+import Badge from "@mui/material/Badge";
+import Box from "@mui/material/Box";
+import type { Theme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTranslations } from "next-intl";
+import { createContext, Fragment, useContext } from "react";
 
 /**
 Usage Examples:
@@ -62,7 +62,7 @@ const MobileNavContext = createContext<{ menuList: MenuItemProps[] }>({
 export default function MobileNavigationBar({
 	children,
 	menuList,
-}: MobileNavigationBarProps) {
+}: Readonly<MobileNavigationBarProps>) {
 	const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
 
 	const defaultMenuList: MenuItemProps[] = [

package/src/components-v2/mobile-navigation/styles/index.ts

@@ -1,7 +1,7 @@
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import { layoutConstant } from "@evenicanpm/ui";
 import Drawer from "@mui/material/Drawer";
 import styled from "@mui/material/styles/styled";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
-import { layoutConstant } from "@evenicanpm/storefront-core/src/components-v2/utils/constants";
 
 // STYLED COMPONENTS
 const Wrapper = styled("div")(({ theme }) => ({

package/src/components-v2/nav-link/nav-link-2.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
 // GLOBAL CUSTOM COMPONENT
 import { Small } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import Link from "next/link";
 
 // ==============================================================
 interface NavLinkProps {
@@ -16,7 +16,7 @@ export default function NavLink2({
 	color,
 	title = "SHOP NOW",
 	borderColor = "primary.600",
-}: NavLinkProps) {
+}: Readonly<NavLinkProps>) {
 	return (
 		<Link href={url}>
 			<Small

package/src/components-v2/nav-link/nav-link-3.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
-// MUI ICON COMPONENT
-import ArrowForward from "@mui/icons-material/ArrowForward";
 // GLOBAL CUSTOM COMPONENTS
 import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// MUI ICON COMPONENT
+import ArrowForward from "@mui/icons-material/ArrowForward";
+import Link from "next/link";
 
 //   ==========================================
 interface Props {
@@ -21,7 +21,7 @@ export default function NavLink3({
 	color = "text.primary",
 	hoverColor = "primary.main",
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	return (
 		<Link href={href}>
 			<Span

package/src/components-v2/nav-link/nav-link.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { AnchorHTMLAttributes, CSSProperties } from "react";
 import styled from "@mui/material/styles/styled";
 import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { AnchorHTMLAttributes, CSSProperties } from "react";
 
 // STYLED COMPONENT
 const StyledLink = styled(Link, {
@@ -30,7 +30,7 @@ export default function NavLink({
 	style,
 	className,
 	...props
-}: NavLinkProps) {
+}: Readonly<NavLinkProps>) {
 	const pathname = usePathname();
 
 	// CHECK CURRENT ROUTE

package/src/components-v2/navbar/categories.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React, { createContext, useContext, ReactNode } from "react";
-import { MdChevronRight as ChevronRight } from "react-icons/md";
-import { useTranslations } from "next-intl";
-
-import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import CategoryMenu from "@evenicanpm/storefront-core/src/components-v2/categories/category-menu";
 import Category from "@evenicanpm/storefront-core/src/components-v2/icons/category";
 import { CategoryMenuButton } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
 
+import { Paragraph } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { useTranslations } from "next-intl";
+import React, { createContext, type ReactNode, useContext } from "react";
+import { MdChevronRight as ChevronRight } from "react-icons/md";
+
 type CategoriesContextValue = {
 	label: string;
 };
@@ -17,7 +17,9 @@ const CategoriesContext = createContext<CategoriesContextValue | undefined>(
 	undefined,
 );
 
-export default function Categories({ children }: { children?: ReactNode }) {
+export default function Categories({
+	children,
+}: Readonly<{ children?: ReactNode }>) {
 	const t = useTranslations("Navigation");
 
 	const label = t("topLevelCategoryName");

package/src/components-v2/navbar/category-based-menu/category-based-menu.tsx

@@ -1,28 +1,29 @@
 "use client";
 
-import React, { createContext, useContext, useState } from "react";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Avatar from "@mui/material/Avatar";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import ChevronRight from "@mui/icons-material/ChevronRight";
 // GLOBAL COMPONENTS
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
-import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
-// LOCAL COMPONENTS
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
 // STYLED COMPONENTS
 import {
-	Wrapper,
-	StyledCard,
-	MenusContainer,
 	CategoryList,
 	CategoryListItem,
+	MenusContainer,
+	StyledCard,
 	SubCategoryList,
 	SubCategoryListItem,
+	Wrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/category-based-menu/styles";
+// LOCAL COMPONENTS
+import type { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Avatar from "@mui/material/Avatar";
+import Box from "@mui/material/Box";
+import Link from "next/link";
+import type React from "react";
+import { createContext, useContext, useState } from "react";
 
 type MenuContextValue = {
 	openList: string;
@@ -106,13 +107,13 @@ CategoryBasedMenu.Section = () => {
 		<Scrollbar autoHide={false} sx={{ width: "100%" }}>
 			<Box px={6} py={2} height="100%">
 				{category.items.map((item, idx) => (
-					<div key={idx}>
+					<div key={item.title + idx}>
 						<H6 fontWeight={700} my={3}>
 							{item.title}
 						</H6>
 						<SubCategoryList>
 							{item.items.map((sub, subIdx) => (
-								<CategoryBasedMenu.Item item={sub} key={subIdx} />
+								<CategoryBasedMenu.Item item={sub} key={sub.title + subIdx} />
 							))}
 						</SubCategoryList>
 					</div>

package/src/components-v2/navbar/category-based-menu/styles.ts

@@ -1,9 +1,9 @@
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import styled from "@mui/material/styles/styled";
 // LOCAL CUSTOM COMPONENT
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 import getPaletteColor from "@evenicanpm/storefront-core/src/lib/get-palette-color";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
 
 const Wrapper = styled("div")(({ theme }) => ({
 	cursor: "pointer",

package/src/components-v2/navbar/category-based-menu/types.ts

@@ -1,4 +1,4 @@
-import { SvgIconComponent } from "@mui/icons-material";
+import type { SvgIconComponent } from "@mui/icons-material";
 
 export type NavLink = {
 	url: string;

package/src/components-v2/navbar/mega-menu/mega-menu.tsx

@@ -1,22 +1,23 @@
 "use client";
 
-import React, { RefObject, createContext, useContext } from "react";
-import Grid from "@mui/material/Grid2";
-import Card from "@mui/material/Card";
-import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
-import List from "@mui/material/List";
 // GLOBAL COMPONENTS
 import FlexRowCenter from "@evenicanpm/storefront-core/src/components-v2/flex-box/flex-row-center";
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-// HOOKS
-import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
 // STYLED
 import {
-	MenusContainer,
-	Wrapper,
 	MenuListItem,
+	MenusContainer,
 	StyledNavLink,
+	Wrapper,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/mega-menu/styles";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// HOOKS
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid2";
+import List from "@mui/material/List";
+import type React from "react";
+import { createContext, type RefObject, useContext } from "react";
 
 type MegaMenuContextType = {
 	isLeftOverflowing: boolean;

package/src/components-v2/navbar/mega-menu/styles.ts

@@ -1,7 +1,7 @@
-import ListItem from "@mui/material/ListItem";
-import styled from "@mui/material/styles/styled";
 // GLOBAL CUSTOM COMPONENTS
 import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link/index";
+import ListItem from "@mui/material/ListItem";
+import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENTS
 export const Wrapper = styled("div")(({ theme }) => ({

package/src/components-v2/navbar/mobile-menu/mobile-menu.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, vi, beforeEach } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
 import MobileMenu from "@evenicanpm/storefront-core/src/components-v2/navbar/mobile-menu/mobile-menu";
 import { transformCmsNav } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
-import { CmsNavItem } from "@/cms/interfaces/navigation";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, it, vi } from "vitest";
+import type { CmsNavItem } from "@/cms/interfaces/navigation";
 
 const useContext = vi.fn();
 

package/src/components-v2/navbar/mobile-menu/mobile-menu.tsx

@@ -1,22 +1,22 @@
 "use client";
 
-import { useContext } from "react";
+import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
+import type { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
+import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
 import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import Divider from "@mui/material/Divider";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
+import { useContext } from "react";
 import {
-	MdMenu as Menu,
 	MdClear as Clear,
 	MdExpandMore as ExpandMore,
+	MdMenu as Menu,
 } from "react-icons/md";
-import Scrollbar from "@evenicanpm/storefront-core/src/components-v2/scrollbar";
-import { H6 } from "@evenicanpm/storefront-core/src/components-v2/Typography";
-import { NavLink } from "@evenicanpm/storefront-core/src/components-v2/nav-link";
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
-import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 
 type RootProps = { children: React.ReactNode };
 
@@ -76,7 +76,11 @@ MobileMenu.List = ({ data }: { data: TransformedNavItem[] }) => {
 	return (
 		<>
 			{data.map((item, idx) => (
-				<MobileMenu.Item key={idx} item={item} onClose={toggleMobileSideNav} />
+				<MobileMenu.Item
+					key={item.title + idx}
+					item={item}
+					onClose={toggleMobileSideNav}
+				/>
 			))}
 		</>
 	);
@@ -107,7 +111,7 @@ MobileMenu.Item = ({
 }) => {
 	const { href, title, items } = item;
 
-	if (items && items.length) {
+	if (items?.length) {
 		return (
 			<Accordion square elevation={0} disableGutters sx={ACCORDION_STYLES}>
 				<AccordionSummary
@@ -118,7 +122,11 @@ MobileMenu.Item = ({
 				</AccordionSummary>
 				<Box mx={2}>
 					{items.map((sub, idx) => (
-						<MobileMenu.Item key={idx} item={sub} onClose={onClose} />
+						<MobileMenu.Item
+							key={sub.title + idx}
+							item={sub}
+							onClose={onClose}
+						/>
 					))}
 				</Box>
 			</Accordion>

package/src/components-v2/navbar/nav-list/cms-nav.test.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { expect, describe, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
 import NavCms from "@evenicanpm/storefront-core/src/components-v2/navbar/nav-list/index";
+import { NavContext } from "@evenicanpm/storefront-core/src/providers/nav-provider";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, it } from "vitest";
 
 describe("NavCms", () => {
 	it("Renders the page links and dropdown menu", () => {

package/src/components-v2/navbar/nav-list/nav-item-child.tsx

@@ -1,24 +1,23 @@
 "use client";
 
-import { PropsWithChildren, RefObject } from "react";
-import { usePathname } from "next/navigation";
-import MenuItem from "@mui/material/MenuItem";
-// MUI ICON COMPONENTS
-import ArrowLeft from "@mui/icons-material/ArrowLeft";
-import ArrowRight from "@mui/icons-material/ArrowRight";
-// GLOBAL CUSTOM HOOKS
-import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
-import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
 import BazaarCard from "@evenicanpm/storefront-core/src/components-v2/BazaarCard";
 // STYLED COMPONENTS
 import {
 	ParentNav,
 	ParentNavItem,
 } from "@evenicanpm/storefront-core/src/components-v2/navbar/styles";
-
-import { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+import type { TransformedNavItem } from "@evenicanpm/storefront-core/src/components-v2/navbar/utils/transform-nav";
+// GLOBAL CUSTOM COMPONENTS
+import { Span } from "@evenicanpm/storefront-core/src/components-v2/Typography";
+// GLOBAL CUSTOM HOOKS
+import useOverflowDetect from "@evenicanpm/storefront-core/src/hooks/use-overflow-detect";
+import useSettings from "@evenicanpm/storefront-core/src/hooks/use-settings";
+// MUI ICON COMPONENTS
+import ArrowLeft from "@mui/icons-material/ArrowLeft";
+import ArrowRight from "@mui/icons-material/ArrowRight";
+import MenuItem from "@mui/material/MenuItem";
+import { usePathname } from "next/navigation";
+import type { PropsWithChildren, RefObject } from "react";
 
 // ==============================================================
 interface Props extends PropsWithChildren {
@@ -26,7 +25,7 @@ interface Props extends PropsWithChildren {
 }
 // ==============================================================
 
-export default function NavItemChild({ nav, children }: Props) {
+export default function NavItemChild({ nav, children }: Readonly<Props>) {
 	const pathname = usePathname();
 	const { settings } = useSettings();
 	const { checkOverflow, elementRef, isLeftOverflowing, isRightOverflowing } =