JUP-57 Sidebar

src/components/BaseHeader.tsx

@@ -4,25 +4,19 @@ import { getServerAuthSession } from '@src/server/auth';
 import { ClubSearchBar, EventSearchBar } from './SearchBar';
 import SignInButton from './signInButton';
 import MobileNav from './MobileNav';
-import { db } from '@src/server/db';
-import { eq } from 'drizzle-orm';
+import { api } from '@src/trpc/server';
 
 export const BaseHeader = async ({ children }: { children: ReactNode }) => {
   const session = await getServerAuthSession();
-  const isAdmin = await db.query.admin.findFirst({
-    where: (admin) => eq(admin.userId, session?.user.id || ''),
-  });
+  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 ? (
           <div className="h-10 w-10 rounded-full">
-            <ProfileDropDown
-              image={session.user.image || ''}
-              isAdmin={isAdmin !== undefined}
-            />
+            <ProfileDropDown image={session.user.image || ''} />
           </div>
         ) : (
           <div className="mr-2">

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

@@ -0,0 +1,51 @@
+'use client';
+import SidebarItems from './SidebarItems';
+import Image from 'next/image';
+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">
+        <Image
+          src="/nebula-logo.png"
+          alt=""
+          width={60}
+          height={60}
+          className="mr-1.5"
+        />
+        <h1 className=" text-2xl font-medium">Jupiter</h1>
+      </div>
+      <div className="w-full px-5 py-5">
+        <h1 className="px-4 text-sm font-light capitalize text-slate-500 md:text-xs">
+          Main
+        </h1>
+        <div className="mb-5 mt-6">
+          {mainCats.map((cat) => (
+            <SidebarItems key={cat} cat={cat} />
+          ))}
+        </div>
+      </div>
+      <div className="w-full py-5 pl-5 md:p-5">
+        <h1 className="px-4 text-sm font-light capitalize text-slate-500 md:text-xs">
+          More
+        </h1>
+        <div className="mb-5 mt-6">
+          {userCapabilites.map((cat) => (
+            <SidebarItems key={cat} cat={cat} />
+          ))}
+          {moreCats.map((cat) => (
+            <SidebarItems key={cat} cat={cat} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+export default NavMenu;

src/components/ProfileDropDown.tsx

@@ -2,15 +2,13 @@
 import { signOut } from 'next-auth/react';
 import Image from 'next/image';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 type Props = {
   image: string;
-  isAdmin: boolean;
 };
 
-export const ProfileDropDown = ({ image, isAdmin }: Props) => {
-  const router = useRouter();
+export const ProfileDropDown = ({ image }: Props) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild>
@@ -28,20 +26,15 @@ export const ProfileDropDown = ({ image, isAdmin }: Props) => {
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
         <DropdownMenu.Content className="mt-2 w-48 rounded-md border-gray-300 bg-slate-200 text-center shadow-md transition-all">
+          <DropdownMenu.Item className="p-3 transition-all hover:cursor-pointer hover:bg-slate-300">
+            <Link href={'/settings'}>Settings</Link>
+          </DropdownMenu.Item>
           <DropdownMenu.Item
             className="p-3 transition-all hover:cursor-pointer hover:bg-slate-300"
             onClick={() => void signOut()}
           >
             <button>Sign out</button>
           </DropdownMenu.Item>
-          {isAdmin && (
-            <DropdownMenu.Item
-              className="p-3 transition-all hover:cursor-pointer hover:bg-slate-300"
-              onClick={() => router.push('/admin')}
-            >
-              <button>Admin</button>
-            </DropdownMenu.Item>
-          )}
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

src/components/Sidebar.tsx

@@ -1,41 +1,13 @@
-import SidebarItems from './SidebarItems';
-import Image from 'next/image';
-import { mainCats, moreCats } from '@src/constants/categories';
+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">
-      <div className="flex w-full place-content-center items-center pb-7 pt-10">
-        <Image
-          src="/nebula-logo.png"
-          alt=""
-          width={60}
-          height={60}
-          className="mr-1.5"
-        />
-        <h1 className=" text-2xl font-medium">Jupiter</h1>
-      </div>
-      <div className="w-full px-5 py-5">
-        <h1 className="px-4 text-xs font-light capitalize text-slate-500">
-          Main
-        </h1>
-        <div className="mb-5 mt-6">
-          {mainCats.map((cat) => (
-            <SidebarItems key={cat} cat={cat} />
-          ))}
-        </div>
-      </div>
-      <div className="w-full p-5">
-        <h1 className="px-4 text-xs font-light capitalize text-slate-500">
-          More
-        </h1>
-        <div className="mb-5 mt-6">
-          {moreCats.map((cat) => (
-            <SidebarItems key={cat} cat={cat} />
-          ))}
-        </div>
-      </div>
+      <NavMenu userCapabilites={userSidebarCapabilities} />
     </div>
   );
 };

src/components/SidebarItems.tsx

@@ -26,7 +26,7 @@ const SidebarItems: FC<{ cat: allCats[number] }> = ({ cat }) => {
 
   return (
     <div
-      className={` ${
+      className={`group ${
         active || mouseOver
           ? `-my-2.5 mb-2.5 rounded-3xl bg-white py-2.5 shadow-md last:-mb-2.5`
           : 'mb-5'
@@ -36,21 +36,21 @@ const SidebarItems: FC<{ cat: allCats[number] }> = ({ cat }) => {
     >
       <div
         className=" 
-        flex h-full w-64 cursor-pointer  items-start rounded-lg bg-transparent px-5 text-sm transition-transform"
+        flex h-full w-full cursor-pointer items-start rounded-lg bg-transparent px-5 text-base transition-transform md:w-64 md:text-sm"
         onClick={() => void router.push(route)}
       >
         <div className="flex items-center gap-x-4">
           {Icon && (
             <Icon
               fill={`${
-                active || mouseOver ? 'fill-blue-primary' : 'fill-slate-500'
-              }`}
+                active ? 'fill-blue-primary' : 'fill-slate-500'
+              } group-hover:fill-blue-primary`}
             />
           )}
           <h1
-            className={`text-sm font-medium capitalize ${
-              active || mouseOver ? 'text-blue-primary' : 'text-slate-500'
-            }`}
+            className={`text-base font-medium capitalize md:text-sm ${
+              active ? 'text-blue-primary' : 'text-slate-500'
+            } group-hover:text-blue-primary`}
           >
             {cat}
           </h1>