git.iko.soy/sphinx
on 55e85fe help sign in
sphinx/ui/src/components/Layout.tsx
38 lines 1.7 kB history raw
1import cn from 'classnames';
2import React from 'react';
3import { NavLink, Outlet, useParams } from 'react-router-dom';
4import { Meta } from './Meta';
6export const Layout = () => {
7 const params = useParams<{ lookup: string }>();
9 return (
10 <main className={cn("flex flex-col items-center min-h-screen", !params.lookup && 'justify-center')}>
11 <div className="max-w-2xl w-full p-4 sm:py-12 sm:px-8 space-y-6">
12 <Outlet />
13 </div>
14 <aside className='self-start mx-4 mb-6 mt-auto sm:m-0 sm:fixed left-4 bottom-4'>
15 <nav className='mb-10'>
16 <ul className='font-semibold text-sm space-y-4'>
17 <li>
18 <NavLink to="/search" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>search</NavLink>
19 </li>
20 <li>
21 <NavLink to="/manage-listings" end className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>my listings</NavLink>
22 </li>
23 <li>
24 <NavLink to="/manage-listings/post" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>post listing</NavLink>
25 </li>
26 <li>
27 <NavLink to="/manage-listings/apps" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>add apps</NavLink>
28 </li>
29 <li>
30 <NavLink to="/manage-listings/groups" className={({ isActive }) => cn('hover:text-rosy transition-colors', isActive && 'underline')}>add groups</NavLink>
31 </li>
32 </ul>
33 </nav>
34 <Meta className='text-sm'/>
35 </aside>
36 </main>
37 )