wip

apps/remix/app/components/(dashboard)/settings/layout/mobile-nav.tsx

@@ -0,0 +1,119 @@
+import type { HTMLAttributes } from 'react';
+
+import { Trans } from '@lingui/macro';
+import { Braces, CreditCard, Globe2Icon, Lock, User, Users, Webhook } from 'lucide-react';
+import { Link, useLocation } from 'react-router';
+
+import { cn } from '@documenso/ui/lib/utils';
+import { Button } from '@documenso/ui/primitives/button';
+
+export type MobileNavProps = HTMLAttributes<HTMLDivElement>;
+
+export const MobileNav = ({ className, ...props }: MobileNavProps) => {
+  const { pathname } = useLocation();
+
+  const isBillingEnabled = false; // Todo getFlag('app_billing');
+  const isPublicProfileEnabled = true; // Todo getFlag('app_public_profile');
+
+  return (
+    <div
+      className={cn('flex flex-wrap items-center justify-start gap-x-2 gap-y-4', className)}
+      {...props}
+    >
+      <Link to="/settings/profile">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/profile') && 'bg-secondary',
+          )}
+        >
+          <User className="mr-2 h-5 w-5" />
+          <Trans>Profile</Trans>
+        </Button>
+      </Link>
+
+      {isPublicProfileEnabled && (
+        <Link to="/settings/public-profile">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/public-profile') && 'bg-secondary',
+            )}
+          >
+            <Globe2Icon className="mr-2 h-5 w-5" />
+            <Trans>Public Profile</Trans>
+          </Button>
+        </Link>
+      )}
+
+      <Link to="/settings/teams">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/teams') && 'bg-secondary',
+          )}
+        >
+          <Users className="mr-2 h-5 w-5" />
+          <Trans>Teams</Trans>
+        </Button>
+      </Link>
+
+      <Link to="/settings/security">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/security') && 'bg-secondary',
+          )}
+        >
+          <Lock className="mr-2 h-5 w-5" />
+          <Trans>Security</Trans>
+        </Button>
+      </Link>
+
+      <Link to="/settings/tokens">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/tokens') && 'bg-secondary',
+          )}
+        >
+          <Braces className="mr-2 h-5 w-5" />
+          <Trans>API Tokens</Trans>
+        </Button>
+      </Link>
+
+      <Link to="/settings/webhooks">
+        <Button
+          variant="ghost"
+          className={cn(
+            'w-full justify-start',
+            pathname?.startsWith('/settings/webhooks') && 'bg-secondary',
+          )}
+        >
+          <Webhook className="mr-2 h-5 w-5" />
+          <Trans>Webhooks</Trans>
+        </Button>
+      </Link>
+
+      {isBillingEnabled && (
+        <Link to="/settings/billing">
+          <Button
+            variant="ghost"
+            className={cn(
+              'w-full justify-start',
+              pathname?.startsWith('/settings/billing') && 'bg-secondary',
+            )}
+          >
+            <CreditCard className="mr-2 h-5 w-5" />
+            <Trans>Billing</Trans>
+          </Button>
+        </Link>
+      )}
+    </div>
+  );
+};