Skip to content

Commit 7179184

Browse files
TheCoderAdiTheCoderAdi
committed
chore: mobile navbar and themeprovider along with shadcn
1 parent b7ca448 commit 7179184

20 files changed

+1725
-31
lines changed

‎app/(root)/(home)/page.tsx

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React from "react";
2-
import { UserButton } from "@clerk/nextjs";
32

43
const Home = () => {
5-
return (
6-
<div>
7-
<UserButton afterSwitchSessionUrl="/" />
8-
</div>
9-
);
4+
return <div></div>;
105
};
116

127
export default Home;

‎app/(root)/layout.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Navbar from "@/components/shared/Navbar/Navbar";
2+
import React from "react";
3+
4+
const Layout = ({ children }: { children: React.ReactNode }) => {
5+
return (
6+
<div className="background-light850_dark100 relative">
7+
<Navbar />
8+
<div className="flex">
9+
LeftSideBar
10+
<section className="flex min-h-screen flex-1 flex-col px-6 pb-6 pt-36 max-md:pb-14 sm:px-14">
11+
<div className="mx-auto w-full max-w-5xl">{children}</div>
12+
</section>
13+
RightSideBar
14+
</div>
15+
Toaster
16+
</div>
17+
);
18+
};
19+
20+
export default Layout;

‎app/favicon.ico

-25.3 KB
Binary file not shown.

‎app/layout.tsx

+41-20
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,51 @@
11
import React from "react";
2-
import {
3-
ClerkProvider,
4-
SignInButton,
5-
SignedIn,
6-
SignedOut,
7-
UserButton,
8-
} from "@clerk/nextjs";
2+
import { ClerkProvider } from "@clerk/nextjs";
3+
import { ThemeProvider } from "@/context/ThemeProvider";
4+
// eslint-disable-next-line camelcase
5+
import { Inter, Space_Grotesk } from "next/font/google";
6+
import type { Metadata } from "next";
7+
import "../styles/globals.css";
8+
9+
const inter = Inter({
10+
subsets: ["latin"],
11+
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
12+
variable: "--font-inter",
13+
});
14+
15+
const spaceGrotesk = Space_Grotesk({
16+
subsets: ["latin"],
17+
weight: ["300", "400", "500", "600", "700"],
18+
variable: "--font-spaceGrotesk",
19+
});
20+
21+
export const metadata: Metadata = {
22+
title: "DevFlow",
23+
description:
24+
"DevFlow is a platform for developers to share their doubts and get answers from the community, and also to share their knowledge with the community.",
25+
icons: {
26+
icon: "/assets/images/site-logo.svg",
27+
},
28+
};
929

1030
export default function RootLayout({
1131
children,
1232
}: {
1333
children: React.ReactNode;
1434
}) {
1535
return (
16-
<ClerkProvider>
17-
<html lang="en">
18-
<body>
19-
<SignedOut>
20-
<SignInButton />
21-
</SignedOut>
22-
<SignedIn>
23-
<UserButton />
24-
</SignedIn>
25-
{children}
26-
</body>
27-
</html>
28-
</ClerkProvider>
36+
<html lang="en" suppressHydrationWarning={true}>
37+
<body className={`${inter.variable} ${spaceGrotesk.variable}`}>
38+
<ClerkProvider
39+
appearance={{
40+
elements: {
41+
formButtonPrimary: "primary-gradient",
42+
footerActionLink: "primary-text-gradient hover:text-primary-500",
43+
},
44+
}}
45+
>
46+
<ThemeProvider>{children}</ThemeProvider>
47+
</ClerkProvider>
48+
</body>
49+
</html>
2950
);
3051
}

