Skip to content

Commit e447911

Browse files
shadil-rayyanshadil-rayyan
committed
intergrated bottem nav and back button as well
1 parent a16d832 commit e447911

7 files changed

Lines changed: 107 additions & 18 deletions

File tree

‎app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Geist, Geist_Mono } from "next/font/google";
33
import "./globals.css";
4+
import BottomNavBar from "@/components/bottomNavbar";
45

56
const geistSans = Geist({
67
variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
2829
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
2930
>
3031
{children}
32+
<BottomNavBar/>
3133
</body>
3234
</html>
3335
);

‎components/Navbar.tsx‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Link from "next/link";
55
import { onAuthStateChanged } from "@/lib/firebase/auth";
66
import { signOut, getAuth, User } from "firebase/auth";
77
import { useRouter } from "next/navigation";
8+
import { ArrowLeftIcon } from "lucide-react";
89

910
const Navbar = () => {
1011
const [user, setUser] = useState<User | null>(null);
@@ -31,40 +32,55 @@ const Navbar = () => {
3132
return (
3233
<nav className="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-50">
3334
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
34-
{/* Logo */}
35-
<Link href="/">
36-
<h1 className="text-2xl font-bold text-gray-900 tracking-tight hover:opacity-90 transition-opacity">
37-
Gecian_Collab
38-
</h1>
39-
</Link>
35+
36+
{/* Left */}
37+
<div className="flex items-center gap-4">
38+
<button
39+
className="border text-black border-gray-400 rounded-full p-2"
40+
onClick={() => router.push("https://gecian-hub.netlify.app/")}
41+
>
42+
<ArrowLeftIcon className="w-5 h-5" />
43+
</button>
4044

41-
{/* Right Section */}
45+
<Link href="/">
46+
<h1 className="text-2xl font-bold text-gray-900 tracking-tight hover:opacity-90 transition-opacity">
47+
Gecian_Collab
48+
</h1>
49+
</Link>
50+
</div>
51+
52+
{/* Right */}
4253
<div className="flex items-center space-x-4">
4354
{user ? (
4455
<div className="flex items-center space-x-4">
45-
<Link href="/profile" className="flex items-center space-x-2 group">
56+
<Link
57+
href="/profile"
58+
className="flex items-center space-x-2 group"
59+
>
4660
<div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center text-lg font-bold">
4761
{(user.displayName || user.email || "U")[0].toUpperCase()}
4862
</div>
4963
<span className="hidden sm:inline text-sm font-medium text-gray-700 group-hover:text-blue-600 transition">
5064
{user.displayName || user.email || "User"}
5165
</span>
5266
</Link>
67+
5368
<button
5469
onClick={handleLogout}
55-
className="px-5 py-2 rounded-full bg-red-600 text-white font-medium text-sm hover:bg-red-700 transition shadow-md hover:shadow-lg"
70+
className="px-5 py-2 rounded-full bg-red-600 text-white font-medium text-sm hover:bg-red-700 transition shadow-md"
5671
>
5772
Logout
5873
</button>
5974
</div>
6075
) : (
6176
<Link href="/login">
62-
<button className="px-5 py-2 rounded-full bg-black text-white font-medium text-sm hover:bg-gray-800 transition shadow-md hover:shadow-lg">
77+
<button className="px-5 py-2 rounded-full bg-black text-white font-medium text-sm hover:bg-gray-800 transition shadow-md">
6378
Login
6479
</button>
6580
</Link>
6681
)}
6782
</div>
83+
6884
</div>
6985
</nav>
7086
);

‎components/bottomNavbar.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { useState } from "react";
5+
import { bottomTabs } from "@/data/nav";
6+
7+
const BottomNavBar = () => {
8+
const [activeTab, setActiveTab] = useState("home");
9+
const [hoveredTab, setHoveredTab] = useState<string | null>(null);
10+
11+
return (
12+
<nav className="fixed left-6 right-6 bottom-8 border-t border-gray-300 bg-[#17c6fa] max-w-[800px] mx-auto text-[#171717] rounded-2xl">
13+
<ul className="flex items-center justify-around py-2">
14+
{bottomTabs.map(({ name, icon: Icon, href, label }) => (
15+
<li key={name} className="flex flex-col items-center">
16+
<button
17+
type="button"
18+
className="focus:outline-none"
19+
onClick={() => setActiveTab(name)}
20+
onMouseEnter={() => setHoveredTab(name)}
21+
onMouseLeave={() => setHoveredTab(null)}
22+
>
23+
<Link href={href}>
24+
<div
25+
className={`${
26+
activeTab === name
27+
? "bg-black w-full flex text-blue-400 text-center items-center gap-2 p-[4px] px-2 font-bold rounded-xl transition-all duration-300"
28+
: "overflow-hidden transition-all duration-300 hover:bg-black hover:text-blue-400 text-center items-center gap-2 p-[4px] px-2 font-bold rounded-xl"
29+
}`}
30+
>
31+
<Icon
32+
color={
33+
activeTab === name || hoveredTab === name
34+
? "#17c6fa"
35+
: "black"
36+
}
37+
size="32"
38+
/>
39+
<span className="hidden md:inline">
40+
{activeTab === name ? label : ""}
41+
</span>
42+
</div>
43+
</Link>
44+
</button>
45+
</li>
46+
))}
47+
</ul>
48+
</nav>
49+
);
50+
};
51+
52+
export default BottomNavBar;

‎components/loadingScrenn.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@ const LoadingScreen = () => {
3636
secAnim ? "move-right" : " "
3737
}`}
3838
>
39-
Coll
39+
H
4040
<span className={`rect-i ${secAnim ? "move-right-i" : ""}`}>
4141
<span
4242
className="dot-i"
4343
onAnimationEnd={handleJumpAnimation}
4444
></span>
4545
</span>
46-
ab
46+
ub
4747
</span>
4848
<span className={`dot-2 ${secAnim? "bounce":" "}`}></span>
4949
</h1>

‎data/nav.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Book, Calendar2, Calendar, Home2, Money } from "iconsax-react";
2+
3+
export const bottomTabs = [
4+
{ name: "home", icon: Home2, href: "https://gecian-hub.netlify.app/", label: "Home" },
5+
{ name: "studymaterial", icon: Book, href: "https://www.ktunotes.in/", label: "Study" },
6+
{ name: "attendance", icon: Calendar2, href: "https://gecian-hub.netlify.app/attendance/calendar", label: "Attendance" },
7+
{ name: "finance", icon: Money, href: "https://gecian-hub.netlify.app/expense", label: "Finance" },
8+
{ name: "event", icon: Calendar, href: "https://gecian-hub.netlify.app/events", label: "Event" },
9+
];

‎package-lock.json‎

Lines changed: 13 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
6-
"dev": "next dev -p 3001",
6+
"dev": "next dev ",
77
"build": "next build",
88
"start": "next start",
99
"lint": "next lint",
@@ -19,7 +19,7 @@
1919
"e2e": "playwright test",
2020
"e2e:headed": "playwright test --headed",
2121
"e2e:report": "playwright show-report",
22-
"db:seed": "tsx lib/seed.ts"
22+
"db:seed": "tsx lib/seed.ts"
2323
},
2424
"dependencies": {
2525
"@radix-ui/react-tabs": "^1.1.12",
@@ -31,6 +31,7 @@
3131
"firebase": "^11.3.1",
3232
"firebase-admin": "^13.2.0",
3333
"framer-motion": "^12.4.3",
34+
"iconsax-react": "^0.0.8",
3435
"lucide-react": "^0.469.0",
3536
"next": "^15.1.4",
3637
"pg": "^8.16.0",

0 commit comments

Comments
 (0)