mobile view, missing trends + people + filter

app/(content)/(gaming)/games/[gameid]/page.tsx

@@ -69,7 +69,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
                             <div className="flex flex-col space-y-6 justify-start p-6">
                                 {user &&
                                     <>
-                                        < AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
+                                        <AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
                                         <AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />
                                     </>
                                 }

app/(content)/layout.tsx

 import { Header } from "@/components/nav-header"
+import { MobileNav } from "@/components/nav-mobile"
 import { Sidebar } from "@/components/nav-sidebar"
 import { dashboardConfig } from "@/lib/config/dashboard"
 import { getCurrentUser } from "@/lib/session"
@@ -14,12 +15,16 @@ export default async function ContentLayout({
         <main className="flex min-h-screen flex-col md:space-y-6 align-middle">
             <Header user={user} />
 
-            <div className="md:container grid flex-1 gap-12 grid-cols-5">
+            <div className="md:container grid flex-1 md:gap-12 grid-cols-5">
                 <aside className="self-start sticky top-[89px] hidden md:col-span-1 md:block">
                     <Sidebar items={dashboardConfig.sidebarNav} user={user} />
                 </aside>
-                <div className="flex flex-1 flex-col w-full h-full col-span-5 md:col-span-4 md:pb-6">
+                <div className="flex flex-1 flex-col w-full h-full col-span-5 md:col-span-4 mb-16 md:pb-6">
                     {children}
+
+                    <div className="md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-background border-t">
+                        <MobileNav items={dashboardConfig.sidebarNav} user={user} />
+                    </div>
                 </div>
             </div>
         </main>

app/layout.tsx

@@ -53,6 +53,13 @@ export const metadata = {
         { media: "(prefers-color-scheme: light)", color: "white" },
         { media: "(prefers-color-scheme: dark)", color: "black" },
     ],
+    metadataBase: new URL(siteConfig.url),
+    alternates: {
+        canonical: '/',
+        languages: {
+            'en-US': '/en-US',
+        },
+    },
     openGraph: {
         type: "website",
         locale: "en_US",

components/add-game-dropdown.tsx

@@ -13,7 +13,7 @@ export default function AddGameDropdown(props: { gameid: string, fullUser: User
                     <SelectValue placeholder="Status" />
                 </SelectTrigger>
                 <SelectContent>
-                    <SelectGroup>
+                    <SelectGroup className="space-y-3 w-full">
                         <AddGameToPlanList user={props.fullUser!} gameId={props.gameid} />
                         <AddGameToFinishedList user={props.fullUser!} gameId={props.gameid} />
                         <AddGameToPlayingList user={props.fullUser!} gameId={props.gameid} />

components/add-game-to-finished-list.tsx

@@ -65,12 +65,12 @@ export default function AddGameToFinishedList(props: { gameId: string, user: Use
     }
 
 
-    let button = <div></div>
+    let button = <></>
     try {
         if (!props.user.finishedGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg" variant="ghost">
+                    <Button type="submit" size="lg" variant="ghost" className="w-full justify-start">
                         Set as Finished
                     </Button>
                 </form>
@@ -78,7 +78,7 @@ export default function AddGameToFinishedList(props: { gameId: string, user: Use
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant="ghost">
+                    <Button type="submit" size="lg" variant="ghost" className="w-full justify-start text-destructive">
                         Unset Finished
                     </Button>
                 </form>

components/add-game-to-plan-list.tsx

@@ -65,12 +65,12 @@ export default function AddGameToPlanList(props: { gameId: string, user: User })
     }
 
 
-    let button = <div></div>
+    let button = <></>
     try {
         if (!props.user.planningGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg" variant={"ghost"}>
+                    <Button type="submit" size="lg" variant={"ghost"} className="w-full justify-start">
                         Set as Planning
                     </Button>
                 </form>
@@ -78,7 +78,7 @@ export default function AddGameToPlanList(props: { gameId: string, user: User })
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant={"ghost"}>
+                    <Button type="submit" size="lg" variant={"ghost"} className="w-full justify-start text-destructive">
                         Unset Planning
                     </Button>
                 </form>

components/add-game-to-playing-list.tsx

@@ -65,12 +65,12 @@ export default function AddGameToPlayingList(props: { gameId: string, user: User
     }
 
 
-    let button = <div></div>
+    let button = <></>
     try {
         if (!props.user.playingGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg" variant={"ghost"}>
+                    <Button type="submit" size="lg" variant={"ghost"} className="w-full justify-start">
                         Set as Playing
                     </Button>
                 </form>
@@ -78,7 +78,7 @@ export default function AddGameToPlayingList(props: { gameId: string, user: User
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant={"ghost"}>
+                    <Button type="submit" size="lg" variant={"ghost"} className="w-full justify-start text-destructive">
                         Unset Playing
                     </Button>
                 </form>

components/addGameToFavList.tsx

@@ -52,7 +52,7 @@ export default function AddGameToFavList(props: { userGameList: Number[], gameId
         if (!props.userGameList.includes(parseFloat(props.gameId))) {
             button = (
                 <form onSubmit={addGame}>
-                    <Button type="submit" size="lg">
+                    <Button type="submit" size="lg" className="w-full">
                         Add To Favorites
                     </Button>
                 </form>
@@ -60,7 +60,7 @@ export default function AddGameToFavList(props: { userGameList: Number[], gameId
         } else {
             button = (
                 <form onSubmit={removeGame}>
-                    <Button type="submit" size="lg" variant={"secondary"}>
+                    <Button type="submit" size="lg" variant="secondary" className="w-full">
                         Remove From Favorites
                     </Button>
                 </form>

components/nav-mobile.tsx

+"use client"
+
+import { Icons } from "@/components/icons"
+import { cn } from "@/lib/utils"
+import { SidebarNavItem } from "@/types"
+import { User } from "next-auth"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Button } from "./ui/button"
+
+export const MobileNav = ({ items, user }: { items: SidebarNavItem[], user: User | undefined }) => {
+    const path = usePathname()
+
+    if (!items?.length) {
+        return null
+    }
+
+    const visibleItems = user ? items : items.slice(0, 2)
+
+    return (
+        <nav className={`grid h-full max-w-lg grid-cols-${items.length} justify-between mx-auto`}>
+            {visibleItems.map((item, index) => {
+                const Icon = Icons[item.icon || "arrowRight"]
+                if (item.title === "My Profile") {
+                    item.href = `/${user?.username}`
+                }
+                return (
+                    item.href && (
+                        <Link key={index} href={item.disabled ? "/" : item.href} className="inline-flex items-center justify-center">
+                            <Button variant={`${path.startsWith(item.href) ? "secondary" : "ghost"}`} size="logo">
+                                <Icon />
+                            </Button>
+                        </Link>
+                    )
+                )
+            })}
+        </nav>
+    )
+}
\ No newline at end of file

components/user-nav.tsx

@@ -27,7 +27,7 @@ export function UserAccountDropdown({ user }: UserAccountNavProps) {
                     className="h-8 w-8 shadow-none focus:shadow-none"
                 />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
+            <DropdownMenuContent align="end" className="mt-1">
                 <div className="flex items-center justify-start gap-2 p-2">
                     <div className="flex flex-col space-y-1 leading-none">
                         {user.name && <p className="font-medium">{user.name}</p>}

lib/config/site.ts

@@ -5,5 +5,5 @@ export const siteConfig: SiteConfig = {
     description:
         "Your social media for game tracking needs, so you can finally get an overview of your games. Built using the new router, server components and everything new in Next.js 13.",
     url: "https://gameunity.vercel.app/",
-    ogImage: "",
+    ogImage: "https://gameunity.vercel.app/og.png",
 }
\ No newline at end of file

package-lock.json

 {
     "name": "project_ss23_gameunity",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "project_ss23_gameunity",
-            "version": "0.2.0",
+            "version": "0.3.0",
             "hasInstallScript": true,
             "dependencies": {
                 "@auth/prisma-adapter": "^1.0.1",