From 78afa6be2223ee4f4fdc665946820be0f5084e28 Mon Sep 17 00:00:00 2001
From: michivonah <info@michivonah.ch>
Date: Sun, 27 Apr 2025 16:44:36 +0200
Subject: [PATCH] improve sidebar & layout

---
 src/app/home/feeds/manage/page.tsx | 11 +++++
 src/app/home/layout.tsx            |  1 -
 src/app/home/page.tsx              |  6 +--
 src/app/page.tsx                   | 18 +++++--
 src/components/app-sidebar.tsx     | 79 ++++++++++++++++++++----------
 5 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 src/app/home/feeds/manage/page.tsx

diff --git a/src/app/home/feeds/manage/page.tsx b/src/app/home/feeds/manage/page.tsx
new file mode 100644
index 0000000..08ad930
--- /dev/null
+++ b/src/app/home/feeds/manage/page.tsx
@@ -0,0 +1,11 @@
+export default function Page(){
+    return (
+        <div className="p-4">
+            <div className="py-4">
+                <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+                    Manage feeds
+                </h1>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/app/home/layout.tsx b/src/app/home/layout.tsx
index da06985..8cea1fb 100644
--- a/src/app/home/layout.tsx
+++ b/src/app/home/layout.tsx
@@ -7,7 +7,6 @@ export default function Layout({children}: {children: React.ReactNode}){
         <SidebarProvider>
             <AppSidebar />
             <main>
-                <SidebarTrigger />
                 {children}
             </main>
         </SidebarProvider>
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 6b27be0..120e332 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -2,13 +2,13 @@ import NewsCard from "@/components/news-card";
 
 export default function Page(){
     return (
-        <div>
-            <div>
+        <div className="p-4">
+            <div className="py-4">
                 <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
                     Home
                 </h1>
             </div>
-            <div className="grid grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 sm:rid-cols-2 md:grid-cols-4 gap-4">
                 <NewsCard />
                 <NewsCard />
                 <NewsCard />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9d2a906..6efb563 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,19 @@
+import { Button } from "@/components/ui/button";
+import { Rss } from "lucide-react";
+
 export default function Page() {
   return (
-    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-      RSS Reader
-    </h1>
+    <div className="h-screen flex flex-col justify-center items-center gap-6">
+      <div className="flex flex-col items-center gap-4">
+        <Rss size={40} />
+        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+          RSS Reader
+        </h1>
+      </div>
+
+      <div>
+        <Button>Log in</Button>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index 9acce13..db4376a 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -1,4 +1,5 @@
-import { Home, Rss, LogOut } from "lucide-react"
+import { Home, Rss, LogOut } from "lucide-react";
+import Link from 'next/link';
 
 import {
     Sidebar,
@@ -6,40 +7,63 @@ import {
     SidebarFooter,
     SidebarGroup,
     SidebarGroupContent,
-    SidebarGroupLabel,
+    //SidebarGroupLabel,
     SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
+    SidebarTrigger,
   } from "@/components/ui/sidebar";
 
-const items = [
-    {
-        title: "Home",
-        url: "/home",
-        icon: Home,
-    },
-    {
-        title: "Manage feeds",
-        url: "/home/feeds/manage",
-        icon: Rss,
-    },
-];
+const items = {
+    main: [
+        {
+            title: "Home",
+            url: "/home",
+            icon: Home,
+        },
+        {
+            title: "Manage feeds",
+            url: "/home/feeds/manage",
+            icon: Rss,
+        },
+    ],
+    footer: [
+        {
+            title: "Log out",
+            url: "#",
+            icon: LogOut,
+        },
+    ]
+};
 
 export function AppSidebar() {
     return (
-        <Sidebar collapsible="icon">            
+        <Sidebar collapsible="icon">
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton asChild>
+                            <SidebarTrigger />
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+
             <SidebarContent>
                 <SidebarGroup>
                     <SidebarGroupContent>
                         <SidebarMenu>
-                            {items.map((item) => (
+                            {items.main.map((item) => (
                                 <SidebarMenuItem key={item.title}>
                                     <SidebarMenuButton asChild>
-                                        <a href={item.url}>
+                                        <Link
+                                            key={item.title}
+                                            href={item.url}
+                                        >
                                             <item.icon />
                                             <span>{item.title}</span>
-                                        </a>
+                                        </Link>
                                     </SidebarMenuButton>
                                 </SidebarMenuItem>
                             ))}
@@ -49,16 +73,21 @@ export function AppSidebar() {
             </SidebarContent>
 
             <SidebarFooter>
-                <SidebarMenu>
-                    <SidebarMenuItem key="logoutBtn">
+            <SidebarMenu>
+                {items.footer.map((item) => (
+                    <SidebarMenuItem key={item.title}>
                         <SidebarMenuButton asChild>
-                            <a href="#">
-                                <LogOut />
-                                <span>Log out</span>
-                            </a>
+                        <Link
+                            key={item.title}
+                            href={item.url}
+                        >
+                            <item.icon />
+                            <span>{item.title}</span>
+                        </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
-                </SidebarMenu>
+                ))}
+            </SidebarMenu>
             </SidebarFooter>
         </Sidebar>
     )