Fixed settings layout on smaller devices

app/api/settings/tts/filter/badges/route.ts

@@ -1,56 +0,0 @@
-import axios from "axios"
-import { currentUser } from "@/lib/current-user";
-import { db } from "@/lib/db"
-import { NextResponse } from "next/server";
-
-export async function GET(req: Request) {
-    try {
-        const user = await currentUser();
-        if (!user) {
-            return new NextResponse("Unauthorized", { status: 401 });
-        }
-
-        let badges = await axios.get("https://api.twitch.tv/helix/chat/badges")
-
-
-        const badgesData = await db.ttsBadgeFilter.findMany({
-            where: {
-                data: {
-                    userId: user.id
-                }
-            }
-        });
-
-        // return NextResponse.json(badgesData);
-        return new NextResponse("Bad Request", { status: 400 });
-    } catch (error) {
-        console.log("[CONNECTION/TWITCH]", error);
-        return new NextResponse("Internal Error", { status: 500});
-    }
-}
-
-export async function POST(req: Request) {
-    try {
-        const user = await currentUser();
-        const badges = await req.json();
-
-        console.log("BADGES", badges);
-        if (!user) {
-            return new NextResponse("Unauthorized", { status: 401 });
-        }
-
-        // const badgesData = await db.tTSBadgeFilter.createMany({
-        //     badges.map((badgeName, value) => {
-        //         data: {
-        //             userId: user.id
-        //         }
-        //     })
-        // });
-
-        // return NextResponse.json(badgesData);
-        return new NextResponse("Bad Request", { status: 400 });
-    } catch (error) {
-        console.log("[CONNECTION/TWITCH]", error);
-        return new NextResponse("Internal Error", { status: 500});
-    }
-}

app/settings/layout.tsx

@@ -10,10 +10,10 @@ const SettingsLayout = async (
 
   return (
     <div className="h-full">
-      <div className={cn("hidden md:flex h-full w-[250px] z-30 flex-col fixed inset-y-0", header_url.endsWith("/settings") && "md:flex h-full w-full z-30 flex-col fixed inset-y-0")}>
+      <div className={cn("hidden md:flex h-full w-[250px] z-30 flex-col fixed inset-y-0",
+        header_url.endsWith("/settings") && "flex h-full w-full md:w-[250px] z-30 flex-col fixed inset-y-0")}>
         <SettingsNavigation />
       </div>
-      {header_url}
       <main className={cn("md:pl-[250px] h-full", header_url.endsWith("/settings") && "hidden")}>
         {children}
       </main>

app/settings/page.tsx

@@ -1,9 +1,6 @@
-import { auth } from "@/auth";
-
 const SettingsPage = async () => {
     return (
         <div>
-          {JSON.stringify(await auth())}
         </div>
     );
 }

middleware.ts

@@ -7,6 +7,7 @@ import {
   AUTH_ROUTES,
   API_PREFIX
 } from "@/routes"
+import { NextResponse } from "next/server"
 
 const { auth } = NextAuth(authConfig)
 
@@ -15,26 +16,35 @@ export default auth((req) => {
 
   const { nextUrl } = req
 
+  // Store current request url in a custom header, which you can read later
+  const requestHeaders = new Headers(req.headers);
+  requestHeaders.set('x-url', req.url);
+
   const isApiRoute = nextUrl.pathname.startsWith(API_PREFIX)
   const isPublicRoute = PUBLIC_ROUTES.includes(nextUrl.pathname)
   const isAuthRoute = AUTH_ROUTES.includes(nextUrl.pathname)
+  const response = NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    }
+  });
 
   if (isApiRoute) {
-    return null
+    return response
   }
 
   if (isAuthRoute) {
     if (isLoggedIn) {
       return Response.redirect(new URL(DEFAULT_REDIRECT, nextUrl))
     }
-    return null;
+    return response;
   }
 
   if (!isLoggedIn && !isPublicRoute) {
     return Response.redirect(new URL("/auth/login", nextUrl))
   }
 
-  return null
+  return response;
 })
 
 // Optionally, don't invoke Middleware on some paths