+4 -1

src/webapp/app/(dashboard)/explore/layout.tsx

··· 1 1 + import BackButton from '@/components/navigation/backButton/BackButton'; 1 2 import Header from '@/components/navigation/header/Header'; 2 3 import type { Metadata } from 'next'; 3 4 import { Fragment } from 'react'; ··· 14 15 export default function Layout(props: Props) { 15 16 return ( 16 17 <Fragment> 17 17 - <Header /> 18 18 + <Header> 19 19 + <BackButton href="/home">Home</BackButton> 20 20 + </Header> 18 21 {props.children} 19 22 </Fragment> 20 23 );

+4 -1

src/webapp/app/(dashboard)/profile/[handle]/(withHeader)/layout.tsx

··· 6 6 import { Fragment, Suspense } from 'react'; 7 7 import { ApiClient } from '@/api-client/ApiClient'; 8 8 import ProfileHeaderSkeleton from '@/features/profile/components/profileHeader/Skeleton.ProfileHeader'; 9 9 + import BackButton from '@/components/navigation/backButton/BackButton'; 9 10 10 11 interface Props { 11 12 params: Promise<{ handle: string }>; ··· 35 36 36 37 return ( 37 38 <Fragment> 38 38 - <Header /> 39 39 + <Header> 40 40 + <BackButton href="/home">Home</BackButton> 41 41 + </Header> 39 42 <Suspense fallback={<ProfileHeaderSkeleton />} key={handle}> 40 43 <ProfileHeader handle={handle} /> 41 44 </Suspense>

+10 -5

src/webapp/app/(dashboard)/profile/[handle]/(withoutHeader)/collections/[rkey]/layout.tsx

··· 1 1 import { ApiClient } from '@/api-client/ApiClient'; 2 2 + import BackButton from '@/components/navigation/backButton/BackButton'; 2 3 import Header from '@/components/navigation/header/Header'; 4 4 + import { truncateText } from '@/lib/utils/text'; 3 5 import type { Metadata } from 'next'; 4 6 import { Fragment } from 'react'; 5 7 6 8 interface Props { 7 9 params: Promise<{ rkey: string; handle: string }>; 10 10 + children: React.ReactNode; 8 11 } 9 12 10 13 export async function generateMetadata({ params }: Props): Promise<Metadata> { ··· 27 30 }; 28 31 } 29 32 30 30 - interface Props { 31 31 - children: React.ReactNode; 32 32 - } 33 33 + export default async function Layout(props: Props) { 34 34 + const { handle } = await props.params; 33 35 34 34 - export default function Layout(props: Props) { 35 36 return ( 36 37 <Fragment> 37 37 - <Header /> 38 38 + <Header> 39 39 + <BackButton 40 40 + href={`/profile/${handle}`} 41 41 + >{`@${truncateText(handle, 20)}`}</BackButton> 42 42 + </Header> 38 43 {props.children} 39 44 </Fragment> 40 45 );

+4 -1

src/webapp/app/(dashboard)/url/layout.tsx

··· 1 1 + import BackButton from '@/components/navigation/backButton/BackButton'; 1 2 import Header from '@/components/navigation/header/Header'; 2 3 import { Fragment } from 'react'; 3 4 ··· 8 9 export default async function Layout(props: Props) { 9 10 return ( 10 11 <Fragment> 11 11 - <Header /> 12 12 + <Header> 13 13 + <BackButton href={'/explore'}>Explore</BackButton> 14 14 + </Header> 12 15 {props.children} 13 16 </Fragment> 14 17 );

+2

src/webapp/components/navigation/NavbarToggle.tsx

··· 14 14 variant="light" 15 15 color="gray" 16 16 size={'lg'} 17 17 + radius={'xl'} 17 18 onClick={toggleMobile} 18 19 hiddenFrom="xs" 19 20 > ··· 23 24 variant="light" 24 25 color="gray" 25 26 size={'lg'} 27 27 + radius={'xl'} 26 28 onClick={toggleDesktop} 27 29 visibleFrom="xs" 28 30 >

+14 -12

src/webapp/components/navigation/backButton/BackButton.tsx

··· 1 1 - 'use client'; 2 2 - 3 3 - import { useRouter } from 'next/navigation'; 4 4 - import { ActionIcon } from '@mantine/core'; 1 1 + import { Button } from '@mantine/core'; 5 2 import { BiSolidLeftArrowAlt } from 'react-icons/bi'; 3 3 + import Link from 'next/link'; 6 4 7 7 - export default function BackButton() { 8 8 - const router = useRouter(); 5 5 + interface Props { 6 6 + href: string; 7 7 + children: string; 8 8 + } 9 9 10 10 + export default function BackButton(props: Props) { 10 11 return ( 11 11 - <ActionIcon 12 12 + <Button 13 13 + component={Link} 14 14 + href={props.href} 12 15 variant="light" 16 16 + size="xs" 13 17 color="gray" 14 14 - size={'lg'} 15 15 - radius={'xl'} 16 16 - onClick={() => router.back()} 18 18 + leftSection={<BiSolidLeftArrowAlt />} 17 19 > 18 18 - <BiSolidLeftArrowAlt /> 19 19 - </ActionIcon> 20 20 + {props.children} 21 21 + </Button> 20 22 ); 21 23 }

+10 -4

src/webapp/components/navigation/header/Header.tsx

··· 1 1 import { Box, Divider, Group } from '@mantine/core'; 2 2 import NavbarToggle from '../NavbarToggle'; 3 3 - import BackButton from '../backButton/BackButton'; 3 3 + import { ReactElement } from 'react'; 4 4 + 5 5 + interface Props { 6 6 + children?: ReactElement; 7 7 + } 4 8 5 5 - export default function Header() { 9 9 + export default function Header(props: Props) { 6 10 return ( 7 11 <Box> 8 12 <Group gap={'xs'} p={'xs'} justify="space-between"> 9 9 - <BackButton /> 10 10 - <NavbarToggle /> 13 13 + {props.children} 14 14 + <Box ml={'auto'}> 15 15 + <NavbarToggle /> 16 16 + </Box> 11 17 </Group> 12 18 <Divider /> 13 19 </Box>