improve sidebar & layout

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>
+    );
+}

src/app/home/layout.tsx

@@ -7,7 +7,6 @@ export default function Layout({children}: {children: React.ReactNode}){
         <SidebarProvider>
             <AppSidebar />
             <main>
-                <SidebarTrigger />
                 {children}
             </main>
         </SidebarProvider>

src/app/home/page.tsx

@@ -2,13 +2,13 @@ import NewsCard from "@/components/news-card";
 
 export default function Page(){
     return (
-        <div>
+        <div className="p-4">
-            <div>
+            <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 />

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">
+    <div className="h-screen flex flex-col justify-center items-center gap-6">
-      RSS Reader
+      <div className="flex flex-col items-center gap-4">
-    </h1>
+        <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>
   );
 }

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 = [
+const items = {
-    {
+    main: [
-        title: "Home",
+        {
-        url: "/home",
+            title: "Home",
-        icon: Home,
+            url: "/home",
-    },
+            icon: Home,
-    {
+        },
-        title: "Manage feeds",
+        {
-        url: "/home/feeds/manage",
+            title: "Manage feeds",
-        icon: Rss,
+            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>
+            <SidebarMenu>
-                    <SidebarMenuItem key="logoutBtn">
+                {items.footer.map((item) => (
+                    <SidebarMenuItem key={item.title}>
                         <SidebarMenuButton asChild>
-                            <a href="#">
+                        <Link
-                                <LogOut />
+                            key={item.title}
-                                <span>Log out</span>
+                            href={item.url}
-                            </a>
+                        >
+                            <item.icon />
+                            <span>{item.title}</span>
+                        </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
-                </SidebarMenu>
+                ))}
+            </SidebarMenu>
             </SidebarFooter>
         </Sidebar>
     )