feat(navbar): add settings button

kwaa · kwaa · commit bb6be3278b82 · 2025-03-01T13:19:01.000+08:00
diff --git a/app/src/components/ui/navbar.tsx b/app/src/components/ui/navbar.tsx
@@ -4,11 +4,14 @@ import {
   Text,
 } from '@react-three/uikit'
 import { Button, Defaults, Input } from '@react-three/uikit-default'
-import { GithubIcon } from '@react-three/uikit-lucide'
+import { GithubIcon, SettingsIcon } from '@react-three/uikit-lucide'
 import { IfInSessionMode, useXRStore } from '@react-three/xr'
 
+import { useNavigate } from '~/router'
+
 export const Navbar = () => {
   const store = useXRStore()
+  const navigate = useNavigate()
 
   return (
     <IfInSessionMode deny={['immersive-ar', 'immersive-vr']}>
@@ -23,14 +26,6 @@ export const Navbar = () => {
           <Container flexDirection="column" gap={8} lg={{ flexDirection: 'row' }}>
             <Input maxWidth={256} placeholder="Send message..." />
             <Container gap={8} justifyContent="center">
-              <Button
-                data-test-id="github"
-                onClick={() => window.open('https://github.com/moeru-ai/n3p6', '_blank', 'noopener')}
-                size="icon"
-                variant="secondary"
-              >
-                <GithubIcon height={16} width={16} />
-              </Button>
               <Button
                 data-test-id="enter-vr"
                 onClick={() => void store.enterVR()}
@@ -45,6 +40,23 @@ export const Navbar = () => {
               >
                 <Text>Enter AR</Text>
               </Button>
+              <Button
+                data-test-id="settings"
+                // eslint-disable-next-line ts/no-misused-promises
+                onClick={async () => navigate('/settings')}
+                size="icon"
+                variant="secondary"
+              >
+                <SettingsIcon height={16} width={16} />
+              </Button>
+              <Button
+                data-test-id="github"
+                onClick={() => window.open('https://github.com/moeru-ai/n3p6', '_blank', 'noopener')}
+                size="icon"
+                variant="secondary"
+              >
+                <GithubIcon height={16} width={16} />
+              </Button>
             </Container>
           </Container>
         </Fullscreen>
