Fix: Topbar (#2276)

* refactor(topbar): update router config

* chore(topbar): fix deprecated icons

extensions/widgets/top-bar/src/components/topbar-widget.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { RouterProvider } from '@tanstack/react-router';
 import { useRootComponentProps } from '@akashaorg/ui-awf-hooks';
-import { createRouter } from './widget-routes';
+import { router } from './widget-routes';
 
 declare module '@tanstack/react-router' {
   interface Register {
-    router: ReturnType<typeof createRouter>;
+    router: typeof router;
   }
 }
 
@@ -15,7 +15,7 @@ const TopbarWidget: React.FC<unknown> = () => {
 
   return (
     <I18nextProvider i18n={getTranslationPlugin().i18n}>
-      <RouterProvider router={createRouter()} />
+      <RouterProvider router={router} />
     </I18nextProvider>
   );
 };

extensions/widgets/top-bar/src/components/topbar.tsx

@@ -4,8 +4,8 @@ import { ThemingEvents } from '@akashaorg/typings/lib/ui';
 import Button from '@akashaorg/design-system-core/lib/components/Button';
 import Icon from '@akashaorg/design-system-core/lib/components/Icon';
 import {
-  ArrowLeftOnRectangleIcon,
-  ArrowRightOnRectangleIcon,
+  ArrowLeftEndOnRectangleIcon,
+  ArrowRightEndOnRectangleIcon,
   ChevronLeftIcon,
 } from '@akashaorg/design-system-core/lib/components/Icon/hero-icons-outline';
 import { Akasha } from '@akashaorg/design-system-core/lib/components/Icon/akasha-icons';
@@ -115,7 +115,7 @@ const Topbar: React.FC<ITopbarProps> = props => {
       <Stack direction="row" spacing="gap-x-2">
         <Button
           iconOnly={true}
-          icon={sidebarVisible ? <ArrowLeftOnRectangleIcon /> : <ArrowRightOnRectangleIcon />}
+          icon={sidebarVisible ? <ArrowLeftEndOnRectangleIcon /> : <ArrowRightEndOnRectangleIcon />}
           onClick={onSidebarToggle}
           greyBg={true}
           variant="primary"

extensions/widgets/top-bar/src/components/widget-routes/index.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
-import { rootRouteWithContext, Router } from '@tanstack/react-router';
+import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
 import RootComponent from './root-component';
 import ErrorComponent from './error-component';
 
-const rootRoute = rootRouteWithContext()({
+const rootRoute = createRootRoute({
+  component: Outlet,
+});
+
+const defaultRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/$',
   component: RootComponent,
 });
 
-const routeTree = rootRoute;
+const routeTree = rootRoute.addChildren([defaultRoute]);
 
-export const createRouter = () =>
-  new Router({
-    routeTree,
-    basepath: '',
-    defaultErrorComponent: ({ error }) => (
-      <ErrorComponent error={(error as unknown as Error).message} />
-    ),
-  });
+export const router = createRouter({
+  routeTree,
+  defaultErrorComponent: ({ error }) => (
+    <ErrorComponent error={(error as unknown as Error).message} />
+  ),
+});