feat(desktop): hide web nav + redirect / → /editor in Tauri builds
The marketing nav (Home/Docs/Examples/Pricing/Blog/GitHub/Discord) and
the LandingPage hero are great for velxio.dev visitors but become
clutter once the SPA ships inside a Tauri shell — the user installed
the desktop app to land in the editor, not to read about the project.
Two small VITE_DESKTOP gates handle this:
- AppHeader.tsx hides the <nav> + the mobile hamburger that toggles
it. The brand, language switcher, auto-save indicator, share
button, and the pro overlay's auth slot all stay visible — they
carry real per-session info, not navigation.
- App.tsx swaps the `/` route's element for a <Navigate to=/editor>
so first-launch (and any future `velxio://` deep-link that lands
on `/`) goes straight to the editor.
Equivalent actions for the items being hidden live on the native
menubar that the velxio-prod overlay builds via
pro/desktop/src-tauri/src/menu.rs.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
aab380e80b
commit
54adac3ae3
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, type ReactElement } from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { LandingPage } from './pages/LandingPage';
|
||||
import { EditorPage } from './pages/EditorPage';
|
||||
import { ExamplesPage } from './pages/ExamplesPage';
|
||||
|
|
@ -43,8 +43,17 @@ import './App.css';
|
|||
* Index entries (path === '') belong to the locale-prefixed parent's
|
||||
* `index` slot — they render at exactly `/<locale>/`.
|
||||
*/
|
||||
// In Tauri desktop builds the marketing landing page is a disorienting
|
||||
// first screen — users opened the desktop app to land in the editor.
|
||||
// `/` redirects there. Web builds still see the LandingPage.
|
||||
const ROOT_ELEMENT: ReactElement = import.meta.env.VITE_DESKTOP ? (
|
||||
<Navigate to="/editor" replace />
|
||||
) : (
|
||||
<LandingPage />
|
||||
);
|
||||
|
||||
const ROUTES: { path: string; element: ReactElement; index?: boolean }[] = [
|
||||
{ path: '/', element: <LandingPage />, index: true },
|
||||
{ path: '/', element: ROOT_ELEMENT, index: true },
|
||||
{ path: 'editor', element: <EditorPage /> },
|
||||
{ path: 'examples', element: <ExamplesPage /> },
|
||||
// /examples/<id> = SEO landing (preview, badges, "Open in Simulator" CTA).
|
||||
|
|
|
|||
|
|
@ -104,7 +104,13 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
|
|||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Main nav links (desktop) */}
|
||||
{/* Main nav links (web only). The Tauri desktop build hides
|
||||
this nav and surfaces the equivalent actions via the
|
||||
native menubar (see pro/desktop/src-tauri/src/menu.rs in
|
||||
velxio-prod). VITE_DESKTOP is the env flag the Tauri
|
||||
build sets — main.tsx already uses it to gate the @pro
|
||||
overlay, same pattern here. */}
|
||||
{!import.meta.env.VITE_DESKTOP && (
|
||||
<nav className={'header-nav-links' + (menuOpen ? ' header-nav-open' : '')}>
|
||||
<Link to={localize('/')} className={'header-nav-link' + isActive('/')}>
|
||||
{t('header.nav.home')}
|
||||
|
|
@ -168,6 +174,7 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
|
|||
{t('header.nav.discord')}
|
||||
</a>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: language + share + auth + mobile hamburger */}
|
||||
|
|
@ -224,16 +231,19 @@ export const AppHeader: React.FC<AppHeaderProps> = ({ autoSave }) => {
|
|||
OSS image has no auth backend either. */}
|
||||
<div data-velxio-slot="header-auth" style={{ display: 'contents' }} />
|
||||
|
||||
{/* Mobile hamburger */}
|
||||
<button
|
||||
className="header-hamburger"
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</button>
|
||||
{/* Mobile hamburger — useless in desktop where the nav it
|
||||
would expand is itself hidden. */}
|
||||
{!import.meta.env.VITE_DESKTOP && (
|
||||
<button
|
||||
className="header-hamburger"
|
||||
onClick={() => setMenuOpen((v) => !v)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue