feat(dashboard): some minor dashboard style changes

Author: Logannford

src/app/(default_layout)/layout.tsx

@@ -29,7 +29,7 @@ export default function Layout({
 
             {/* 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-6 lg:pb-3 lg:ml-break-out pl-break-out">
               <div className="lg:pl-6 h-full">
                 {/* <SidebarTrigger className="size-4 h-full flex items-center my-auto -top-2.5 relative" /> */}
                 {children}

src/components/global/navigation/sidebar.tsx

@@ -11,6 +11,7 @@ import {
   Bell,
   CreditCard,
   RouteIcon,
+  HelpCircle,
 } from 'lucide-react';
 import {
   Sidebar,
@@ -21,6 +22,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  SidebarSeparator,
   SidebarTrigger,
 } from '@/components/ui/sidebar';
 import {
@@ -58,7 +60,10 @@ export function AppSidebar() {
   // Menu items
   const standardItems: SidebarItemType[] = [
     {
-      title: 'Home',
+      groupLabel: 'menu',
+    },
+    {
+      title: 'Dashboard',
       url: '/dashboard',
       icon: Home,
     },
@@ -109,6 +114,14 @@ export function AppSidebar() {
       url: '/leaderboard/today',
       icon: Award,
     },
+    {
+      groupLabel: 'Support',
+    },
+    {
+      title: 'Help',
+      url: '/help',
+      icon: HelpCircle,
+    },
     {
       title: 'Settings',
       url: '/settings/profile',
@@ -163,8 +176,8 @@ export function AppSidebar() {
   const renderSidebarItem = (item: SidebarItemType) => {
     if ('groupLabel' in item) {
       return (
-        <SidebarGroup key={item.groupLabel}>
-          <SidebarGroupLabel className="px-0 h-fit text-sm 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>
@@ -205,7 +218,9 @@ export function AppSidebar() {
                 href={item.url}
                 prefetch
                 className={`flex items-center font-ubuntu text-sm py-2 ${
-                  pathname === item.url ? 'bg-black border border-black-75' : ''
+                  pathname === item.url
+                    ? 'bg-white text-black border border-black-75'
+                    : ''
                 }`}
               >
                 {item.icon && <item.icon />}
@@ -223,18 +238,18 @@ export function AppSidebar() {
 
   return (
     <Sidebar>
-      <SidebarContent className="py-2">
+      <SidebarContent className="py-6">
         <SidebarGroup>
           <SidebarGroupLabel className="w-full flex items-center justify-between">
             <Link
               href="/dashboard"
-              className="text-sm xl:text-xl 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-8">
+          <SidebarGroupContent className="mt-5">
             <SidebarMenu>
               {items.map((item) => renderSidebarItem(item))}
             </SidebarMenu>

src/components/ui/sidebar.tsx

@@ -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}
     />
   );