Route layout rendering

export function createRouter() {
  if (posthog && typeof window !== "undefined") {
    posthog.init(import.meta.env.VITE_POSTHOG_KEY, {
      api_host: import.meta.env.VITE_POSTHOG_HOST,
    });
  }
  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      // defaultPreload: 'intent',
      defaultErrorComponent: () => <div>Error</div>,
      defaultNotFoundComponent: () => <div>Not Found</div>,
      defaultSsr: false,
    }),
    queryClient,
  );
}

export function createRouter() {
  if (posthog && typeof window !== "undefined") {
    posthog.init(import.meta.env.VITE_POSTHOG_KEY, {
      api_host: import.meta.env.VITE_POSTHOG_HOST,
    });
  }
  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: { queryClient },
      // defaultPreload: 'intent',
      defaultErrorComponent: () => <div>Error</div>,
      defaultNotFoundComponent: () => <div>Not Found</div>,
      defaultSsr: false,
    }),
    queryClient,
  );
}

import { BottomNavigation } from "@/components/bottom-bars/bottom-navigation";
import { Navigation } from "@/components/headers/app-navigation";
import { AppSidebar } from "@/components/sidebars/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { useAuth } from "@/hooks/use-auth";
import { useIsMobile } from "@/hooks/use-mobile";
import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/app")({
  component: RouteComponent,
  loader: async ({ location }) => {
    return location.pathname;
  },
  ssr: false,
});

const NAVIGATION_ROUTE_MATCH = [
  "/app",
  "/app/chats",
  "/app/websites",
  "/app/workflows",
];

function RouteComponent() {
  const currentPath = Route.useLoaderData();
  const isMobile = useIsMobile();
  const { user } = useAuth();
  console.log("Reasdf", user);
  return (
    <SidebarProvider defaultOpen={false}>
      <AppSidebar />
      <SidebarInset className="overflow-auto">
        {NAVIGATION_ROUTE_MATCH.includes(currentPath) && (
          <Navigation />
        )}
        <Outlet />
        {NAVIGATION_ROUTE_MATCH.includes(currentPath) && isMobile && (
          <BottomNavigation />
        )}
      </SidebarInset>
    </SidebarProvider>
  );
}

import { BottomNavigation } from "@/components/bottom-bars/bottom-navigation";
import { Navigation } from "@/components/headers/app-navigation";
import { AppSidebar } from "@/components/sidebars/app-sidebar";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { useAuth } from "@/hooks/use-auth";
import { useIsMobile } from "@/hooks/use-mobile";
import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/app")({
  component: RouteComponent,
  loader: async ({ location }) => {
    return location.pathname;
  },
  ssr: false,
});

const NAVIGATION_ROUTE_MATCH = [
  "/app",
  "/app/chats",
  "/app/websites",
  "/app/workflows",
];

function RouteComponent() {
  const currentPath = Route.useLoaderData();
  const isMobile = useIsMobile();
  const { user } = useAuth();
  console.log("Reasdf", user);
  return (
    <SidebarProvider defaultOpen={false}>
      <AppSidebar />
      <SidebarInset className="overflow-auto">
        {NAVIGATION_ROUTE_MATCH.includes(currentPath) && (
          <Navigation />
        )}
        <Outlet />
        {NAVIGATION_ROUTE_MATCH.includes(currentPath) && isMobile && (
          <BottomNavigation />
        )}
      </SidebarInset>
    </SidebarProvider>
  );
}