Feat: using router and added footer

src/app/admin/login/page.tsx

@@ -2,7 +2,7 @@
 import { Button, Card, Flex, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
 import { hasLength, useForm } from "@mantine/form";
 import { signIn } from "next-auth/react";
-import { redirect } from "next/navigation";
+import { useRouter } from "next/navigation";
 
 interface FormValues {
   name: string;
@@ -10,6 +10,7 @@ interface FormValues {
 }
 
 export default function LoginPage() {
+  const router = useRouter();
   const form = useForm<FormValues>({
     mode: "uncontrolled",
     initialValues: {
@@ -37,8 +38,10 @@ export default function LoginPage() {
         form.setErrors({
           name: `Unknown error: ${res.status}`,
         });
+    } else if (res && res.ok) {
+      router.push("/admin/panel");
     } else {
-      redirect("/admin/panel");
+      form.setErrors({ name: "Unknown error" });
     }
   };
 

src/app/admin/page.tsx

@@ -3,7 +3,7 @@
 import { redirect } from "next/navigation";
 
 const AdminPage = () => {
-  return redirect("/admin/panel");
+  redirect("/admin/panel");
 };
 
 export default AdminPage;

src/app/admin/panel/layout.tsx

@@ -2,7 +2,9 @@
 import { ActionIcon, AppShell, Burger, Button, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { signOut } from "next-auth/react";
+import { useRouter } from "next/navigation";
 import { LuMoon, LuSun } from "react-icons/lu";
+import classes from "./panel.module.scss";
 const AdminPanelLayout = ({
   children,
 }: Readonly<{
@@ -10,9 +12,14 @@ const AdminPanelLayout = ({
 }>) => {
   const [opened, { toggle }] = useDisclosure();
   const { setColorScheme, colorScheme } = useMantineColorScheme();
+  const router = useRouter();
   const changeColorScheme = () => {
     setColorScheme(colorScheme === "light" ? "dark" : "light");
   };
+  const handleSignOut = async () => {
+    const data = await signOut({ redirect: false, callbackUrl: "/" });
+    router.push(data.url);
+  };
   return (
     <AppShell header={{ height: 60 }} navbar={{ width: 300, breakpoint: "sm", collapsed: { mobile: !opened } }}>
       <AppShell.Header>
@@ -32,11 +39,14 @@ const AdminPanelLayout = ({
           .map((_, index) => (
             <Skeleton key={index} h={28} mt="sm" animate={false} />
           ))}
-        <Button h={28} mt="sm" onClick={() => signOut()}>
+        <Button h={28} mt="sm" onClick={handleSignOut}>
           Sign Out
         </Button>
       </AppShell.Navbar>
       <AppShell.Main>{children}</AppShell.Main>
+      <AppShell.Footer>
+        <div className={classes.footer}>Test</div>{" "}
+      </AppShell.Footer>
     </AppShell>
   );
 };

src/app/admin/panel/panel.module.scss

@@ -0,0 +1,6 @@
+@media(min-width: 48em) {
+  .footer {
+    margin-inline-start: var(--app-shell-navbar-width);
+    width: calc(100vw - var(--app-shell-navbar-width));
+  }
+}