feat: add "Learn More" section to SidebarUserProfile with links to documentation and GitHub, and update translations for multiple languages

This commit is contained in:
Anish Sarkar 2026-03-08 20:19:15 +05:30
parent f08ca26e3e
commit 0f2d3bba3c
6 changed files with 64 additions and 1 deletions

View file

@ -1,6 +1,6 @@
"use client";
import { Check, ChevronUp, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
import { Check, ChevronUp, ExternalLink, Info, Languages, Laptop, LogOut, Moon, Settings, Sun } from "lucide-react";
import Image from "next/image";
import { useTranslations } from "next-intl";
import { useState } from "react";
@ -18,6 +18,7 @@ import {
} from "@/components/ui/dropdown-menu";
import { Spinner } from "@/components/ui/spinner";
import { useLocaleContext } from "@/contexts/LocaleContext";
import { APP_VERSION } from "@/lib/env-config";
import { cn } from "@/lib/utils";
import type { User } from "../../types/layout.types";
@ -37,6 +38,11 @@ const THEMES = [
{ value: "system" as const, name: "System", icon: Laptop },
];
const LEARN_MORE_LINKS = [
{ key: "documentation" as const, href: "https://surfsense.com/docs" },
{ key: "github" as const, href: "https://github.com/MODSetter/SurfSense" },
];
interface SidebarUserProfileProps {
user: User;
onUserSettings?: () => void;
@ -254,6 +260,27 @@ export function SidebarUserProfile({
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Info className="h-4 w-4" />
{t("learn_more")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="min-w-[180px] gap-1">
{LEARN_MORE_LINKS.map((link) => (
<DropdownMenuItem key={link.key} asChild>
<a href={link.href} target="_blank" rel="noopener noreferrer">
<span className="flex-1">{t(link.key)}</span>
<ExternalLink className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
</a>
</DropdownMenuItem>
))}
<DropdownMenuSeparator className="dark:bg-neutral-700" />
<p className="select-none px-2 py-1.5 text-xs text-muted-foreground/50">v{APP_VERSION}</p>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator className="dark:bg-neutral-700" />
<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>
@ -376,6 +403,27 @@ export function SidebarUserProfile({
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<Info className="h-4 w-4" />
{t("learn_more")}
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent className="min-w-[180px] gap-1">
{LEARN_MORE_LINKS.map((link) => (
<DropdownMenuItem key={link.key} asChild>
<a href={link.href} target="_blank" rel="noopener noreferrer">
<span className="flex-1">{t(link.key)}</span>
<ExternalLink className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
</a>
</DropdownMenuItem>
))}
<DropdownMenuSeparator className="dark:bg-neutral-700" />
<p className="select-none px-2 py-1.5 text-xs text-muted-foreground/50">v{APP_VERSION}</p>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator className="dark:bg-neutral-700" />
<DropdownMenuItem onClick={handleLogout} disabled={isLoggingOut}>