From 9684a1804673222d919aae68d7536712a700ab28 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 17 Feb 2025 16:06:11 +0100
Subject: [PATCH] ui update

---
 src/app/dashboard/page.tsx       |  2 +-
 src/components/accountStatus.tsx |  2 +-
 src/components/app.tsx           | 43 +++++++++++++++++++++-----------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 6a8bbd1..04c582b 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -40,7 +40,7 @@ export default async function Dashboard() {
                 </div>
 
                 <div className="w-full mt-5 flex gap-5 flex-col xl:flex-row">
-                    <div className="flex flex-col w-full gap-5 xl:w-[400px]">
+                    <div className="flex flex-col w-full gap-5 xl:w-[600px]">
                         <Ideas
                             ideas={[
                                 {
diff --git a/src/components/accountStatus.tsx b/src/components/accountStatus.tsx
index 8009c92..c1d08dd 100644
--- a/src/components/accountStatus.tsx
+++ b/src/components/accountStatus.tsx
@@ -15,7 +15,7 @@ export default function AccountStatus({
                 <CardTitle>Account status</CardTitle>
             </CardHeader>
 
-            <CardContent className="w-full h-[100px] grid gap-2 grid-cols-2">
+            <CardContent className="w-full h-[100px] grid gap-2 grid-cols-3">
                 {accounts.map((account, i) => (
                     <div key={i} className="flex">
                         {
diff --git a/src/components/app.tsx b/src/components/app.tsx
index 291e8a0..813e4ac 100644
--- a/src/components/app.tsx
+++ b/src/components/app.tsx
@@ -8,6 +8,7 @@ import {
     SidebarMenu,
     SidebarMenuItem,
     SidebarMenuButton,
+    SidebarFooter,
 } from '@/components/ui/sidebar';
 
 import { Calendar, LayoutDashboardIcon, Settings } from 'lucide-react';
@@ -25,6 +26,9 @@ const items = [
         url: '/calendar',
         icon: Calendar,
     },
+];
+
+const footer = [
     {
         title: 'Settings',
         url: '/settings',
@@ -35,9 +39,9 @@ const items = [
 export default function App({ children }: { children?: any }) {
     return (
         <div className="flex w-full">
-            <div>
+            <div className='md:w-28'>
                 <SidebarProvider>
-                    <Sidebar>
+                    <Sidebar className="w-28">
                         <SidebarContent>
                             <SidebarGroup>
                                 <SidebarGroupLabel>
@@ -45,25 +49,34 @@ export default function App({ children }: { children?: any }) {
                                 </SidebarGroupLabel>
                                 <SidebarGroupContent>
                                     <SidebarMenu>
-                                        {items.map((item) => (
-                                            <SidebarMenuItem key={item.title}>
-                                                <SidebarMenuButton asChild>
-                                                    <Link
-                                                        href={item.url}
-                                                        className="font-semibold"
-                                                    >
-                                                        <item.icon />
-                                                        <span>
-                                                            {item.title}
-                                                        </span>
-                                                    </Link>
-                                                </SidebarMenuButton>
+                                        {items.map((item, i) => (
+                                            <SidebarMenuItem
+                                                key={i}
+                                                className="w-16 mx-auto"
+                                            >
+                                                <Link href={item.url}>
+                                                    <item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
+                                                </Link>
                                             </SidebarMenuItem>
                                         ))}
                                     </SidebarMenu>
                                 </SidebarGroupContent>
                             </SidebarGroup>
                         </SidebarContent>
+                        <SidebarFooter className='mb-4'>
+                            <SidebarMenu>
+                                {footer.map((item, i) => (
+                                    <SidebarMenuItem
+                                        key={i}
+                                        className="w-16 mx-auto"
+                                    >
+                                        <Link href={item.url}>
+                                            <item.icon className="!size-full p-4 hover:bg-foreground hover:text-background rounded-2xl" />
+                                        </Link>
+                                    </SidebarMenuItem>
+                                ))}
+                            </SidebarMenu>
+                        </SidebarFooter>
                     </Sidebar>
                 </SidebarProvider>
             </div>