mirror of
https://github.com/lumehq/lume.git
synced 2025-03-18 05:41:53 +01:00
use route group
This commit is contained in:
parent
59667f2977
commit
2b0a4e2402
@ -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">
|
@ -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>
|
@ -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't implemented yet, so resize Lume to the initial size for a better experience.
|
||||
I'm sorry for this inconvenience, and I swear I will add it soon 😁
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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't implemented yet, so resize Lume to the initial size for a better experience.
|
||||
I'm sorry for this inconvenience, and I swear I will add it soon 😁
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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't implemented yet, so resize Lume to the initial size for a better experience.
|
||||
I'm sorry for this inconvenience, and I swear I will add it soon 😁
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@ -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}` : '')}>
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user