Make mod button dependent on permissions

components/Navigation.tsx

@@ -47,6 +47,27 @@ export default function (props: {
   let data = { ...props };
   const { isOpen, onClose, onOpen } = useDisclosure();
 
+  function hasMod(): boolean {
+    const { permissions } = props;
+
+    if (typeof permissions === "undefined") return false;
+
+    return Boolean(
+      [
+        1 << 0,
+        1 << 2,
+        1 << 4,
+        1 << 5,
+        1 << 6,
+        1 << 7,
+        1 << 8,
+        1 << 9,
+        1 << 10,
+        1 << 11,
+      ].find((int) => permissions & int)
+    );
+  }
+
   return (
     <>
       <Box as="section" pb={{ base: "6" }}>
@@ -113,7 +134,12 @@ export default function (props: {
                 <Button as="a" href="/support" variant="ghost">
                   Support
                 </Button>
-                <Button as="a" href="/mod-queue" variant="ghost">
+                <Button
+                  as="a"
+                  href="/mod-queue"
+                  variant="ghost"
+                  visibility={hasMod() ? "visible" : "hidden"}
+                >
                   Moderation
                 </Button>
               </Center>
@@ -167,7 +193,9 @@ export default function (props: {
           <Link href="/about">About Us</Link>
           <Link href="/team">Our Team</Link>
           <Link href="/support">Support</Link>
-          <Link href="/mod-queue">Moderation</Link>
+          <Link href="/mod-queue" visibility={hasMod() ? "visible" : "hidden"}>
+            Moderation
+          </Link>
           <hr />
           <Flex alignItems="center" gap="1rem">
             <Link display={data.id ? "none" : ""} href="/api/auth/oauth">