responsive design and bug fixes

apps/web/src/components/navbar/Breadcrumbs.tsx

@@ -0,0 +1,58 @@
+import { useOrganizationParams } from '@/hooks/useOrganizationParams';
+import { api } from '@/utils/api';
+import { ChevronRight, HomeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { Container } from '../Container';
+
+export function Breadcrumbs() {
+  const params = useOrganizationParams();
+
+  const org = api.organization.get.useQuery(
+    {
+      slug: params.organization,
+    },
+    {
+      enabled: !!params.organization,
+      staleTime: Infinity,
+    }
+  );
+
+  const pro = api.project.get.useQuery(
+    {
+      slug: params.project,
+    },
+    {
+      enabled: !!params.project,
+      staleTime: Infinity,
+    }
+  );
+
+  return (
+    <div className="border-b border-border text-xs">
+      <Container className="flex items-center gap-2 h-8">
+        {org.isLoading && pro.isLoading && (
+          <div className="animate-pulse bg-slate-200 h-4 w-24 rounded"></div>
+        )}
+        {org.data && (
+          <>
+            <HomeIcon size={14} />
+            <Link shallow href={`/${org.data.slug}`}>
+              {org.data.name}
+            </Link>
+          </>
+        )}
+
+        {org.data && pro.data && (
+          <>
+            <ChevronRight size={10} />
+            <Link shallow href={`/${org.data.slug}/${pro.data.slug}`}>
+              {pro.data.name}
+            </Link>
+          </>
+        )}
+      </Container>
+    </div>
+  );
+}

apps/web/src/components/navbar/NavbarCreate.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,14 +16,17 @@ export function NavbarCreate() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="sm">Create</Button>
+        <button>Create</button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="end">
         <DropdownMenuLabel>Actions</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           <DropdownMenuItem asChild>
-            <Link href={`/${params.organization}/reports`}>
+            <Link
+              shallow
+              href={`/${params.organization}/${params.project}/reports`}
+            >
               <LineChart className="mr-2 h-4 w-4" />
               <span>Create a report</span>
             </Link>

apps/web/src/components/navbar/NavbarMenu.tsx

@@ -1,24 +1,40 @@
 import { useOrganizationParams } from '@/hooks/useOrganizationParams';
+import { cn } from '@/utils/cn';
 import Link from 'next/link';
 
-import { NavbarCreate } from './NavbarCreate';
+import { NavbarUserDropdown } from './NavbarUserDropdown';
 
 export function NavbarMenu() {
   const params = useOrganizationParams();
   return (
-    <div className="flex gap-6 items-center">
-      <Link href={`/${params.organization}`}>Home</Link>
+    <div className={cn('flex gap-6 items-center text-sm', 'max-sm:flex-col')}>
       {params.project && (
-        <Link href={`/${params.organization}/${params.project}/events`}>
+        <Link shallow href={`/${params.organization}/${params.project}`}>
+          Home
+        </Link>
+      )}
+      {params.project && (
+        <Link shallow href={`/${params.organization}/${params.project}/events`}>
           Events
         </Link>
       )}
       {params.project && (
-        <Link href={`/${params.organization}/${params.project}/profiles`}>
+        <Link
+          shallow
+          href={`/${params.organization}/${params.project}/profiles`}
+        >
           Profiles
         </Link>
       )}
-      <NavbarCreate />
+      {params.project && (
+        <Link
+          shallow
+          href={`/${params.organization}/${params.project}/reports`}
+        >
+          Create report
+        </Link>
+      )}
+      <NavbarUserDropdown />
     </div>
   );
 }

apps/web/src/components/navbar/NavbarUserDropdown.tsx

@@ -27,25 +27,28 @@ export function NavbarUserDropdown() {
       <DropdownMenuContent align="end" className="w-[200px]">
         <DropdownMenuGroup>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/organization`}>
+            <Link
+              href={`/${params.organization}/settings/organization`}
+              shallow
+            >
               <User className="mr-2 h-4 w-4" />
               Organization
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/projects`}>
+            <Link href={`/${params.organization}/settings/projects`} shallow>
               <User className="mr-2 h-4 w-4" />
               Projects
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/clients`}>
+            <Link href={`/${params.organization}/settings/clients`} shallow>
               <User className="mr-2 h-4 w-4" />
               Clients
             </Link>
           </DropdownMenuItem>
           <DropdownMenuItem asChild className="cursor-pointer">
-            <Link href={`/${params.organization}/settings/profile`}>
+            <Link href={`/${params.organization}/settings/profile`} shallow>
               <User className="mr-2 h-4 w-4" />
               Profile
             </Link>