use route group

This commit is contained in:
Ren Amamiya 2023-04-17 16:36:27 +07:00
parent 59667f2977
commit 2b0a4e2402
21 changed files with 12 additions and 127 deletions

View File

@ -2,7 +2,7 @@ import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function ChatsLayout({ children }: { children: React.ReactNode }) {
export default function NostrLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
@ -10,7 +10,7 @@ export default function ChatsLayout({ children }: { children: React.ReactNode })
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
<AppHeader collector={true} />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">

View File

@ -1,3 +1,5 @@
import AppHeader from '@components/appHeader';
export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
@ -5,7 +7,9 @@ export default function OnboardingLayout({ children }: { children: React.ReactNo
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
></div>
>
<AppHeader collector={false} />
</div>
<div className="relative flex min-h-0 w-full flex-1">{children}</div>
</div>
</div>

View File

@ -1,39 +0,0 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function ChannelsLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

View File

@ -1,39 +0,0 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

View File

@ -1,39 +0,0 @@
import AppHeader from '@components/appHeader';
import MultiAccounts from '@components/multiAccounts';
import Navigation from '@components/navigation';
export default function UsersLayout({ children }: { children: React.ReactNode }) {
return (
<div className="h-screen w-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-white">
<div className="flex h-screen w-full flex-col">
<div
data-tauri-drag-region
className="relative h-11 shrink-0 border-b border-zinc-100 bg-white dark:border-zinc-900 dark:bg-black"
>
<AppHeader />
</div>
<div className="relative flex min-h-0 w-full flex-1">
<div className="relative w-[68px] shrink-0 border-r border-zinc-900">
<MultiAccounts />
</div>
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
<Navigation />
</div>
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
<div className="h-full w-full rounded-lg">{children}</div>
</div>
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
<div className="flex h-full w-full items-center justify-center">
<p className="select-text p-8 text-center text-zinc-400">
This feature hasn&apos;t implemented yet, so resize Lume to the initial size for a better experience.
I&apos;m sorry for this inconvenience, and I swear I will add it soon 😁
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

View File

@ -1,7 +1,7 @@
'use client';
import Link from 'next/link';
import { useSelectedLayoutSegment } from 'next/navigation';
import { useSelectedLayoutSegments } from 'next/navigation';
export const ActiveLink = ({
href,
@ -14,8 +14,8 @@ export const ActiveLink = ({
activeClassName: string;
children: React.ReactNode;
}) => {
const segment = useSelectedLayoutSegment();
const isActive = href.includes(segment);
const segments = useSelectedLayoutSegments();
const isActive = href.includes(segments[1]);
return (
<Link href={href} className={`${className}` + ' ' + (isActive ? `${activeClassName}` : '')}>

View File

@ -8,15 +8,13 @@ const EventCollector = dynamic(() => import('@components/eventCollector'), {
ssr: false,
});
export default function AppHeader() {
export default function AppHeader({ collector }: { collector: boolean }) {
return (
<div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
<AppActions />
<div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
<div className="flex h-full items-center divide-x divide-zinc-900 px-4 pt-px"></div>
<div>
<EventCollector />
</div>
<div>{collector && <EventCollector />}</div>
</div>
</div>
);