mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed menu to be consistent between mini and main size.

Browse Source
This commit is contained in:
Michael Mainguy 2024-11-22 09:25:22 -05:00
parent 8c04b40d03
commit 5ce0c9ce4f
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "immersive", "name": "immersive",
"private": true, "private": true,
"version": "0.0.8-17", "version": "0.0.8-19",
"type": "module", "type": "module",
"license": "MIT", "license": "MIT",
"engines": { "engines": {

53
src/react/pageHeader.tsx
View File

@ -4,7 +4,6 @@ import {Link} from "react-router-dom";
import {useAuth0} from "@auth0/auth0-react"; import {useAuth0} from "@auth0/auth0-react";
export default function PageHeader() { export default function PageHeader() {
const {user, isAuthenticated, loginWithRedirect, logout} = useAuth0(); const {user, isAuthenticated, loginWithRedirect, logout} = useAuth0();
const picture = () => { const picture = () => {
if (user.picture) { if (user.picture) {
@ -23,6 +22,30 @@ export default function PageHeader() {
return <Button key="login" onClick={() => loginWithRedirect()}>Login</Button> return <Button key="login" onClick={() => loginWithRedirect()}>Login</Button>
} }
} }
const items = [{name: 'Examples', href: '/examples', key: 'examples'},
{name: 'About', href: '/', key: 'about'},
{name: 'Documentation', href: '/documentation', key: 'documentation'},
{name: 'Pricing', href: '/pricing', key: 'pricing'},
{name: 'VR Experience', href: '/db/public/local', key: 'vrexperience'}]
const mainMenu = function () {
return items.map((item) => {
return (
<Anchor component={Link} key={item.key} to={item.href} p={5} c="myColor" bg="none"
underline="hover">{item.name}</Anchor>
)
})
}
const miniMenu = function () {
return items.map((item) => {
return (
<Menu.Item><Anchor size="xl" component={Link} key={item.key}
to={item.href} p={5}
c="myColor" bg="none"
underline="hover">{item.name}</Anchor></Menu.Item>
)
})
}
return ( return (
<AppShell.Header p={5} m={20}> <AppShell.Header p={5} m={20}>
<Group justify="space-between"> <Group justify="space-between">
@ -30,36 +53,14 @@ export default function PageHeader() {
<Group justify="flex-end"> <Group justify="flex-end">
<Group visibleFrom="sm"> <Group visibleFrom="sm">
<Anchor component={Link} key="examples" to="/examples" p={5} c="myColor" bg="none" {mainMenu()}
underline="hover">Examples</Anchor>
<Anchor component={Link} key="about" to="/" p={5} c="myColor" bg="none"
underline="hover">About</Anchor>
<Anchor component={Link} key="documentation" to="/documentation" p={5} c="myColor" bg="none"
underline="hover">Documentation</Anchor>
<Anchor component={Link} key="pricing" to="/pricing" p={5} c="myColor" bg="none"
underline="hover">Pricing</Anchor>
<Anchor component={Link} key="vrexperience" to="/db/public/local" p={5} c="myColor" bg="none"
underline="hover">VR Experience</Anchor>
</Group> </Group>
<Menu trigger="click" openDelay={50} closeDelay={400}> <Menu trigger="click" openDelay={50} closeDelay={400}>
<Menu.Target> <Menu.Target>
<Burger hiddenFrom="sm"/> <Burger hiddenFrom="sm"/>
</Menu.Target> </Menu.Target>
<Menu.Dropdown> <Menu.Dropdown hiddenFrom="sm">
<Menu.Item><Anchor size="xl" component={Link} key="examples" to="/examples" p={5} {miniMenu()}
c="myColor" bg="none"
underline="hover">Examples</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="about" to="/" p={5} c="myColor" bg="none"
underline="hover">About</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="documentation" to="/documentation" p={5}
c="myColor" bg="none"
underline="hover">Documentation</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="pricing" to="/pricing" p={5} c="myColor"
bg="none"
underline="hover">Pricing</Anchor></Menu.Item>
<Menu.Item><Anchor size="xl" component={Link} key="vrexperience" to="/db/public/local" p={5}
c="myColor" bg="none"
underline="hover">VR Experience</Anchor></Menu.Item>
</Menu.Dropdown> </Menu.Dropdown>
</Menu> </Menu>