‎components.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "styles/global.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎components/shared/Navbar/MobileNav.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
"use client";
2+
import React from "react";
3+
import {
4+
Sheet,
5+
SheetClose,
6+
SheetContent,
7+
SheetTrigger,
8+
} from "@/components/ui/sheet";
9+
import Image from "next/image";
10+
import Link from "next/link";
11+
import { SignedOut } from "@clerk/nextjs";
12+
import { Button } from "@/components/ui/button";
13+
import { sidebarLinks } from "@/constants";
14+
import { usePathname } from "next/navigation";
15+
16+
const NavContent = () => {
17+
const pathName = usePathname();
18+
return (
19+
<section className="flex h-full flex-col gap-6 pt-16">
20+
{sidebarLinks.map((link, index) => {
21+
const isActive =
22+
(pathName.includes(link.route) && link.route.length > 1) ||
23+
pathName === link.route;
24+
return (
25+
<SheetClose asChild key={index}>
26+
<Link
27+
href={link.route}
28+
className={`${isActive ? "primary-gradient rounded-lg text-light-900" : "text-dark300_light900"} flex items-center gap-4 bg-transparent p-4`}
29+
>
30+
<Image
31+
src={link.imgURL}
32+
alt={link.label}
33+
width={20}
34+
height={20}
35+
className={`${isActive ? "" : "invert-colors"}`}
36+
/>
37+
<p className={`${isActive ? "base-bold" : "base-medium"}`}>
38+
{link.label}
39+
</p>
40+
</Link>
41+
</SheetClose>
42+
);
43+
})}
44+
</section>
45+
);
46+
};
47+
48+
const MobileNav = () => {
49+
return (
50+
<Sheet>
51+
<SheetTrigger asChild>
52+
<Image
53+
src={"/assets/icons/hamburger.svg"}
54+
height={36}
55+
width={36}
56+
alt="Menu"
57+
className="invert-colors sm:hidden"
58+
/>
59+
</SheetTrigger>
60+
<SheetContent
61+
side={"left"}
62+
className="background-light900_dark200 border-none"
63+
>
64+
<Link href={"/"} className="flex items-center gap-1">
65+
<Image
66+
src={"/assets/images/site-logo.svg"}
67+
width={23}
68+
height={23}
69+
alt="DevFlow"
70+
/>
71+
<p className="h2-bold text-dark100_light900 font-spaceGrotesk">
72+
Dev<span className="text-primary-500">Flow</span>
73+
</p>
74+
</Link>
75+
<div>
76+
<SheetClose asChild>
77+
<NavContent />
78+
</SheetClose>
79+
80+
<SignedOut>
81+
<div className="flex flex-col gap-3">
82+
<SheetClose asChild>
83+
<Link href={"/sign-in"}>
84+
<Button className="small-medium btn-secondary min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
85+
<span className="primary-text-gradient">Log in</span>
86+
</Button>
87+
</Link>
88+
</SheetClose>
89+
<SheetClose asChild>
90+
<Link href={"/sign-up"}>
91+
<Button className="small-medium light-border-2 btn-tertiary text-dark400_light900 min-h-[41px] w-full rounded-lg px-4 py-3 shadow-none">
92+
Sign up
93+
</Button>
94+
</Link>
95+
</SheetClose>
96+
</div>
97+
</SignedOut>
98+
</div>
99+
</SheetContent>
100+
</Sheet>
101+
);
102+
};
103+
104+
export default MobileNav;

‎components/shared/Navbar/Navbar.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { SignedIn, UserButton } from "@clerk/nextjs";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import React from "react";
5+
import Theme from "./Theme";
6+
import MobileNav from "./MobileNav";
7+
import GlobalSearch from "../search/GlobalSearch";
8+
9+
const Navbar = () => {
10+
return (
11+
<nav className="flex-between background-light900_dark200 fixed z-50 w-full gap-5 p-6 shadow-light-300 dark:shadow-none sm:px-12">
12+
<Link href={"/"} className="flex items-center gap-1">
13+
<Image
14+
src={"/assets/images/site-logo.svg"}
15+
width={23}
16+
height={23}
17+
alt="DevFlow"
18+
/>
19+
<p className="h2-bold font-spaceGrotesk text-dark-100 dark:text-light-900 max-sm:hidden">
20+
Dev<span className="text-primary-500">Flow</span>
21+
</p>
22+
</Link>
23+
<GlobalSearch />
24+
<div className="flex-between gap-5">
25+
<Theme />
26+
<SignedIn>
27+
<UserButton
28+
afterSwitchSessionUrl="/"
29+
appearance={{
30+
elements: {
31+
avatarBox: "h-10 w-10",
32+
},
33+
variables: {
34+
colorPrimary: "#ff7000",
35+
},
36+
}}
37+
/>
38+
</SignedIn>
39+
<MobileNav />
40+
</div>
41+
</nav>
42+
);
43+
};
44+
45+
export default Navbar;

