Merge pull request #123 from Logannford/amends/dashboard-style-changes

first round of dashboard changes

Author: Logannford

src/app/(default_layout)/dashboard/page.tsx

@@ -5,21 +5,22 @@ import { Separator } from '@/components/ui/separator';
 
 export default async function Dashboard() {
   return (
-    <div className="text-white flex flex-col gap-y-4">
+    <div className="text-white flex flex-col gap-y-4 h-full">
       <div className="flex w-full justify-between">
         <h1 className="text-xl md:text-4xl font-satoshi font-semibold">
-          Welcome back!
+          Overview
         </h1>
         <div className="flex item-center gap-x-3">
           <LanguageSwitcher />
           <div className="lg:hidden flex">
             <UserProfileDropdown />
           </div>
         </div>
-        {/** userData?.userLevel === 'ADMIN' && <AdminButton /> */}
       </div>
       <Separator className="bg-black-50" />
-      <DashboardBentoGrid />
+      <div className=" h-full">
+        <DashboardBentoGrid />
+      </div>
     </div>
   );
 }

src/app/(default_layout)/layout.tsx

@@ -25,13 +25,13 @@ export default function Layout({
         >
           <SidebarProvider>
             {/* Fixed background gradient */}
-            <div className="fixed inset-0 bg-gradient-to-t from-[#f0db4f]/5 via-transparent to-transparent pointer-events-none"></div>
+            {/* <div className="fixed inset-0 bg-gradient-to-t from-[#f0db4f]/5 via-transparent to-transparent pointer-events-none"></div> */}
 
             {/* Scrollable content */}
             <AppSidebar />
-            <main className="w-full pr-6 py-6 lg:pt-8 lg:pb-3 lg:ml-break-out pl-break-out">
+            <main className="w-full pr-6 py-6 lg:pt-8 lg:pb-3">
               <div className="lg:pl-4 h-full">
-                <SidebarTrigger className="size-4 h-full flex items-center my-auto -top-2.5 relative" />
+                {/* <SidebarTrigger className="size-4 h-full flex items-center my-auto -top-2.5 relative" /> */}
                 {children}
               </div>
             </main>

src/components/global/navigation/sidebar-footer.tsx

@@ -2,40 +2,28 @@
 import {
   SidebarFooter,
   SidebarMenu,
-  SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { ChevronUp, User2 } from 'lucide-react';
 import { useUser } from '@/hooks/useUser';
-import { getUserDisplayName } from '@/utils/user';
-import LoadingSpinner from '@/components/ui/loading';
-import LogoutButton from '../logout';
-import Link from 'next/link';
-
-export default function SidebarFooterComponent() {
-  const { user, isError, isLoading } = useUser();
+import { Button } from '@/components/ui/button';
 
-  return (
-    <SidebarFooter>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <SidebarMenuButton>
+{
+  /* <DropdownMenu>
+            {/* <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                variant="outline"
+                className="bg-black-100 text-white"
+              >
                 <User2 />
                 {isLoading && <LoadingSpinner />}
                 {isError && 'Error'}
                 {user && getUserDisplayName(user)}
                 <ChevronUp className="ml-auto" />
               </SidebarMenuButton>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
+            </DropdownMenuTrigger> */
+}
+{
+  /* <DropdownMenuContent
               side="top"
               className="w-[--radix-popper-anchor-width] bg-black-75 border-black-50 text-white"
             >
@@ -58,8 +46,29 @@ export default function SidebarFooterComponent() {
                 <LogoutButton variant="ghost" padding="none" />
               </DropdownMenuItem>
             </DropdownMenuContent>
-          </DropdownMenu>
-        </SidebarMenuItem>
+          </DropdownMenu> */
+}
+
+export default function SidebarFooterComponent() {
+  const { user, isError, isLoading } = useUser();
+
+  return (
+    <SidebarFooter>
+      <SidebarMenu>
+        {user?.userLevel !== 'PREMIUM' && (
+          <SidebarMenuItem className="font-semibold font-ubuntu text-center flex flex-col gap-y-1 items-center justify-center rounded-lg border border-black-75 py-4 px-2">
+            <p className="text-sm">
+              Upgrade to{' '}
+              {user?.userLevel !== 'STANDARD' ? 'Standard' : 'Premium'}
+            </p>
+            <p className="text-xs font-light">
+              Elevate your development skills
+            </p>
+            <Button variant="accent" fullWidth className="mt-2" href="/upgrade">
+              Upgrade
+            </Button>
+          </SidebarMenuItem>
+        )}
       </SidebarMenu>
     </SidebarFooter>
   );

src/components/global/navigation/sidebar-submenu-item.tsx

@@ -5,17 +5,28 @@ import {
 } from '@/components/ui/sidebar';
 import type { SidebarItem } from '@/types/Sidebar';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 export default function AppSidebarSubMenuItem(opts: { item: SidebarItem }) {
+  const pathname = usePathname();
+
   const { item } = opts;
   if (!item.subItems) return null;
 
   return (
     <SidebarMenuSub>
       {item?.subItems.map((subItem) => (
-        <SidebarMenuSubItem key={subItem.title}>
+        <SidebarMenuSubItem key={subItem.url}>
           <SidebarMenuSubButton asChild>
-            <Link href={subItem.url} prefetch className="font-ubuntu text-lg">
+            <Link
+              href={subItem.url}
+              prefetch
+              className={`flex items-center font-ubuntu text-sm py-2 ${
+                pathname === subItem.url
+                  ? 'bg-white !text-black border border-black-75'
+                  : ''
+              }`}
+            >
               {subItem.title}
             </Link>
           </SidebarMenuSubButton>

src/components/global/navigation/sidebar.tsx

@@ -10,6 +10,8 @@ import {
   User,
   Bell,
   CreditCard,
+  RouteIcon,
+  HelpCircle,
 } from 'lucide-react';
 import {
   Sidebar,
@@ -20,6 +22,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarSeparator,
   SidebarTrigger,
 } from '@/components/ui/sidebar';
 import {
@@ -51,7 +54,10 @@ export function AppSidebar() {
   // Menu items
   const standardItems: SidebarItemType[] = [
     {
-      title: 'Home',
+      groupLabel: 'menu',
+    },
+    {
+      title: 'Dashboard',
       url: '/dashboard',
       icon: Home,
     },
@@ -75,8 +81,27 @@ export function AppSidebar() {
       ],
     },
     {
-      title: 'Stats',
+      title: (
+        <>
+          {user?.userLevel === 'ADMIN' ||
+          (user?.userLevel === 'PREMIUM' &&
+            !pathname.startsWith('/settings')) ? (
+            <p>Roadmap</p>
+          ) : (
+            <div className="flex items-center gap-3">
+              <p>Roadmap</p>
+              <LockIcon className="size-4" />
+            </div>
+          )}
+        </>
+      ),
       url: '#',
+      icon: RouteIcon,
+      disabled: user?.userLevel !== 'ADMIN' && user?.userLevel !== 'PREMIUM',
+    },
+    {
+      title: 'Stats',
+      url: '/',
       icon: ChartBarIncreasing,
       chip: ComingSoonChip,
     },
@@ -85,6 +110,14 @@ export function AppSidebar() {
       url: '/leaderboard/today',
       icon: Award,
     },
+    {
+      groupLabel: 'Support',
+    },
+    {
+      title: 'Help',
+      url: '/help',
+      icon: HelpCircle,
+    },
     {
       title: 'Settings',
       url: '/settings/profile',
@@ -139,25 +172,23 @@ export function AppSidebar() {
   const renderSidebarItem = (item: SidebarItemType) => {
     if ('groupLabel' in item) {
       return (
-        <SidebarGroup key={item.groupLabel}>
-          <SidebarGroupLabel className="px-0 h-fit text-base xl:text-lg font-ubuntutoshi">
+        <SidebarGroup key={item.groupLabel} className="mt-2">
+          <SidebarGroupLabel className="px-0 py-0 h-fit text-sm font-ubuntutoshi">
             {item.groupLabel}
           </SidebarGroupLabel>
         </SidebarGroup>
       );
     }
 
     return (
-      <SidebarMenuItem key={item.title}>
+      <SidebarMenuItem key={item.url}>
         {item.subItems ? (
           <Collapsible defaultOpen className="group/collapsible">
             <CollapsibleTrigger asChild>
               <SidebarMenuButton asChild>
                 <div className="flex items-center w-full">
                   {item.icon && <item.icon />}
-                  <span className="text-base xl:text-lg font-ubuntutoshi">
-                    {item.title}
-                  </span>
+                  <span className="text-sm font-ubuntutoshi">{item.title}</span>
                   <div className="ms-auto">{item.chip && <item.chip />}</div>
                 </div>
               </SidebarMenuButton>
@@ -168,37 +199,49 @@ export function AppSidebar() {
           </Collapsible>
         ) : (
           <SidebarMenuButton asChild>
-            <Link
-              href={item.url}
-              prefetch
-              className={`flex items-center font-ubuntutoshi text-base ${
-                pathname === item.url ? 'bg-black' : ''
-              }`}
-            >
-              {item.icon && <item.icon />}
-              <span className="text-base xl:text-lg">{item.title}</span>
-              <div className="ms-auto">{item.chip && <item.chip />}</div>
-            </Link>
+            {item.disabled ? (
+              <SidebarMenuItem className="flex items-center font-ubuntu text-sm p-2 gap-x-2 opacity-50 hover:cursor-not-allowed h-8">
+                {item.icon && <item.icon />}
+                <span className="text-sm font-ubuntutoshi">{item.title}</span>
+                <div className="ms-auto">{item.chip && <item.chip />}</div>
+              </SidebarMenuItem>
+            ) : (
+              <Link
+                href={item.url}
+                prefetch
+                className={`flex items-center font-ubuntu text-sm py-2 ${
+                  pathname === item.url
+                    ? 'bg-white text-black border border-black-75'
+                    : ''
+                }`}
+              >
+                {item.icon && <item.icon />}
+                <span className="text-sm">
+                  <>{item.title}</>
+                </span>
+                <div className="ms-auto">{item.chip && <item.chip />}</div>
+              </Link>
+            )}
           </SidebarMenuButton>
         )}
       </SidebarMenuItem>
     );
   };
 
   return (
-    <Sidebar className="p-3 rounded-xl">
-      <SidebarContent className="p-2">
+    <Sidebar>
+      <SidebarContent className="py-6">
         <SidebarGroup>
           <SidebarGroupLabel className="w-full flex items-center justify-between">
             <Link
               href="/dashboard"
-              className="text-base xl:text-lg lg:text-3xl font-bold font-ubuntu hover:text-white duration-300"
+              className="text-sm xl:text-2xl font-ubuntu hover:text-white duration-300"
               prefetch
             >
               meerge
             </Link>
           </SidebarGroupLabel>
-          <SidebarGroupContent className="mt-4">
+          <SidebarGroupContent className="mt-5">
             <SidebarMenu>
               {items.map((item) => renderSidebarItem(item))}
             </SidebarMenu>

src/components/ui/bento-grid.tsx

@@ -9,7 +9,7 @@ export const BentoGrid = ({
   children?: React.ReactNode;
 }) => {
   return (
-    <div className={cn('grid grid-cols-1 md:grid-cols-3 gap-4 ', className)}>
+    <div className={cn('grid grid-cols-1 md:grid-cols-3 gap-6 ', className)}>
       {children}
     </div>
   );

src/components/ui/sidebar.tsx

@@ -21,7 +21,7 @@ import {
 
 const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = '17rem';
+const SIDEBAR_WIDTH = '15rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
 const SIDEBAR_WIDTH_ICON = '3rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
@@ -199,7 +199,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-[--sidebar-width] p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -249,7 +249,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-black-50 group-data-[variant=floating]:shadow rounded-xl"
+            className="flex h-full w-full flex-col border-r border-black-50 group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-black-50 group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
@@ -422,7 +422,10 @@ const SidebarGroup = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      className={cn(
+        'relative flex w-full min-w-0 flex-col px-2 py-0',
+        className
+      )}
       {...props}
     />
   );

src/types/Sidebar.ts

@@ -1,14 +1,15 @@
 export interface SidebarItem {
-  title: string;
+  title: string | React.ReactNode;
   url: string;
   icon?: React.ComponentType;
   subItems?: SidebarItem[];
   chip?: React.ComponentType;
-  groupLabel?: string
+  groupLabel?: string;
+  disabled?: boolean;
 }
 
 export interface SidebarGroupItem {
   groupLabel: string;
 }
 
-export type SidebarItemType = SidebarItem | SidebarGroupItem;
+export type SidebarItemType = SidebarItem | SidebarGroupItem;