mantine sidebar

gempir · Apr 20, 2024 · e4d4a11 · e4d4a11
1 parent 4747067
commit e4d4a11
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/web/src/components/Sidebar/Login.tsx b/web/src/components/Sidebar/Login.tsx
@@ -11,17 +11,19 @@ export function Login() {
 
     const [hovering, setHovering] = useState(false);
 
-    const classes = "p-3 flex justify-center rounded shadow bg-purple-800 hover:bg-purple-600 hover:opacity-100 whitespace-nowrap w-36".split(" ")
+    const classes = "p-2 flex justify-center rounded shadow bg-purple-800 hover:bg-purple-600 hover:opacity-100 whitespace-nowrap w-full".split(" ")
     if (isLoggedIn) {
         classes.push("opacity-25")
     }
 
-    return <a
-        onMouseEnter={() => setHovering(true)}
-        onMouseLeave={() => setHovering(false)}
-        className={classes.join(" ")}
-        href={url.toString()}>
-        {isLoggedIn && <>{hovering ? <><UserIcon className="h-6" />&nbsp;&nbsp;Login again</> : <><UserIcon className="h-6" />&nbsp;&nbsp;Logged in</>}</>}
-        {!isLoggedIn && <>{hovering ? <><UserIcon className="h-6" />&nbsp;&nbsp;Login</> : <><UserIcon className="h-6" />&nbsp;&nbsp;Login</>}</>}
-    </a>
+    return <div className="w-full px-3">
+        <a
+            onMouseEnter={() => setHovering(true)}
+            onMouseLeave={() => setHovering(false)}
+            className={classes.join(" ")}
+            href={url.toString()}>
+            {isLoggedIn && <>{hovering ? <><UserIcon className="h-6" />&nbsp;&nbsp;Login again</> : <><UserIcon className="h-6" />&nbsp;&nbsp;Logged in</>}</>}
+            {!isLoggedIn && <>{hovering ? <><UserIcon className="h-6" />&nbsp;&nbsp;Login</> : <><UserIcon className="h-6" />&nbsp;&nbsp;Login</>}</>}
+        </a>
+    </div>
 }
diff --git a/web/src/components/Sidebar/Managing.tsx b/web/src/components/Sidebar/Managing.tsx
@@ -17,7 +17,7 @@ export function Managing({ userConfig }: { userConfig: UserConfig | null | undef
     const data = userConfig?.Protected.EditorFor.sort().map(channel => ({label: channel, value: channel})) || [];
     data.unshift({label: "You", value: ""});
 
-    return <div className="Managing my-4">
+    return <div className="Managing m-3">
         <NativeSelect size="sm" className="w-full" data={data} onChange={updateManaging} value={managing ?? ""}
             rightSection={<UserGroupIcon className="text-gray-400 h-4" />}
         />

diff --git a/web/src/components/Sidebar/Sidebar.tsx b/web/src/components/Sidebar/Sidebar.tsx
@@ -4,50 +4,65 @@ import { useUserConfig } from "../../hooks/useUserConfig";
 import { useStore } from "../../store";
 import { Login } from "./Login";
 import { Managing } from "./Managing";
+import { NavLink } from "@mantine/core";
+import { usePathname } from "next/navigation";
 
 export function Sidebar() {
     const [userConfig] = useUserConfig();
     const loggedIn = useStore(state => Boolean(state.scToken));
+    const pathname = usePathname();
 
     if (!loggedIn) {
         return null;
     }
 
     return (
-        <div className="p-4 bg-gray-800 px-6 shadow flex flex-col relative h-screen">
+        <div className="py-4 bg-gray-800 shadow flex flex-col relative h-screen items-center">
             <Login />
             {loggedIn && <>
                 <Managing userConfig={userConfig} />
-                <Link
+                <NavLink
                     href="/"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500 ">
-                    <HomeIcon className="h-6" />Home
-                </Link>
-                <Link
+                    active={pathname === "/"}
+                    label="Home"
+                    leftSection={<HomeIcon className="h-6" />}
+                    component={Link}
+                />
+                <NavLink
                     href="/bot"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500">
-                    <ChatBubbleLeftIcon className="h-6" />Bot
-                </Link>
-                <Link
+                    active={pathname.startsWith("/bot")}
+                    label="Bot"
+                    leftSection={<ChatBubbleLeftIcon className="h-6" />}
+                    component={Link}
+                />
+                <NavLink
                     href="/overlay"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500">
-                    <PhotoIcon className="h-6" />Overlays
-                </Link>
-                <Link
+                    active={pathname.startsWith("/overlay")}
+                    label="Overlays"
+                    leftSection={<PhotoIcon className="h-6" />}
+                    component={Link}
+                />
+                <NavLink
                     href="/rewards"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500">
-                    <GiftIcon className="h-6" />Rewards
-                </Link>
-                <Link
+                    active={pathname.startsWith("/rewards")}
+                    label="Rewards"
+                    leftSection={<GiftIcon className="h-6" />}
+                    component={Link}
+                />
+                <NavLink
                     href="/permissions"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500">
-                    <AdjustmentsHorizontalIcon className="h-6" />Permissions
-                </Link>
-                <Link
+                    active={pathname.startsWith("/permissions")}
+                    label="Permissions"
+                    leftSection={<AdjustmentsHorizontalIcon className="h-6" />}
+                    component={Link}
+                />
+                <NavLink
                     href="/blocks"
-                    className="flex gap-2 items-center py-4 justify-start hover:text-blue-500">
-                    <NoSymbolIcon className="h-6" />Blocks
-                </Link>
+                    active={pathname.startsWith("/blocks")}
+                    label="Blocks"
+                    leftSection={<NoSymbolIcon className="h-6" />}
+                    component={Link}
+                />
             </>}
         </div>
     );