chore: fixed top navigation

Author: raulMarvanWizeline

app/components/charts/SunburstChart.tsx

@@ -79,6 +79,7 @@ const SunburstChart = (props: SunburstElementProps) => {
         .onHover((node: any) => {
           setSelectedNode(node);
         })
+        .width(800)
         .tooltipContent((d: any, node: any) => `Size: <i>${node.value}</i>`)(
         chartRef.current
       );
@@ -91,7 +92,7 @@ const SunburstChart = (props: SunburstElementProps) => {
     }
   }, [selectedNode]);
 
-  return <div ref={chartRef}></div>;
+  return <div ref={chartRef} className="max-w-[800px] z-0"></div>;
 };
 
 export default SunburstChart;

app/components/navigation/TopNavigation.tsx

@@ -35,7 +35,7 @@ export const TopNavigation: React.FC<Props> = ({
 
   return (
     <>
-      <div className="flex justify-between items-center border border-top-nav-border rounded w-28 h-9 p-2 bg-primary">
+      <div className="flex justify-between items-center border border-top-nav-border rounded w-28 h-9 p-2 bg-primary z-[9999]">
         <IconButton className="!p-0" onClick={() => {}}>
           <HelpOutlineOutlinedIcon className="w-5 h-5 !fill-white cursor-pointer" />
         </IconButton>

app/routes/_index.tsx

@@ -62,14 +62,14 @@ export default function Index() {
     <div className="min-h-screen flex flex-col justify-between relative">
       <div className="absolute left-0 top-0 sm:ml-auto sm:mr-auto sm:left-0 sm:right-0">
         <HeaderIcon className="ml-4 mt-4" />
-        <div className="hidden sm:block absolute right-0 top-0 mt-4 mr-4">
-          <TopNavigation
-            newNotifications={newNotifications}
-            notifications={notifications}
-          />
-        </div>
       </div>
-      {!jsonData ? <Loader /> : <SunburstChart data={jsonData} />}
+      <div className="hidden sm:block absolute right-0 top-0 mt-4 mr-4">
+        <TopNavigation
+          newNotifications={newNotifications}
+          notifications={notifications}
+        />
+      </div>
+      {!jsonData ? <Loader /> : <div className="min-h-screen flex flex-col justify-between items-center"><SunburstChart data={jsonData} /></div>}
       <div className="hidden sm:block absolute bottom-0 left-0 mb-4 ml-4">
         <Breadcrumb
           path={["Data and Simulation Generation", "Customer Segmentation"]}