Skip to content

Commit a9efe5d

Browse files
tanmayjoddartanmayjoddar
committed
Floating selector added in the place of hamburger
1 parent 27fb5fc commit a9efe5d

File tree

2 files changed

+80
-62
lines changed

2 files changed

+80
-62
lines changed

‎app/Team/page.tsx‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,20 @@ import {
66
DialogTrigger,
77
DialogTitle
88
} from "@/components/ui/dialog";
9-
import { Menu } from "lucide-react";
9+
import { Menu, ChevronLeft, ChevronRight } from "lucide-react";
10+
import { motion, AnimatePresence } from "framer-motion";
1011
import Link from "next/link";
1112
import json from "./team.json";
1213
import { Button } from "@/components/ui/button";
1314
import { Mail } from "lucide-react";
1415
import { TwitterLogoIcon, LinkedInLogoIcon, GitHubLogoIcon,InstagramLogoIcon } from "@radix-ui/react-icons";
1516
import Footer from "../Footer/page";
1617
import NavBar from "../NavBar/page";
18+
import { useIsMobile } from "@/hooks/use-mobile";
1719

1820
const Team = () => {
1921
const teamArray = json.teamArray;
22+
const isMobile = useIsMobile();
2023

2124
const Gen = [
2225
{ label: "President", key: "p" },
@@ -27,84 +30,95 @@ const Team = () => {
2730
];
2831

2932
const [selectedGen, setSelectedGen] = useState("p");
33+
34+
// Navigate to prev/next generation
35+
const navigateGeneration = (direction: 'prev' | 'next') => {
36+
const currentIndex = Gen.findIndex(g => g.key === selectedGen);
37+
if (direction === 'prev') {
38+
const newIndex = currentIndex <= 0 ? Gen.length - 1 : currentIndex - 1;
39+
setSelectedGen(Gen[newIndex].key);
40+
} else {
41+
const newIndex = currentIndex >= Gen.length - 1 ? 0 : currentIndex + 1;
42+
setSelectedGen(Gen[newIndex].key);
43+
}
44+
};
3045

3146
return (
3247
<div className="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-800">
33-
<NavBar/>
34-
{/* Mobile Header with Generations Dropdown */}
35-
<div className="md:hidden sticky top-0 z-50 bg-white dark:bg-neutral-900 shadow-sm">
36-
<div className="flex justify-between items-center p-4">
37-
{/* <Logo /> */}
38-
<Dialog>
39-
<DialogTrigger asChild>
40-
<Button variant="outline" size="icon">
41-
<Menu className="h-6 w-6" />
48+
<NavBar/>
49+
{/* Mobile Floating Generation Selector */} <AnimatePresence>
50+
{isMobile && (
51+
<motion.div
52+
className="fixed top-24 left-0 right-0 z-40 flex justify-center pointer-events-auto"
53+
initial={{ y: -50, opacity: 0 }}
54+
animate={{ y: 0, opacity: 1 }}
55+
exit={{ y: -50, opacity: 0 }}
56+
transition={{ type: "spring", stiffness: 300, damping: 25 }}
57+
><motion.div
58+
className="flex items-center gap-3 bg-black/50 border border-white/10 backdrop-blur-lg py-3 px-5 rounded-full shadow-lg"
59+
whileHover={{ scale: 1.02 }}
60+
>
61+
<Button
62+
variant="ghost"
63+
size="sm"
64+
className="text-white/70 hover:text-white h-8 w-8 p-0 flex items-center justify-center"
65+
onClick={() => navigateGeneration('prev')}
66+
>
67+
<ChevronLeft className="h-5 w-5" />
4268
</Button>
43-
</DialogTrigger>
44-
<DialogContent className="w-64 max-w-full">
45-
<DialogTitle className="sr-only">Select Team Generation</DialogTitle>
46-
<div className="flex flex-col gap-4">
47-
{Gen.map((gen) => (
48-
<Button
49-
key={gen.key}
50-
variant={selectedGen === gen.key ? "default" : "outline"}
51-
onClick={() => {
52-
setSelectedGen(gen.key);
53-
// You might want to close the dialog here
54-
}}
55-
className="w-full"
56-
>
57-
{gen.label}
58-
</Button>
59-
))}
60-
</div>
61-
</DialogContent>
62-
</Dialog>
63-
</div>
64-
</div>
65-
66-
{/* Main Content Area */}
67-
<div className="flex flex-1">
69+
70+
<span className="text-white font-medium px-3 min-w-[100px] text-center">
71+
{Gen.find(g => g.key === selectedGen)?.label}
72+
</span>
73+
74+
<Button
75+
variant="ghost"
76+
size="sm"
77+
className="text-white/70 hover:text-white h-8 w-8 p-0 flex items-center justify-center"
78+
onClick={() => navigateGeneration('next')}
79+
>
80+
<ChevronRight className="h-5 w-5" />
81+
</Button>
82+
</motion.div>
83+
</motion.div>
84+
)}
85+
</AnimatePresence> {/* Main Content Area */}
86+
<div className="flex flex-1 pt-24 md:pt-0">
6887
{/* Desktop Sidebar */}
69-
<div className="hidden md:flex w-64 bg-white dark:bg-neutral-900 p-6 flex-col border-r dark:border-neutral-700">
70-
{/* <Logo /> */}
71-
<div className="mt-8 space-y-2">
88+
<div className="hidden md:flex w-64 bg-white dark:bg-neutral-900 p-6 flex-col border-r dark:border-neutral-700 mt-24">
89+
<div className="mt-8 space-y-3">
7290
{Gen.map((gen) => (
7391
<Button
7492
key={gen.key}
7593
variant={selectedGen === gen.key ? "default" : "ghost"}
7694
onClick={() => setSelectedGen(gen.key)}
77-
className="w-full justify-start"
95+
className="w-full justify-start h-10 text-base"
7896
>
7997
{gen.label}
8098
</Button>
8199
))}
82100
</div>
83-
</div>
84-
85-
{/* Team Members Grid */}
86-
<div className="flex-1 p-4 md:p-6 overflow-y-auto sm:mt-10 md:mt-20 lg:mt-25">
87-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
88-
{teamArray.filter(member => member.gen === selectedGen).map(member => (
89-
<div
101+
</div> {/* Team Members Grid */}
102+
<div className="flex-1 p-4 md:p-8 overflow-y-auto sm:mt-20 md:mt-24 lg:mt-28">
103+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pt-6">
104+
{teamArray.filter(member => member.gen === selectedGen).map(member => ( <div
90105
key={member.name}
91-
className="flex flex-col items-center text-center gap-4 bg-white dark:bg-neutral-900 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
106+
className="flex flex-col items-center text-center gap-5 bg-white dark:bg-neutral-900 p-6 md:p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
92107
>
93108
<img
94109
src={member.image}
95110
alt={member.name}
96-
className="h-32 w-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
97-
/>
98-
<div>
99-
<h3 className="text-xl font-bold text-gray-800 dark:text-gray-200">
111+
className="h-36 w-36 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
112+
/> <div>
113+
<h3 className="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-200">
100114
{member.name}
101115
</h3>
102116
{member.role && (
103-
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
117+
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-2">
104118
{member.role}
105119
</p>
106120
)}
107-
<div className="mt-4 flex justify-center gap-3">
121+
<div className="mt-5 flex justify-center gap-4">
108122
{member.tw && (
109123
<Button
110124
variant="outline"
@@ -170,20 +184,12 @@ const Team = () => {
170184
</div>
171185
))}
172186
</div>
173-
</div>
174-
</div>
187+
</div> </div>
175188

176189
{/* Footer */}
177190
<Footer />
178191
</div>
179192
);
180193
}
181194

182-
// export const Logo = () => (
183-
// <Link href="#" className="flex space-x-2 items-center text-lg font-bold text-black dark:text-white">
184-
// <div className="h-6 w-7 bg-black dark:bg-white rounded-lg" />
185-
// <span className="whitespace-pre">Coding Junction</span>
186-
// </Link>
187-
// );
188-
189195
export default Team;

‎app/globals.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,3 +151,15 @@
151151
@apply bg-background text-foreground;
152152
}
153153
}
154+
155+
@layer utilities {
156+
/* Hide scrollbar while maintaining scroll functionality */
157+
.no-scrollbar::-webkit-scrollbar {
158+
display: none;
159+
}
160+
161+
.no-scrollbar {
162+
-ms-overflow-style: none; /* IE and Edge */
163+
scrollbar-width: none; /* Firefox */
164+
}
165+
}

0 commit comments

Comments
 (0)