commit 4cc6244fe98e6ef1d8a7d3bb956679e50dc43240
parent 3e7d7a877074d8babb874d3e5ab54ea00f57c4f6
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 28 Apr 2025 12:47:13 +0200
Further mobile fixes
Signed-off-by: MTRNord <mtrnord1@gmail.com>
Diffstat:
3 files changed, 54 insertions(+), 52 deletions(-)
diff --git a/src/components/dashboard/dashboard-header.tsx b/src/components/dashboard/dashboard-header.tsx
@@ -6,7 +6,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { Shield, Bell, Menu, Ban, LogOut, Crown, ChevronDown, Plus, X } from "lucide-react"
import { Button } from "@/components/ui/button"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { Separator } from "@/components/ui/separator"
import {
DropdownMenu,
@@ -23,6 +23,8 @@ import AddBan from "../modals/add-ban"
import KickUserModal from "../modals/kick-user"
import CreateBotModal from "../modals/create-bot"
import { mockPolicyLists, Team } from "../../app/dashboard/mockData"
+// @ts-expect-error - Missing types for Radix UI visuallyHidden
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
interface Notification {
id: string
@@ -130,15 +132,6 @@ export function DashboardHeader({ teams }: DashboardHeaderProps) {
}
}
- const navigateToTab = (tab: string) => {
- const baseUrl = tab === "overview" ? "/dashboard" : `/dashboard/${tab}`
-
- // Preserve team parameter
- const params = new URLSearchParams()
- params.set("team", selectedTeam.id)
- router.push(`${baseUrl}?${params.toString()}`)
- }
-
return (
<header className="sticky top-0 z-10 border-b border-gray-800 bg-black/80 backdrop-blur-sm">
<div className="container flex h-16 items-center justify-between px-4 md:px-6">
@@ -151,7 +144,7 @@ export function DashboardHeader({ teams }: DashboardHeaderProps) {
{/* Global Team Selector */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
- <Button variant="outline" className="border-purple-500 text-purple-400 hover:bg-purple-950">
+ <Button variant="outline" className="hidden md:flex border-purple-500 text-purple-400 hover:bg-purple-950">
<Crown className="mr-2 h-4 w-4" />
{selectedTeam.name}
<ChevronDown className="ml-2 h-4 w-4" />
@@ -282,6 +275,9 @@ export function DashboardHeader({ teams }: DashboardHeaderProps) {
</Button>
</SheetTrigger>
<SheetContent side="right" className="bg-gray-950 border-gray-800 p-0">
+ <VisuallyHidden asChild>
+ <SheetTitle>Navigaion</SheetTitle>
+ </VisuallyHidden>
<div className="flex flex-col h-full">
<div className="border-b border-gray-800 p-4">
<div className="flex items-center gap-2">
@@ -301,7 +297,7 @@ export function DashboardHeader({ teams }: DashboardHeaderProps) {
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
- <DropdownMenuContent className="w-56 bg-gray-900 border-gray-800">
+ <DropdownMenuContent className="bg-gray-900 border-gray-800">
<DropdownMenuLabel>Your Bots</DropdownMenuLabel>
<DropdownMenuSeparator className="bg-gray-800" />
{teams.map((team) => (
@@ -317,41 +313,46 @@ export function DashboardHeader({ teams }: DashboardHeaderProps) {
</DropdownMenu>
</div>
<nav className="flex flex-col p-4 gap-2">
- <Button
- variant={activeTab === "overview" ? "secondary" : "ghost"}
- className="justify-start"
- onClick={() => navigateToTab("overview")}
- >
- Overview
- </Button>
- <Button
- variant={activeTab === "reports" ? "secondary" : "ghost"}
- className="justify-start"
- onClick={() => navigateToTab("reports")}
- >
- Reports
- </Button>
- <Button
- variant={activeTab === "bans" ? "secondary" : "ghost"}
- className="justify-start"
- onClick={() => navigateToTab("bans")}
- >
- Bans
- </Button>
- <Button
- variant={activeTab === "analytics" ? "secondary" : "ghost"}
- className="justify-start"
- onClick={() => navigateToTab("analytics")}
- >
- Analytics
- </Button>
- <Button
- variant={activeTab === "settings" ? "secondary" : "ghost"}
- className="justify-start"
- onClick={() => navigateToTab("settings")}
- >
- Settings
- </Button>
+ <Link href="/dashboard/overview">
+ <Button
+ variant={activeTab === "overview" ? "secondary" : "ghost"}
+ className="justify-start w-full"
+ >
+ Overview
+ </Button>
+ </Link>
+ <Link href="/dashboard/reports">
+ <Button
+ variant={activeTab === "reports" ? "secondary" : "ghost"}
+ className="justify-start w-full"
+ >
+ Reports
+ </Button>
+ </Link>
+ <Link href="/dashboard/bans">
+ <Button
+ variant={activeTab === "bans" ? "secondary" : "ghost"}
+ className="justify-start w-full"
+ >
+ Bans
+ </Button>
+ </Link>
+ <Link href="/dashboard/analytics">
+ <Button
+ variant={activeTab === "analytics" ? "secondary" : "ghost"}
+ className="justify-start w-full"
+ >
+ Analytics
+ </Button>
+ </Link>
+ <Link href="/dashboard/settings">
+ <Button
+ variant={activeTab === "settings" ? "secondary" : "ghost"}
+ className="justify-start w-full"
+ >
+ Settings
+ </Button>
+ </Link>
<Separator className="my-2" />
diff --git a/src/components/modals/add-ban.tsx b/src/components/modals/add-ban.tsx
@@ -12,9 +12,10 @@ interface AddBanProps {
policyLists: PolicyList[];
filled?: boolean;
header?: boolean;
+ buttonClasses?: string;
}
-export default function AddBan({ filled, policyLists, header }: AddBanProps) {
+export default function AddBan({ filled, policyLists, header, buttonClasses }: AddBanProps) {
return (
<Dialog>
<DialogTrigger asChild>
@@ -22,19 +23,19 @@ export default function AddBan({ filled, policyLists, header }: AddBanProps) {
<Button
variant="outline"
size="sm"
- className="hidden md:flex border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300"
+ className={`${buttonClasses} border-red-500 text-red-400 hover:bg-red-950 hover:text-red-300`}
>
<Ban className="mr-2 h-4 w-4" />
Add Ban
</Button>
) : (
filled ? (
- <Button size="sm" className="bg-purple-600 text-white hover:bg-purple-700">
+ <Button size="sm" className={`${buttonClasses} bg-purple-600 text-white hover:bg-purple-700`}>
<Ban className="mr-2 h-4 w-4" />
Add Ban
</Button>
) : (
- <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-purple-400">
+ <Button variant="ghost" size="sm" className={`${buttonClasses} h-7 px-2 text-xs text-purple-400`}>
<Plus className="h-3 w-3 mr-1" />
Add Ban
</Button>
diff --git a/src/components/modals/kick-user.tsx b/src/components/modals/kick-user.tsx
@@ -9,7 +9,7 @@ export default function KickUserModal() {
<Button
variant="outline"
size="sm"
- className="w-full justify-start border-orange-500 text-orange-400 hover:bg-orange-950 hover:text-orange-300"
+ className="border-orange-500 text-orange-400 hover:bg-orange-950 hover:text-orange-300"
>
<UserX className="mr-2 h-4 w-4" />
Kick User
