Feat: added switch theme btn to main page

src/app/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { AppShell, Burger, Button, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, AppShell, Burger, Flex, Group, Skeleton, useMantineColorScheme } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { LuSun } from "react-icons/lu";
+import { LuMoon, LuSun } from "react-icons/lu";
 
 export default function Home() {
   const [opened, { toggle }] = useDisclosure();
@@ -14,10 +14,22 @@ export default function Home() {
       padding="md"
     >
       <AppShell.Header>
-        <Group h="100%" px="md">
+        <Flex h="100%" px="md" justify="space-between" align="center">
-          <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
+          <Group h="100%" px="md">
-          <div>Logo</div>
+            <Burger opened={opened} onClick={toggle} size="sm" hiddenFrom="sm" />
-        </Group>
+            <div>Logo</div>
+          </Group>
+          <ActionIcon
+            onClick={() => {
+              setColorScheme(colorScheme === "light" ? "dark" : "light");
+            }}
+            variant="default"
+            size="md"
+            aria-label="Toggle color scheme"
+          >
+            {colorScheme === "light" ? <LuMoon /> : <LuSun />}
+          </ActionIcon>
+        </Flex>
       </AppShell.Header>
       <AppShell.Navbar p="md">
         {Array(15)
@@ -25,13 +37,6 @@ export default function Home() {
           .map((_, index) => (
             <Skeleton key={index} h={28} mt="sm" animate={false} />
           ))}
-        <Button
-          onClick={() => {
-            setColorScheme(colorScheme === "light" ? "dark" : "light");
-          }}
-        >
-          <LuSun />
-        </Button>
       </AppShell.Navbar>
       <AppShell.Main>Main</AppShell.Main>
       <AppShell.Footer>