Skip to content

Commit 5c740da

Browse files
adanrsantosadanrsantos
committed
fixed mobile view for /admin/dashboard. added admin link to navbar. fixed dynamic adminnavbar button
1 parent e5b8fb9 commit 5c740da

File tree

3 files changed

+64
-51
lines changed

3 files changed

+64
-51
lines changed

‎src/components/admin/AdminNavbar.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
2-
3-
import React from "react";
42
import Link from "next/link";
3+
import { usePathname } from "next/navigation";
4+
import { cn } from "@/lib/utils";
55
import {
66
NavigationMenu,
77
NavigationMenuList,
@@ -18,6 +18,18 @@ const today = new Date().toLocaleDateString(undefined, {
1818
});
1919

2020
const AdminNavbar = () => {
21+
const pathname = usePathname();
22+
const segment = pathname.split('/');
23+
const isActive = (href: string) => {
24+
if (pathname === href) {
25+
return true;
26+
}
27+
const temp = "/" + segment[1] + "/" +segment[2];
28+
if (temp === href) {
29+
return true;
30+
}
31+
return false;
32+
}
2133
return (
2234
<header className="border-b border-neutral-200 bg-white/80 backdrop-blur dark:border-neutral-800 dark:bg-neutral-900/60">
2335
<div className="mx-auto flex h-14 w-full max-w-7xl items-center px-3 sm:px-4 lg:px-5">
@@ -39,28 +51,28 @@ const AdminNavbar = () => {
3951

4052
{/* Dashboard */}
4153
<NavigationMenuItem>
42-
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
54+
<NavigationMenuLink asChild className={isActive("/admin") ? "bg-accent dark:bg-accent" : "bg-background"}>
4355
<Link href="/admin">Dashboard</Link>
4456
</NavigationMenuLink>
4557
</NavigationMenuItem>
4658

4759
{/* Courses */}
4860
<NavigationMenuItem>
49-
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
61+
<NavigationMenuLink asChild className={isActive("/admin/courses") ? "bg-accent dark:bg-accent" : "bg-background"}>
5062
<Link href="/admin/courses">Courses</Link>
5163
</NavigationMenuLink>
5264
</NavigationMenuItem>
5365

5466
{/* Tags */}
5567
<NavigationMenuItem>
56-
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
68+
<NavigationMenuLink asChild className={isActive("/admin/tags") ? "bg-accent dark:bg-accent" : "bg-background"}>
5769
<Link href="/admin/tags">Tags</Link>
5870
</NavigationMenuLink>
5971
</NavigationMenuItem>
6072

6173
{/* Users */}
6274
<NavigationMenuItem>
63-
<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
75+
<NavigationMenuLink asChild className={isActive("/admin/users") ? "bg-accent dark:bg-accent" : "bg-background"}>
6476
<Link href="/admin/users">Users</Link>
6577
</NavigationMenuLink>
6678
</NavigationMenuItem>

‎src/components/admin/dashboard/BarChartGraph.tsx‎

Lines changed: 34 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
"use client";
2-
32
import GraphCard from "./GraphCard";
43
import { ChartContainer, ChartTooltip, ChartConfig, ChartTooltipContent } from "@/components/ui/chart";
54
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, LabelList } from "recharts";
@@ -24,47 +23,39 @@ const palette = [
2423
];
2524

2625
export default function BarChartGraph({ data }) {
27-
const maxValue = Math.max(...data.map((d) => d.count))
28-
const chartConfig: ChartConfig = data.reduce((acc, entry, idx) => {
29-
acc[entry.tag] = {
30-
label: entry.tag,
31-
color: palette[idx % palette.length],
32-
};
33-
return acc;
34-
}, {} as ChartConfig);
35-
36-
return (
37-
<GraphCard title="Courses per Tag" description="">
38-
<ResponsiveContainer width="100%" height="100%">
39-
<ChartContainer config={chartConfig} className="h-[300px]">
40-
41-
<BarChart data={data}>
42-
43-
<XAxis dataKey="tag" />
44-
<YAxis
45-
ticks={[...Array(maxValue + 1).keys()]} // [0, 1, 2, ..., max]
46-
domain={[0, maxValue]}
47-
allowDecimals={false}
48-
/>
49-
50-
{/* Shadcn style tooltip */}
51-
<ChartTooltip content={<ChartTooltipContent />} />
26+
const maxValue = Math.max(...data.map((d) => d.count))
27+
const chartConfig: ChartConfig = data.reduce((acc, entry, idx) => {
28+
acc[entry.tag] = {
29+
label: entry.tag,
30+
color: palette[idx % palette.length],
31+
};
32+
return acc;
33+
}, {} as ChartConfig);
5234

53-
<Bar dataKey="count">
54-
{data.map((entry) => (
55-
<Cell
56-
key={entry.tag}
57-
fill={chartConfig[entry.tag].color}
58-
/>
59-
))}
60-
61-
62-
63-
</Bar>
64-
</BarChart>
65-
66-
</ChartContainer>
67-
</ResponsiveContainer>
68-
</GraphCard>
69-
);
35+
return (
36+
<GraphCard title="Courses per Tag" description="">
37+
<ResponsiveContainer width="100%" height="100%" >
38+
<ChartContainer config={chartConfig}>
39+
<BarChart data={data}>
40+
<XAxis dataKey="tag" />
41+
<YAxis
42+
ticks={[...Array(maxValue + 1).keys()]} // [0, 1, 2, ..., max]
43+
domain={[0, maxValue]}
44+
allowDecimals={false}
45+
/>
46+
{/* Shadcn style tooltip */}
47+
<ChartTooltip content={<ChartTooltipContent />} />
48+
<Bar dataKey="count">
49+
{data.map((entry) => (
50+
<Cell
51+
key={entry.tag}
52+
fill={chartConfig[entry.tag].color}
53+
/>
54+
))}
55+
</Bar>
56+
</BarChart>
57+
</ChartContainer>
58+
</ResponsiveContainer>
59+
</GraphCard>
60+
);
7061
}

‎src/components/navbar.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default async function Navigation() {
2020
});
2121
const user = session?.user;
2222
const isSignedIn = Boolean(user);
23+
const isAdmin = user?.role === "admin" ? true : false;
2324
const avatarSrc = user?.image ?? "/user.png";
2425
const displayName = user?.name ?? "User";
2526
const email = user?.email ?? "";
@@ -37,15 +38,24 @@ export default async function Navigation() {
3738
<ul className="flex items-center gap-0 md:gap-8 font-semibold">
3839
{isSignedIn && user ? (
3940
<>
41+
{isAdmin && (
42+
<li>
43+
<Button variant={"secondary"} className="text-md md:text-lg text-foreground hover:text-gray-300 transition-all duration-300">
44+
<Link
45+
href="/admin"
46+
>Admin</Link>
47+
</Button>
48+
</li>
49+
)}
4050
<li>
41-
<Button className="text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
51+
<Button variant="outline" className="text-md md:text-lg text-foreground hover:text-gray-300 transition-all duration-300">
4252
<Link
4353
href="/explore"
4454
>Explore</Link>
4555
</Button>
4656
</li>
4757
<li>
48-
<Button className=" text-md md:text-lg bg-transparent text-foreground hover:text-gray-300 transition-all duration-300">
58+
<Button variant="outline" className="text-md md:text-lg text-foreground hover:text-gray-300 transition-all duration-300">
4959
<Link href="/categories">Categories</Link>
5060
</Button>
5161
</li>

0 commit comments

Comments
 (0)