refactor to calculate sidebar layout on server

src/components/BaseHeader.tsx

@@ -4,12 +4,14 @@ import { getServerAuthSession } from '@src/server/auth';
 import { ClubSearchBar, EventSearchBar } from './SearchBar';
 import SignInButton from './signInButton';
 import MobileNav from './MobileNav';
+import { api } from '@src/trpc/server';
 
 export const BaseHeader = async ({ children }: { children: ReactNode }) => {
   const session = await getServerAuthSession();
+  const userCapabilities = await api.userMetadata.getUserSidebarCapabilities();
   return (
     <div className="flex h-20 w-full flex-shrink flex-row content-between items-center justify-start px-5 py-2.5">
-      <MobileNav />
+      <MobileNav userCapabilites={userCapabilities} />
       {children}
       <div className="ml-auto flex items-center justify-center">
         {session !== null ? (

src/components/MobileNav.tsx

@@ -1,9 +1,15 @@
 'use client';
 
+import { type Dispatch, type SetStateAction } from 'react';
 import { useState } from 'react';
-import MobileNavMenu from './MobileNavMenu';
 
-const MobileNav = () => {
+import NavMenu from './NavMenu';
+import { type personalCats } from '@src/constants/categories';
+
+type NavMenuProps = {
+  userCapabilites: Array<(typeof personalCats)[number]>;
+};
+const MobileNav = ({ userCapabilites }: NavMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   if (!isOpen)
@@ -26,7 +32,30 @@ const MobileNav = () => {
       </div>
     );
 
-  return <MobileNavMenu setIsOpen={setIsOpen} />;
+  return (
+    <MobileNavMenu setIsOpen={setIsOpen} userCapabilites={userCapabilites} />
+  );
 };
 
+const MobileNavMenu = ({
+  setIsOpen,
+  userCapabilites,
+}: {
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  userCapabilites: Array<(typeof personalCats)[number]>;
+}) => {
+  return (
+    <>
+      <div
+        onClick={() => {
+          setIsOpen(false);
+        }}
+        className="fixed left-0 top-0 z-50 h-screen w-full bg-black bg-opacity-50"
+      ></div>
+      <nav className="p-y fixed left-0 top-0 z-50 h-screen w-1/2 bg-slate-100 max-[600px]:w-3/4 md:hidden">
+        <NavMenu userCapabilites={userCapabilites} />
+      </nav>
+    </>
+  );
+};
 export default MobileNav;

src/components/NavMenu.tsx

@@ -1,11 +1,15 @@
 'use client';
 import SidebarItems from './SidebarItems';
 import Image from 'next/image';
-import { mainCats, moreCats } from '@src/constants/categories';
-import { api } from '@src/trpc/react';
-const NavMenu = () => {
-  const personalCapabilites =
-    api.userMetadata.getUserSidebarCapabilities.useQuery();
+import {
+  mainCats,
+  moreCats,
+  type personalCats,
+} from '@src/constants/categories';
+type NavMenuProps = {
+  userCapabilites: Array<(typeof personalCats)[number]>;
+};
+const NavMenu = ({ userCapabilites }: NavMenuProps) => {
   return (
     <>
       <div className="flex w-full place-content-center items-center pb-7 pt-10">
@@ -33,10 +37,9 @@ const NavMenu = () => {
           More
         </h1>
         <div className="mb-5 mt-6">
-          {personalCapabilites.isSuccess &&
-            personalCapabilites.data.map((cat) => (
-              <SidebarItems key={cat} cat={cat} />
-            ))}
+          {userCapabilites.map((cat) => (
+            <SidebarItems key={cat} cat={cat} />
+          ))}
           {moreCats.map((cat) => (
             <SidebarItems key={cat} cat={cat} />
           ))}

src/components/Sidebar.tsx

@@ -1,10 +1,13 @@
+import { api } from '@src/trpc/server';
 import NavMenu from './NavMenu';
 
 // Keep in mind that in all routes we need pl-72 for the sidebar
-const Sidebar = () => {
+const Sidebar = async () => {
+  const userSidebarCapabilities =
+    await api.userMetadata.getUserSidebarCapabilities();
   return (
     <div className="absolute hidden h-full w-72 bg-slate-100 md:block">
-      <NavMenu />
+      <NavMenu userCapabilites={userSidebarCapabilities} />
     </div>
   );
 };

src/utils/sidebarCapabilities.ts

@@ -0,0 +1,35 @@
+import { type personalCats } from '@src/constants/categories';
+import { getServerAuthSession } from '@src/server/auth';
+import { db } from '@src/server/db';
+import { admin } from '@src/server/db/schema/admin';
+import { userMetadataToClubs } from '@src/server/db/schema/users';
+import { and, eq, or } from 'drizzle-orm';
+import { cache } from 'react';
+
+export const getUserSidebarCapabilities = cache(async () => {
+  const session = await getServerAuthSession();
+  const capabilites: (typeof personalCats)[number][] = [];
+  if (!session) return capabilites;
+  if (
+    await db.query.userMetadataToClubs.findFirst({
+      where: and(
+        eq(userMetadataToClubs.userId, session.user.id),
+        or(
+          eq(userMetadataToClubs.memberType, 'Officer'),
+          eq(userMetadataToClubs.memberType, 'President'),
+        ),
+      ),
+    })
+  ) {
+    capabilites.push('Manage Clubs');
+  }
+  if (
+    (
+      await db.query.admin.findMany({
+        where: eq(admin.userId, session.user.id),
+      })
+    ).length === 1
+  )
+    capabilites.push('Admin');
+  return capabilites;
+});