update

src/Layouts/DefaultLayout.tsx

@@ -56,9 +56,9 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
           <Image w={55} src={logo} />
         </HStack>
         <VStack  w={'100%'} p={2} pt={0}>
-          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
+          {nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
             <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
+            <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px' } key={index} bg={'#fff'} rounded={'lg'} collapsible>
               <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
                 <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
                 {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -1,56 +1,41 @@
-import { Box, HStack, Text, Skeleton, VStack, Center } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame";
-import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
 import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
-import PrivacyPolicySkeleton from "./privacyPolicySkeleton";
+import MainFrame from "../../../components/MainFrame";
 import { Spinner } from "../../../components/Sipnner/Spinner";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
 
 
 const PrivacyPolicy = () => {
-  // Fetch data using RTK Query with type annotations
   const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
-
-  console.log(isLoading);
-  
-
-  // Log the response for debugging
-  console.log("====================================");  
-  console.log(data);
-  console.log("====================================");
-  
-
   return (
     <MainFrame transperant={true}>
-      <VStack  gap={4} pb={4} pt={0}>
-      {isLoading?
-      <Spinner/>:data?.data?.map(({id,content}, index)=><VStack bg={'#fff'} 
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}  rounded={'lg'} p={3} key={id}>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-         
-          py={0}
-          px={0}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-            Privacy Policy
-          </Text>
+      <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, privacy_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}
 
-            <PrivacyPolicyAddModel />
-        </HStack>
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                Privacy Policy <Badge variant={'surface'}  colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
+              </Text>
 
-        {/* Render multiple skeletons or content based on loading state */}
-       
-          <Text
-            as="p"
-            fontSize="sm"
-            fontWeight={400}
-            color="#1D1D1D"
-          >
-            {content}
-          </Text>
-    
-      </VStack>)}
+              <PrivacyPolicyAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
       </VStack>
     </MainFrame>
   );

src/Routes/Nav.ts

@@ -17,7 +17,7 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          // path: "/manage-users",
+          initPath: "/manage-users",
           Icon: BiUserPin,
           type:'multiple',
           children: [
@@ -65,7 +65,7 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          // path: "",
+          initPath: "/manage-cms",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
@@ -104,7 +104,7 @@ export const nav = [
         },
         {
           title: "Master Module",
-          // path: "/master-module",
+          initPath: "/master-module",
           Icon: BsBoxes,
           type:'multiple',
           children: [

src/components/MainFrame.tsx

@@ -14,12 +14,12 @@ interface MainFrameProps {
 
 const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
+    <MotionVStack   overflow={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
         h="100%"
         bg={transperant?'transperant':"#ffffff"}
-        // overflow={'scroll'}
+        overflow={'scroll'}
         rounded="lg"
         boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
         pt={transperant?0:3}

src/index.css

@@ -42,6 +42,7 @@ body {
   transition: all 0.5s;
   border-radius: 8px;
   /* background-color: #e2e8f01c; */
+  
 }
 
 .active:hover {
@@ -153,11 +154,13 @@ body {
   width: 6px;
   height: 8px;
   cursor: pointer;
+
 }
 
 /* Scrollbar track */
 ::-webkit-scrollbar-track {
   background: transparent; /* No visible track */
+  border-radius: 50%;
 }
 
 /* Scrollbar thumb (the draggable part) */