markus/next-ory
1
0
Fork 0
mirror of https://codeberg.org/MarkusThielker/next-ory.git synced 2025-07-01 04:29:18 +00:00
Code Releases Packages Activity

NORY-8: add sidebar to the application

Browse source 
Moved theme toggle and logout button to the footer of the sidebar
This commit is contained in:
Markus Thielker 2024-12-01 10:53:04 +01:00
parent 7d04a8faa1
commit 101601c287
No known key found for this signature in database
6 changed files with 121 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

103
dashboard/src/components/app-sidebar.tsx Normal file
View file

@ -0,0 +1,103 @@
'use client';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { AppWindow, Home, LogOut, Moon, Sun, Users } from 'lucide-react';
import React from 'react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useTheme } from 'next-themes';
import { LogoutLink } from '@/ory';
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
const { setTheme } = useTheme();
const items = [
{
title: 'Home',
url: '/',
icon: Home,
},
{
title: 'Users',
url: '/user',
icon: Users,
},
{
title: 'Applications',
url: '/application',
icon: AppWindow,
},
];
return (
<Sidebar variant="floating" {...props} collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon/>
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton>
<Sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"/>
<Moon
className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"/>
<span>Change Theme</span>
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setTheme('light')}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('dark')}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme('system')}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton onClick={LogoutLink()}>
<LogOut/>
<span>Logout</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);
}

16
dashboard/src/components/auth/logout.tsx
View file

@ -1,16 +0,0 @@
'use client';
import { LogOut } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { LogoutLink } from '@/ory';
export function LogoutButton() {
const onLogout = LogoutLink();
return (
<Button variant="outline" size="icon" onClick={onLogout}>
<LogOut className="h-[1.2rem] w-[1.2rem]"/>
</Button>
);
}