‎components/shared/Navbar/Theme.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client";
2+
import React from "react";
3+
import { useTheme } from "@/context/ThemeProvider";
4+
import {
5+
Menubar,
6+
MenubarContent,
7+
MenubarItem,
8+
MenubarMenu,
9+
MenubarTrigger,
10+
} from "@/components/ui/menubar";
11+
import Image from "next/image";
12+
import { themes } from "@/constants";
13+
14+
const Theme = () => {
15+
const { mode, setMode } = useTheme();
16+
17+
return (
18+
<Menubar className="relative border-none bg-transparent shadow-none">
19+
<MenubarMenu>
20+
<MenubarTrigger className="focus:bg-light-900 data-[state=open]:bg-light-900 dark:focus:bg-dark-200 dark:data-[state=open]:bg-dark-200">
21+
{mode === "light" ? (
22+
<Image
23+
src="/assets/icons/sun.svg"
24+
width={20}
25+
height={20}
26+
alt="Sun"
27+
className="active-theme"
28+
/>
29+
) : (
30+
<Image
31+
src="/assets/icons/moon.svg"
32+
width={20}
33+
height={20}
34+
alt="Moon"
35+
className="active-theme"
36+
/>
37+
)}
38+
</MenubarTrigger>
39+
<MenubarContent className="absolute -right-12 mt-3 min-w-[120px] rounded border py-2 dark:border-dark-400 dark:bg-dark-300">
40+
{themes.map((theme, ind) => (
41+
<MenubarItem
42+
key={ind}
43+
className="flex items-center gap-4 px-2.5 py-2 dark:focus:bg-dark-400"
44+
onClick={() => {
45+
setMode(theme.value);
46+
47+
if (theme.value !== "system") {
48+
localStorage.theme = theme.value;
49+
} else {
50+
localStorage.removeItem("theme");
51+
}
52+
}}
53+
>
54+
<Image
55+
src={theme.icon}
56+
width={16}
57+
height={16}
58+
alt={theme.label}
59+
className={`${mode === theme.value && "active-theme"}`}
60+
/>
61+
<p
62+
className={`body-semibold text-light-500 ${mode === theme.value ? "text-primary-500" : "text-dark100_light900"}`}
63+
>
64+
{theme.value}
65+
</p>
66+
</MenubarItem>
67+
))}
68+
</MenubarContent>
69+
</MenubarMenu>
70+
</Menubar>
71+
);
72+
};
73+
74+
export default Theme;

‎components/shared/search/GlobalSearch.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Image from "next/image";
2+
import React from "react";
3+
import { Input } from "@/components/ui/input";
4+
5+
const GlobalSearch = () => {
6+
return (
7+
<div className="relative w-full max-w-[600px] max-lg:hidden">
8+
<div className="background-light800_darkgradient relative flex min-h-[56px] grow items-center gap-1 rounded-xl px-4">
9+
<Image
10+
src={"/assets/icons/search.svg"}
11+
alt="Search"
12+
width={24}
13+
height={24}
14+
className="cursor-pointer"
15+
/>
16+
<Input
17+
type="text"
18+
placeholder="Search globaly"
19+
value={""}
20+
className="paragraph-regular no-focus placeholder background-light800_darkgradient border-none shadow-none outline-none"
21+
/>
22+
</div>
23+
</div>
24+
);
25+
};
26+
27+
export default GlobalSearch;

0 commit comments

Comments
 (0)