|
|
@ -2,7 +2,7 @@ import type React from 'react'; |
|
|
import { useState } from 'react'; |
|
|
import { useState } from 'react'; |
|
|
|
|
|
|
|
|
import { ErrorBoundary } from 'react-error-boundary'; |
|
|
import { ErrorBoundary } from 'react-error-boundary'; |
|
|
import { FiMessageCircle, FiSettings, FiTag } from 'react-icons/fi'; |
|
|
import { FiMessageCircle, FiSettings } from 'react-icons/fi'; |
|
|
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri'; |
|
|
import { RiMindMap, RiRoadMapLine } from 'react-icons/ri'; |
|
|
import { VscExtensions } from 'react-icons/vsc'; |
|
|
import { VscExtensions } from 'react-icons/vsc'; |
|
|
|
|
|
|
|
|
@ -11,7 +11,8 @@ import { IconButton } from '@components/generic/button/IconButton'; |
|
|
import { Sidebar } from '@components/layout/Sidebar'; |
|
|
import { Sidebar } from '@components/layout/Sidebar'; |
|
|
|
|
|
|
|
|
import { ErrorFallback } from '../ErrorFallback'; |
|
|
import { ErrorFallback } from '../ErrorFallback'; |
|
|
import { Tab } from '../Tab'; |
|
|
import type { TabProps } from '../Tab'; |
|
|
|
|
|
import { Tabs } from '../Tabs'; |
|
|
|
|
|
|
|
|
export interface LayoutProps { |
|
|
export interface LayoutProps { |
|
|
title: string; |
|
|
title: string; |
|
|
@ -30,7 +31,7 @@ export const Layout = ({ |
|
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
const route = useRoute(); |
|
|
|
|
|
|
|
|
const tabs = [ |
|
|
const tabs: Omit<TabProps, 'activeLeft' | 'activeRight'>[] = [ |
|
|
{ |
|
|
{ |
|
|
title: 'Messages', |
|
|
title: 'Messages', |
|
|
icon: <FiMessageCircle />, |
|
|
icon: <FiMessageCircle />, |
|
|
@ -55,22 +56,20 @@ export const Layout = ({ |
|
|
link: routes.extensions().link, |
|
|
link: routes.extensions().link, |
|
|
active: route.name === 'extensions', |
|
|
active: route.name === 'extensions', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
|
|
|
title: 'Temp', |
|
|
|
|
|
icon: <FiTag />, |
|
|
|
|
|
link: routes.extensions().link, |
|
|
|
|
|
active: route.name === 'map', |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className="relative flex w-full bg-gray-100 dark:bg-secondaryDark md:overflow-hidden md:shadow-xl"> |
|
|
<div className="relative flex w-full bg-white dark:bg-secondaryDark "> |
|
|
<div className="flex flex-grow"> |
|
|
<div className="flex flex-grow"> |
|
|
<Sidebar settingsOpen={settingsOpen} setSettingsOpen={setSettingsOpen}> |
|
|
<Sidebar settingsOpen={settingsOpen} setSettingsOpen={setSettingsOpen}> |
|
|
<div className="flex gap-2 border-b border-gray-300 p-2 dark:border-gray-600"> |
|
|
<div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark"> |
|
|
<IconButton icon={icon} /> |
|
|
<div className="flex h-10 gap-1"> |
|
|
<div className="my-auto text-lg font-medium dark:text-white"> |
|
|
<div className="my-auto"> |
|
|
{title} |
|
|
<IconButton icon={icon} /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div className="my-auto text-lg font-medium dark:text-white"> |
|
|
|
|
|
{title} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className="flex flex-col gap-2">{sidebarContents}</div> |
|
|
<div className="flex flex-col gap-2">{sidebarContents}</div> |
|
|
@ -78,10 +77,10 @@ export const Layout = ({ |
|
|
</div> |
|
|
</div> |
|
|
<ErrorBoundary FallbackComponent={ErrorFallback}> |
|
|
<ErrorBoundary FallbackComponent={ErrorFallback}> |
|
|
<div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark"> |
|
|
<div className="flex h-full w-full flex-col bg-gray-300 dark:bg-secondaryDark"> |
|
|
<div className="flex w-full bg-gray-100 pt-1 dark:bg-primaryDark"> |
|
|
<div className="flex w-full bg-white pt-1 dark:bg-primaryDark"> |
|
|
<div className="h-8"> |
|
|
<div className="z-10 -mr-2 h-8"> |
|
|
<IconButton |
|
|
<IconButton |
|
|
className="mx-1 rounded-b-none p-3" |
|
|
className="m-1" |
|
|
icon={<FiSettings />} |
|
|
icon={<FiSettings />} |
|
|
onClick={(): void => { |
|
|
onClick={(): void => { |
|
|
setSettingsOpen(!settingsOpen); |
|
|
setSettingsOpen(!settingsOpen); |
|
|
@ -89,18 +88,7 @@ export const Layout = ({ |
|
|
active={settingsOpen} |
|
|
active={settingsOpen} |
|
|
/> |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
{tabs.map((tab, index) => ( |
|
|
<Tabs tabs={tabs} /> |
|
|
<Tab |
|
|
|
|
|
key={index} |
|
|
|
|
|
link={tab.link} |
|
|
|
|
|
title={tab.title} |
|
|
|
|
|
icon={tab.icon} |
|
|
|
|
|
active={tab.active} |
|
|
|
|
|
activeLeft={tabs[index - 1]?.active} |
|
|
|
|
|
activeRight={tabs[index + 1]?.active} |
|
|
|
|
|
/> |
|
|
|
|
|
))} |
|
|
|
|
|
<div className="-z-10 flex-grow shadow-md" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div className="flex flex-grow">{children}</div> |
|
|
<div className="flex flex-grow">{children}</div> |
|
|
</div> |
|
|
</div> |
|
|
|
Sacha Weatherstone
4 years ago