Skip to content

Commit d7675ec

Browse files
author
Simon Huang
committed
mobile
1 parent 7667231 commit d7675ec

File tree

4 files changed

+64
-50
lines changed

4 files changed

+64
-50
lines changed

‎app/layout.tsx

Lines changed: 62 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Toaster } from "@components/ui/sonner";
44
import { TRPCReactProvider } from "trpc/react";
55
import { TooltipProvider } from "@radix-ui/react-tooltip";
66
import Link from "next/link";
7-
import { Goal, Key, LogIn, Settings, Users } from "lucide-react";
7+
import { Goal, Key, LogIn, PanelLeft, Settings, Users } from "lucide-react";
88

99
import {
1010
Tooltip,
@@ -19,6 +19,8 @@ import {
1919
} from "@components/ui/dropdown-menu";
2020
import { MenuActions } from "./_components/menuActions";
2121
import type { Metadata } from "next/types";
22+
import { Sheet, SheetContent, SheetTrigger } from "@components/ui/sheet";
23+
import { Button } from "@components/ui/button";
2224

2325
interface Props {
2426
children: React.ReactNode;
@@ -28,6 +30,28 @@ export const metadata: Metadata = {
2830
title: "TUM.ai Space",
2931
};
3032

33+
const navigationItems: {
34+
href: string;
35+
label: string;
36+
icon: React.ReactNode;
37+
}[] = [
38+
{
39+
href: "/opportunities",
40+
label: "Opportunities",
41+
icon: <Goal className="h-5 w-5" />,
42+
},
43+
{
44+
href: "/members",
45+
label: "Members",
46+
icon: <Users className="h-5 w-5" />,
47+
},
48+
{
49+
href: "/homebase_keys",
50+
label: "Keys",
51+
icon: <Key className="h-5 w-5" />,
52+
},
53+
];
54+
3155
export default async function RootLayout({ children }: Props) {
3256
const session = await getServerAuthSession();
3357

@@ -43,7 +67,7 @@ export default async function RootLayout({ children }: Props) {
4367
disableTransitionOnChange
4468
>
4569
<>
46-
<aside className="fixed inset-y-0 left-0 z-10 flex w-14 flex-col gap-4 border-r bg-background py-4">
70+
<aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col gap-4 border-r bg-background py-4 sm:flex">
4771
<nav className="flex flex-col items-center gap-4 px-2">
4872
<Link
4973
href="/"
@@ -52,50 +76,21 @@ export default async function RootLayout({ children }: Props) {
5276
<Logo className="h-8 w-8 transition-all group-hover:scale-110" />
5377
<span className="sr-only">TUM.ai space</span>
5478
</Link>
55-
{!!session && (
56-
<>
57-
<Tooltip>
79+
{!!session &&
80+
navigationItems.map(({ href, label, icon }) => (
81+
<Tooltip key={href}>
5882
<TooltipTrigger asChild>
5983
<Link
6084
href="/opportunities"
6185
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
6286
>
63-
<Goal className="h-5 w-5" />
64-
<span className="sr-only">Opportunities</span>
87+
{icon}
88+
<span className="sr-only">{label}</span>
6589
</Link>
6690
</TooltipTrigger>
67-
<TooltipContent side="right">
68-
Opportunities
69-
</TooltipContent>
91+
<TooltipContent side="right">{label}</TooltipContent>
7092
</Tooltip>
71-
72-
<Tooltip>
73-
<TooltipTrigger asChild>
74-
<Link
75-
href="/members"
76-
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
77-
>
78-
<Users className="h-5 w-5" />
79-
<span className="sr-only">Members</span>
80-
</Link>
81-
</TooltipTrigger>
82-
<TooltipContent side="right">Members</TooltipContent>
83-
</Tooltip>
84-
85-
<Tooltip>
86-
<TooltipTrigger asChild>
87-
<Link
88-
href="/homebase_keys"
89-
className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
90-
>
91-
<Key className="h-5 w-5" />
92-
<span className="sr-only">Keys</span>
93-
</Link>
94-
</TooltipTrigger>
95-
<TooltipContent side="right">Keys</TooltipContent>
96-
</Tooltip>
97-
</>
98-
)}
93+
))}
9994
</nav>
10095
<nav className="mt-auto flex flex-col items-center gap-4 px-2">
10196
{session && (
@@ -122,7 +117,35 @@ export default async function RootLayout({ children }: Props) {
122117
)}
123118
</nav>
124119
</aside>
125-
<div className="flex flex-col pl-14 sm:gap-4">
120+
<header className="fixed top-0 z-30 flex h-14 w-full items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
121+
<Sheet>
122+
<SheetTrigger asChild>
123+
<Button
124+
size="icon"
125+
variant="outline"
126+
className="sm:hidden"
127+
>
128+
<PanelLeft className="h-5 w-5" />
129+
<span className="sr-only">Toggle Menu</span>
130+
</Button>
131+
</SheetTrigger>
132+
<SheetContent side="left" className="pt-16 sm:max-w-xs">
133+
<nav className="grid gap-6 text-lg font-medium">
134+
{navigationItems.map(({ href, label, icon }) => (
135+
<Link
136+
key={href}
137+
href={href}
138+
className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
139+
>
140+
{icon}
141+
{label}
142+
</Link>
143+
))}
144+
</nav>
145+
</SheetContent>
146+
</Sheet>
147+
</header>
148+
<div className="flex flex-col sm:gap-4 sm:pl-14">
126149
<main className="px-4 sm:px-10">{children}</main>
127150
</div>
128151
</>

‎app/opportunities/_components/opportunityCard.tsx

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,6 @@ export default function OpportunityCard({
6060
</Button>
6161
</DropdownMenuTrigger>
6262
<DropdownMenuContent>
63-
<DropdownMenuItem asChild>
64-
<Link
65-
href={"opportunities/" + +opportunity.id + "/leaderboard"}
66-
>
67-
<BarChart2 className="mr-2 h-4 w-4" />
68-
<span>Leaderboard</span>
69-
</Link>
70-
</DropdownMenuItem>
71-
7263
<DropdownMenuItem asChild>
7364
<Link
7465
href={"opportunities/" + +opportunity.id + "/dashboard"}

‎app/opportunities/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default async function OpportunitiesPage() {
7979
const breadcrumbs = mapPathnameToBreadcrumbs(headerList);
8080

8181
return (
82-
<div className="flex h-screen flex-col gap-8 overflow-hidden py-8">
82+
<div className="flex flex-col gap-8 overflow-hidden py-8 sm:h-screen">
8383
<PageHeading title={"Opportunitites"} breadcrumbs={breadcrumbs} />
8484

8585
<ScrollArea className="flex-1 overflow-y-auto">

‎components/ui/page-heading.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const PageHeading = ({
1717
children,
1818
}: Props) => {
1919
return (
20-
<div className="flex flex-col gap-1">
20+
<div className="mt-14 flex flex-col gap-1 sm:mt-0">
2121
<PageBreadcrumbs breadcrumbs={breadcrumbs} />
2222

2323
<div className="flex w-full flex-col justify-between gap-2 md:flex-row">

0 commit comments

Comments
 (0)