Merge pull request #125 from contember/pr/sandbox_title_fix

Pr/sandbox title fix

packages/admin-sandbox/src/components/Layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+import { ContemberLogoImage, Layout as ContemberLayout, Logo } from '@contember/admin'
+import { Navigation } from './Navigation'
+
+export const Layout = (props: { children?: ReactNode }) => (
+	<ContemberLayout
+		sidebarHeader={<Logo image={<ContemberLogoImage withLabel />}>Contember</Logo>}
+		navigation={<Navigation />}
+		children={props.children}
+	/>
+)

packages/admin-sandbox/src/components/Navigation.tsx

@@ -0,0 +1,23 @@
+import { Menu } from '@contember/admin'
+
+export const Navigation = () => (
+	<Menu>
+		<Menu.Item title="Dashboard" to="index">
+			<Menu.Item title="Inputs" to="inputs" />
+			<Menu.Item title="Tags" to="tags" />
+			<Menu.Item title="Categories" to="categories" />
+			<Menu.Item title="Articles" to="articleList" />
+			<Menu.Item title="Homepage" to="homepage" />
+			<Menu.Item title="Foo" to="fooPage" />
+			<Menu.Item title="Bar" to="barPage" />
+			<Menu.Item title="Lorem" to="loremPage">
+				<Menu.Item title="Bar 2" to="barPage">
+					<Menu.Item title="Bar 3" to="barPage" />
+				</Menu.Item>
+			</Menu.Item>
+		</Menu.Item>
+		<Menu.Item title="Other">
+			<Menu.Item title="Bar 4" to="barPage" />
+		</Menu.Item>
+	</Menu>
+)

packages/admin-sandbox/src/index.tsx

@@ -1,5 +1,5 @@
-import { ApplicationEntrypoint, runReactApp } from '@contember/admin'
-import Sandbox from './Sandbox'
+import { ApplicationEntrypoint, Pages, runReactApp } from '@contember/admin'
+import { Layout } from './components/Layout'
 import './index.sass'
 
 runReactApp(
@@ -8,14 +8,11 @@ runReactApp(
 		sessionToken={import.meta.env.VITE_CONTEMBER_ADMIN_SESSION_TOKEN as string}
 		project={'admin-sandbox'}
 		stage={'live'}
-		routes={{
-			dashboard: { path: '/' },
-			inputs: { path: '/inputs' },
-			second: { path: '/2nd' },
-			fooPage: { path: '/foo' },
-			barPage: { path: '/bar' },
-			loremPage: { path: '/lorem' },
-		}}
-		children={<Sandbox />}
+		children={
+			<Pages
+				layout={Layout}
+				children={Object.assign({}, ...Object.values(import.meta.globEager('./pages/*.tsx')))}
+			/>
+		}
 	/>,
 )

packages/admin-sandbox/src/pages/DashboardPage.tsx → packages/admin-sandbox/src/pages/IndexPage.tsx

@@ -9,13 +9,8 @@ import {
 	VideoFiles,
 } from '@contember/admin'
 
-// export const DashboardPage = (
-// 	<GenericPage pageName="dashboard" title="Sandbox admin">
-// 	</GenericPage>
-// )
-
-export const DashboardPage = (
-	<EditPage pageName="dashboard" entity="UploadShowcase(unique = One)">
+export const IndexPage = (
+	<EditPage pageName="index" entity="UploadShowcase(unique = One)" setOnCreate="(unique = One)">
 		<Link to="second">SECOND</Link>
 		<ImageUploadField urlField="singleTrivialImage.url" label="Trivial imageddd" />
 		<ImageUploadField

packages/admin-sandbox/src/pages/SecondPage.tsx

@@ -1,7 +1,7 @@
 import { EditPage, Link } from '@contember/admin'
 
 export const SecondPage = (
-	<EditPage pageName="second" entity="UploadShowcase(unique = One)">
-		<Link to="dashboard">DASHBOARD</Link>
+	<EditPage pageName="second" entity="UploadShowcase(unique = One)" setOnCreate="(unique = One)">
+		<Link to="index">DASHBOARD</Link>
 	</EditPage>
 )

packages/ui/src/components/Menu.tsx

@@ -83,30 +83,38 @@ namespace Menu {
 	}
 
 	function Title(props: TitleProps) {
-		const { children, external, suppressTo, onClick, ...otherProps } = props
-		const content = <Label size={otherProps.size} isActive={otherProps.isActive}>{children}</Label>
-		if (otherProps.href) {
-			return <a
-				href={otherProps.href}
-				{...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
-				onClick={event => {
-					if (onClick && !isSpecialLinkClick(event.nativeEvent)) {
-						onClick(event)
-						if (suppressTo) {
-							event.preventDefault()
-						}
+		const content = <Label size={props.size} isActive={props.isActive}>{props.children}</Label>
+
+		if (props.href) {
+			const onClick = (event: ReactMouseEvent<HTMLAnchorElement>) => {
+				if (props.onClick && !isSpecialLinkClick(event.nativeEvent)) {
+					props.onClick(event)
+					if (props.suppressTo) {
+						event.preventDefault()
 					}
-				}}
-				{...otherProps}
-			>{content}</a>
-		} else if (onClick) {
+				}
+			}
+
 			return (
-				<button type="button" onClick={onClick} {...otherProps}>
+				<a
+					className={props.className}
+					href={props.href}
+					onClick={onClick}
+					target={props.external ? '_blank' : undefined}
+					rel={props.external ? 'noopener noreferrer' : undefined}
+					children={content}
+				/>
+			)
+
+		} else if (props.onClick) {
+			return (
+				<button type="button" onClick={props.onClick} className={props.className}>
 					{content}
 				</button>
 			)
+
 		} else {
-			return <div {...otherProps}>{content}</div>
+			return <div className={props.className}>{content}</div>
 		}
 	}