gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-31 09:18:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add logout and dropdown

Browse Source
This commit is contained in:
Aarnav Tale
2024-03-30 02:44:06 -04:00
parent 3f65c7e610
commit 50bcfa9c04
7 changed files with 144 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/_data.tsx
+75 -6
View File
@@ -1,6 +1,9 @@
import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline'
import { Menu, Transition } from '@headlessui/react'
import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline'
import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
import { Outlet, useLoaderData, useRouteError } from '@remix-run/react'
import { Form, Outlet, useLoaderData, useRouteError } from '@remix-run/react'
import clsx from 'clsx'
import { Fragment } from 'react/jsx-runtime'
import { ErrorPopup } from '~/components/Error'
import TabLink from '~/components/TabLink'
@@ -34,7 +37,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
}
const context = await getContext()
return context
return {
...context,
user: session.get('user')
}
}
export default function Layout() {
@@ -43,9 +49,72 @@ export default function Layout() {
<>
<header className='mb-16 bg-gray-800 text-white dark:bg-gray-700'>
<nav className='container mx-auto'>
<div className='flex items-center gap-x-2 mb-8 pt-4'>
<CpuChipIcon className='w-8 h-8'/>
<h1 className='text-2xl'>Headplane</h1>
<div className='flex items-center justify-between mb-8 pt-4'>
<div className='flex items-center gap-x-2'>
<CpuChipIcon className='w-8 h-8'/>
<h1 className='text-2xl'>Headplane</h1>
</div>
<div className='flex items-center gap-x-4'>
<a href='https://tailscale.com/download' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
Download
</a>
<a href='https://github.com/tale/headplane' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
GitHub
</a>
<a href='https://github.com/juanfont/headscale' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
Headscale
</a>
<div className='relative'>
<Menu>
<Menu.Button>
<UserCircleIcon className='w-8 h-8'/>
</Menu.Button>
<Transition
as={Fragment}
enter='transition ease-out duration-100'
enterFrom='transform opacity-0 scale-95'
enterTo='transform opacity-100 scale-100'
leave='transition ease-in duration-75'
leaveFrom='transform opacity-100 scale-100'
leaveTo='transform opacity-0 scale-95'
>
<Menu.Items className={clsx(
'absolute right-0 w-36 mt-2 rounded-md',
'text-gray-700 dark:text-gray-300',
'bg-white dark:bg-zinc-800 text-right',
'overflow-hidden',
'border border-gray-200 dark:border-zinc-500',
'divide-y divide-gray-200 dark:divide-zinc-500'
)}
>
<Menu.Item>
{() => (
<div className='px-4 py-2'>
<p>{data.user?.name}</p>
<p>{data.user?.email}</p>
</div>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<Form method='POST' action='/logout'>
<button
type='submit'
className={clsx(
'px-4 py-2 w-full text-right',
active ? 'bg-gray-200 dark:bg-zinc-500' : ''
)}
>
Logout
</button>
</Form>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
</div>
<div className='flex items-center gap-x-4'>
<TabLink to='/machines' name='Machines' icon={<ServerStackIcon className='w-5 h-5'/>}/>