michi.vonah/rss-reader
1
0
Fork 0
mirror of https://github.com/michivonah/rss-reader.git synced 2025-12-22 20:46:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve sidebar & layout

Browse source
This commit is contained in:
Michi 2025-04-27 16:44:36 +02:00
parent c762f95db7
commit 78afa6be22
5 changed files with 83 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/home/feeds/manage/page.tsx Normal file
View file

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

1
src/app/home/layout.tsx
View file

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

6
src/app/home/page.tsx
View file

@ -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 />

18
src/app/page.tsx
View file

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

79
src/components/app-sidebar.tsx
View file

@ -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>
)