boring.tools/boring.tools-poc
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(app): simplify navigation links

Browse Source
This commit is contained in:
Lars Hampe 2024-10-01 10:37:15 +02:00
parent 873d0009d4
commit db3667c024
3 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/app/src/components/Navigation.tsx
View File

@ -7,7 +7,8 @@ import {
CardTitle,
} from '@boring.tools/ui'
import { Link } from '@tanstack/react-router'
import { BellIcon, HomeIcon } from 'lucide-react'
import { BellIcon } from 'lucide-react'
import { NavigationRoutes } from '../utils/navigation-routes'
export const Navigation = () => {
return (
@ -24,14 +25,17 @@ export const Navigation = () => {
</div>
<div className="flex-1">
<nav className="grid items-start px-2 text-sm font-medium lg:px-4">
<Link
to="/"
className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
activeProps={{ className: 'bg-muted text-primary' }}
>
<HomeIcon className="h-4 w-4" />
Dashboard
</Link>
{NavigationRoutes.map((route) => (
<Link
key={route.to}
to={route.to}
className="flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary"
activeProps={{ className: 'bg-muted text-primary' }}
>
<route.icon className="h-4 w-4" />
{route.name}
</Link>
))}
</nav>
</div>
<div className="mt-auto p-4">
@ -39,8 +43,8 @@ export const Navigation = () => {
<CardHeader className="p-2 pt-0 md:p-4">
<CardTitle>More Infos</CardTitle>
<CardDescription>
If you want more informations about boring.tools, visit our
documenation!
If you want more information about boring.tools, visit our
documentation!
</CardDescription>
</CardHeader>
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">

30
apps/app/src/components/NavigationMobile.tsx
View File

@ -10,7 +10,8 @@ import {
SheetTrigger,
} from '@boring.tools/ui'
import { Link } from '@tanstack/react-router'
import { HomeIcon, MenuIcon } from 'lucide-react'
import { MenuIcon } from 'lucide-react'
import { NavigationRoutes } from '../utils/navigation-routes'
export const NavigationMobile = () => {
return (
@ -29,24 +30,27 @@ export const NavigationMobile = () => {
>
<span className="sr-only">boring.tools</span>
</Link>
<Link
to="/"
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground"
activeProps={{
className: 'bg-muted text-foreground',
}}
>
<HomeIcon className="h-5 w-5" />
Dashboard
</Link>
{NavigationRoutes.map((route) => (
<Link
key={route.to}
to={route.to}
className="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground"
activeProps={{
className: 'bg-muted text-foreground',
}}
>
<route.icon className="h-5 w-5" />
{route.name}
</Link>
))}
</nav>
<div className="mt-auto">
<Card>
<CardHeader className="p-2 pt-0 md:p-4">
<CardTitle>More Infos</CardTitle>
<CardDescription>
If you want more informations about boring.tools, visit our
documenation!
If you want more information about boring.tools, visit our
documentation!
</CardDescription>
</CardHeader>
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">

9
apps/app/src/utils/navigation-routes.ts Normal file
View File

@ -0,0 +1,9 @@
import { HouseIcon } from 'lucide-react'
export const NavigationRoutes = [
{
name: 'Dashboard',
to: '/',
icon: HouseIcon,
},
]