Skip to content

Commit 9c4129b

Browse files
atharva20-coderatharva20-coder
committed
impreoved mobile navigation, Imroved UI for all screen sizes, added infobar back with enhancement, redesignd breadcrumb, redesigned loader, redesigned sidebar, added sidebar collapse feture
1 parent c89214b commit 9c4129b

File tree

11 files changed

+206
-88
lines changed

11 files changed

+206
-88
lines changed

‎bun.lockb

3.14 KB
Binary file not shown.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@clerk/nextjs": "^6.9.5",
1414
"@google/generative-ai": "^0.22.0",
15+
"@heroui/breadcrumbs": "^2.2.11",
1516
"@heroui/input": "^2.4.13",
1617
"@heroui/switch": "^2.2.13",
1718
"@hookform/resolvers": "^3.9.1",

‎public/images/dark-grid-24.svg

Lines changed: 9 additions & 0 deletions
Loading

‎src/app/(protected)/dashboard/[slug]/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ const Layout = async ({ children, params }: Props) => {
3737
<MobileNav slug={params.slug} />
3838
<div
3939
className="
40-
lg:ml-[250px]
40+
lg:ml-[var(--sidebar-width,250px)]
4141
lg:pl-10
4242
lg:py-5
4343
flex
4444
flex-col
4545
overflow-auto
4646
pb-24
47+
transition-all
48+
duration-300
4749
"
4850
>
4951
<InfoBar slug={params.slug} />

‎src/app/(protected)/dashboard/[slug]/notifications/page.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,12 @@ export default function NotificationsPage() {
4949
<div className="space-y-3 sm:space-y-4">
5050
{sortedNotifications && sortedNotifications.length > 0 ? (
5151
sortedNotifications.map((notification: Notification) => (
52-
<NotificationItem
53-
key={notification.id}
54-
notification={notification}
55-
/>
52+
notification && (
53+
<NotificationItem
54+
key={notification.id}
55+
notification={notification}
56+
/>
57+
)
5658
))
5759
) : (
5860
<div className="text-center text-gray-500 py-6 sm:py-8">

‎src/app/(protected)/dashboard/[slug]/page.tsx

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,37 +12,36 @@ type Props = {};
1212

1313
const Page = (props: Props) => {
1414
return (
15-
<div className="flex flex-col gap-y-4 px-4 sm:px-8 mt-2">
16-
<div className="flex justify-between items-center">
17-
<h3 className="text-xl sm:text-2xl font-semibold text-black">Start Here</h3>
18-
<a href="#" className="text-blue-500 hover:underline">Explore all Templates</a>
15+
<div className="flex flex-col gap-y-4 px-3 sm:px-6 lg:px-8 mt-2 sm:mt-4">
16+
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0">
17+
<h3 className="text-lg sm:text-xl lg:text-2xl font-semibold text-black">Start Here</h3>
18+
<a href="#" className="text-sm sm:text-base text-blue-500 hover:underline">Explore all Templates</a>
1919
</div>
20-
<div className="flex gap-8 lg:flex-row flex-col">
20+
<div className="flex gap-4 sm:gap-6 lg:gap-8 lg:flex-row flex-col">
2121
{DASHBOARD_CARDS.map((card) => (
2222
<DoubleGradientCard key={card.id} {...card} />
2323
))}
2424
</div>
25-
<div>
25+
<div className="w-full">
2626
<AnalyticsSummary />
2727
</div>
28-
<div className="border-[1px] relative border-gray-200 p-3 sm:p-5 rounded-md w-full">
29-
<div className="flex flex-col sm:flex-row justify-between items-start w-full gap-4 sm:gap-0">
30-
<span className="flex gap-x-3 items-center">
31-
<div className="w-8 h-8 flex items-center justify-center">
28+
<div className="border-[1px] relative border-gray-200 p-3 sm:p-4 lg:p-5 rounded-md w-full">
29+
<div className="flex flex-col sm:flex-row justify-between items-start w-full gap-3 sm:gap-4">
30+
<span className="flex gap-x-2 sm:gap-x-3 items-center">
31+
<div className="w-6 h-6 sm:w-8 sm:h-8 flex items-center justify-center">
3232
<BarDuoToneBlue className="w-full h-full" />
3333
</div>
3434
<div>
35-
<h2 className="text-xl sm:text-2xl font-bold text-black">
35+
<h2 className="text-lg sm:text-xl lg:text-2xl font-bold text-black">
3636
<strong>Automation Overview</strong>
3737
</h2>
38-
<p className="text-text-secondary/70 text-sm sm:text-base">
38+
<p className="text-text-secondary/70 text-xs sm:text-sm lg:text-base">
3939
Automated 0 out of 1 interactions
4040
</p>
4141
</div>
4242
</span>
43-
4443
</div>
45-
<div className="w-full mt-5 max-w-[1200px] px-2">
44+
<div className="w-full mt-4 sm:mt-5 max-w-[1200px] px-0 sm:px-2">
4645
<div className="w-full">
4746
<Chart />
4847
</div>

‎src/app/(protected)/dashboard/loading.tsx

Lines changed: 92 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,101 @@
1-
import Loader from '@/components/global/loader'
1+
"use client"
2+
23
import React from 'react'
4+
import { cn } from '@/lib/utils'
5+
import { usePathname } from 'next/navigation'
36

47
type Props = {}
58

69
const Loading = (props: Props) => {
10+
const pathname = usePathname()
11+
const pageName = pathname?.split('/')?.pop() || 'Dashboard'
12+
713
return (
8-
<div className='min-h-screen bg-background flex justify-center items-center'>
9-
<div className='flex flex-col items-center gap-4'>
10-
<Loader state>
11-
<span></span>
12-
</Loader>
13-
<p className='text-text-secondary animate-pulse'>Loading your dashboard...</p>
14+
<div className='min-h-screen bg-background p-3'>
15+
{/* Sidebar Skeleton */}
16+
<div className='fixed left-0 top-0 bottom-0 w-[250px] bg-white dark:bg-gray-900 p-4 border-r border-gray-200 dark:border-gray-800 hidden lg:block'>
17+
<div className='space-y-4'>
18+
<div className='h-4 w-16 bg-gray-200 rounded animate-pulse' />
19+
<div className='space-y-2'>
20+
{[...Array(6)].map((_, i) => (
21+
<div key={i} className='flex items-center gap-x-6 p-2'>
22+
<div className='h-8 w-8 rounded bg-gray-200 animate-pulse' />
23+
<div className='h-4 w-24 bg-gray-200 rounded animate-pulse' />
24+
</div>
25+
))}
26+
</div>
27+
</div>
28+
</div>
29+
30+
<div className='lg:ml-[var(--sidebar-width,250px)] lg:pl-10 lg:py-5 flex flex-col overflow-auto pb-24 transition-all duration-300'>
31+
{/* Page Name */}
32+
<div className='mb-6'>
33+
<div className='h-6 w-48 bg-gray-200 rounded animate-pulse'>
34+
<span className='sr-only'>Loading {pageName}...</span>
35+
</div>
36+
</div>
37+
38+
{/* Skeleton for InfoBar */}
39+
<div className='w-full flex items-center justify-between mb-8'>
40+
<div className='flex items-center gap-4'>
41+
<div className='h-12 w-12 rounded-full bg-gray-200 animate-pulse' />
42+
<div className='space-y-2'>
43+
<div className='h-4 w-32 bg-gray-200 rounded animate-pulse' />
44+
<div className='h-3 w-24 bg-gray-200 rounded animate-pulse' />
45+
</div>
46+
</div>
47+
<div className='flex gap-4'>
48+
<div className='h-10 w-10 rounded-lg bg-gray-200 animate-pulse' />
49+
<div className='h-10 w-10 rounded-lg bg-gray-200 animate-pulse' />
50+
</div>
51+
</div>
52+
53+
{/* Skeleton for Dashboard Content */}
54+
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
55+
{/* Analytics Cards */}
56+
{[...Array(3)].map((_, i) => (
57+
<div key={i} className='p-6 rounded-xl bg-white shadow-sm'>
58+
<div className='flex justify-between items-center mb-4'>
59+
<div className='h-4 w-24 bg-gray-200 rounded animate-pulse' />
60+
<div className='h-8 w-8 rounded bg-gray-200 animate-pulse' />
61+
</div>
62+
<div className='h-8 w-32 bg-gray-200 rounded animate-pulse mb-2' />
63+
<div className='h-3 w-20 bg-gray-200 rounded animate-pulse' />
64+
</div>
65+
))}
66+
</div>
67+
68+
{/* Skeleton for Charts Section */}
69+
<div className='grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8'>
70+
{/* Chart Areas */}
71+
{[...Array(2)].map((_, i) => (
72+
<div key={i} className='p-6 rounded-xl bg-white shadow-sm'>
73+
<div className='flex justify-between items-center mb-6'>
74+
<div className='h-4 w-32 bg-gray-200 rounded animate-pulse' />
75+
<div className='h-8 w-8 rounded bg-gray-200 animate-pulse' />
76+
</div>
77+
<div className='h-[200px] bg-gray-200 rounded-lg animate-pulse' />
78+
</div>
79+
))}
80+
</div>
81+
82+
{/* Skeleton for Recent Activity */}
83+
<div className='mt-8 p-6 rounded-xl bg-white shadow-sm'>
84+
<div className='flex justify-between items-center mb-6'>
85+
<div className='h-4 w-40 bg-gray-200 rounded animate-pulse' />
86+
<div className='h-8 w-24 bg-gray-200 rounded animate-pulse' />
87+
</div>
88+
{[...Array(4)].map((_, i) => (
89+
<div key={i} className='flex items-center gap-4 py-3 border-b last:border-0'>
90+
<div className='h-10 w-10 rounded-full bg-gray-200 animate-pulse' />
91+
<div className='flex-1'>
92+
<div className='h-4 w-3/4 bg-gray-200 rounded animate-pulse mb-2' />
93+
<div className='h-3 w-1/2 bg-gray-200 rounded animate-pulse' />
94+
</div>
95+
<div className='h-4 w-20 bg-gray-200 rounded animate-pulse' />
96+
</div>
97+
))}
98+
</div>
1499
</div>
15100
</div>
16101
)

‎src/components/global/bread-crumbs/main-bread-crumb/index.tsx

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,50 @@
11
import { PAGE_ICON } from "@/constants/pages";
22
import React from "react";
3-
import { Separator } from "@/components/ui/separator";
3+
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList } from "@/components/ui/breadcrumb";
44
import { HomeDuoToneBlue } from "@/icons/home-duotone-blue";
5-
import { useUser } from "@clerk/nextjs";
6-
import { Sigmar } from 'next/font/google';
7-
import { UserButton } from "@clerk/nextjs";
8-
import { Bell } from "lucide-react";
9-
import {Switch} from "@heroui/switch";
10-
11-
const sigmar = Sigmar({ weight: '400', subsets: ['latin'] })
125

136
type Props = {
147
page: string;
158
slug?: string;
169
};
1710

18-
const MainBreadCrumb = ({ page, slug }: Props) => {
19-
const { user } = useUser();
20-
const firstName = user?.firstName || "user";
21-
const [notifications, setNotifications] = React.useState(true);
11+
const MainBreadCrumb = ({ page }: Props) => {
12+
const isDashboard = page.toLowerCase() === 'atharvajoshi';
2213

2314
return (
24-
<div className="flex flex-col items-start w-full">
25-
<div className="flex items-center justify-between w-full pb-1 pr-4">
26-
{page === "Home" ? (
27-
<div className="flex flex-col gap-2">
28-
<h2 className="text-2xl font-bold text-black">
29-
Hello, <span className="text-[#2E329F]">{firstName}!</span>
30-
</h2>
31-
</div>
32-
) : (
33-
<div className="flex items-center gap-2">
34-
<div className="w-8 h-8 flex items-center justify-center">
35-
{PAGE_ICON[page.toUpperCase()] || <HomeDuoToneBlue />}
36-
</div>
37-
<h1 className="text-[32px] font-medium text-black">{page.charAt(0).toUpperCase() + page.slice(1)}</h1>
38-
</div>
39-
)}
40-
<div className="flex items-center gap-4">
41-
<Bell className="w-5 h-5 text-gray-600 cursor-pointer hover:text-gray-900" />
42-
<Separator orientation="vertical" className="h-6" />
43-
<UserButton afterSignOutUrl="/" appearance={{
44-
elements: {
45-
avatarBox: "w-9 h-9 mr-2",
46-
userButtonAvatarBox: "w-12 h-12"
47-
}
48-
}} />
15+
<div className="w-full py-4 mb-6">
16+
<div className="flex items-center gap-4 mb-4">
17+
<div className="w-8 h-8 flex items-center justify-center">
18+
{PAGE_ICON[page.toUpperCase()] || <HomeDuoToneBlue />}
4919
</div>
20+
<h1 className="text-2xl font-medium text-gray-900">
21+
{isDashboard ? 'Dashboard' : page.charAt(0).toUpperCase() + page.slice(1)}
22+
</h1>
5023
</div>
51-
<Separator className="w-full my-2" />
24+
<Breadcrumb>
25+
<BreadcrumbList className="text-sm">
26+
<BreadcrumbItem>
27+
<BreadcrumbLink href="/dashboard" className="text-gray-600 hover:text-gray-900">
28+
Auctorn
29+
</BreadcrumbLink>
30+
</BreadcrumbItem>
31+
{!isDashboard && (
32+
<BreadcrumbItem>
33+
<BreadcrumbLink href="/dashboard" className="text-gray-600 hover:text-gray-900">
34+
Dashboard
35+
</BreadcrumbLink>
36+
</BreadcrumbItem>
37+
)}
38+
<BreadcrumbItem>
39+
<BreadcrumbLink
40+
href={isDashboard ? "/dashboard" : `/dashboard/${page.toLowerCase()}`}
41+
className="text-gray-900 font-medium"
42+
>
43+
{isDashboard ? 'Dashboard' : page.charAt(0).toUpperCase() + page.slice(1)}
44+
</BreadcrumbLink>
45+
</BreadcrumbItem>
46+
</BreadcrumbList>
47+
</Breadcrumb>
5248
</div>
5349
);
5450
};

‎src/components/global/infobar/index.tsx

Lines changed: 36 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,57 @@
11
"use client";
22

33
import { PAGE_BREAD_CRUMBS } from "@/constants/pages";
4-
import { Menu } from "lucide-react";
54
import React from "react";
6-
import Sheet from "../sheet";
7-
import Items from "../sidebar/items";
85
import { Separator } from "@/components/ui/separator";
9-
import ClerkAuthState from "../clerk-auth-state";
10-
import { HelpDuoToneWhite } from "@/icons/help-duotone-white";
11-
import { SubscriptionPlan } from "../subscription-plan";
12-
import UpgradeCard from "../sidebar/upgrade";
13-
import { LogoSmall } from "../../../app/svgs/logo-small";
14-
import CreateAutomation from "../create-automation";
15-
import Search from "./search";
166
import { Notifications } from "./notifications";
17-
import MainBreadCrumb from "../bread-crumbs/main-bread-crumb";
187
import { usePaths } from "@/hooks/use-nav";
8+
import { useUser } from "@clerk/nextjs";
9+
import { UserButton } from "@clerk/nextjs";
10+
import Link from "next/link";
1911

2012
type Props = {
2113
slug: string;
2214
};
2315

2416
const InfoBar = ({ slug }: Props) => {
2517
const { page } = usePaths();
18+
const { user } = useUser();
19+
const firstName = user?.firstName || "user";
2620
const currentPage = PAGE_BREAD_CRUMBS.includes(page) || page == slug;
2721

2822
return (
2923
currentPage && (
30-
<div className="flex flex-col p-4 md:p-6">
31-
32-
<MainBreadCrumb page={page === slug ? "Home" : page} slug={slug} />
24+
<div className="flex flex-col w-full transition-all duration-300 pt-4 sm:pt-6">
25+
<div className="flex gap-x-3 lg:gap-x-5 justify-between items-center">
26+
<div className="flex flex-col gap-2">
27+
<h2 className="text-2xl font-bold text-black">
28+
Hello, <span className="text-[#2E329F]">{firstName}!</span>
29+
</h2>
30+
</div>
31+
<div className="flex items-center gap-4">
32+
<Notifications slug={slug} />
33+
<Separator orientation="vertical" className="h-6" />
34+
<UserButton afterSignOutUrl="/" appearance={{
35+
elements: {
36+
avatarBox: "w-9 h-9 mr-2",
37+
userButtonAvatarBox: "w-12 h-12"
38+
}
39+
}} />
40+
</div>
41+
</div>
42+
<Separator className="w-full my-2" />
43+
<div className="flex items-center gap-2 text-sm text-gray-600 pb-5">
44+
<Link href="/dashboard" className="hover:text-gray-900 transition-colors">
45+
Auctorn
46+
</Link>
47+
<span>/</span>
48+
<Link
49+
href={`/dashboard/${page.toLowerCase()}`}
50+
className="text-gray-900 font-medium"
51+
>
52+
{page === slug ? "Dashboard" : page.charAt(0).toUpperCase() + page.slice(1)}
53+
</Link>
54+
</div>
3355
</div>
3456
)
3557
);

0 commit comments

Comments
 (0)