add settings navigation

frontend/src/components/sidebar/navigation/navigation-link.tsx

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+import { buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface NavigationLinkProps {
+  children: ReactNode,
+  href: string;
+  icon?: ReactNode;
+  variant?: "default" | "ghost" | "outline";
+  className?: string;
+}
+
+export default function NavigationLink({ children, href, icon, variant = "ghost", className }: NavigationLinkProps) {
+  return (
+    <Link href={href} className={cn(buttonVariants({ variant: variant }), className)}>
+      {icon && <span className="mr-[8px]">
+        {icon}
+      </span>}
+      <span className="text-ellipsis overflow-hidden">
+        {children}
+      </span>
+    </Link>
+  );
+}