62 lines
2.5 KiB
HTML
62 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>4 modern SaaS nav layouts</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
html, body { margin: 0; padding: 0; height: 100%; background: #f0eee9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
|
</style>
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="design-canvas.jsx"></script>
|
|
<script type="text/babel" src="nav-styles.jsx"></script>
|
|
<script type="text/babel">
|
|
const { DesignCanvas, DCSection, DCArtboard } = window;
|
|
const W = 1440, H = 900;
|
|
|
|
function App() {
|
|
return (
|
|
<DesignCanvas>
|
|
<DCSection
|
|
id="app-navs"
|
|
title="App navigation"
|
|
subtitle="In-product chrome for an authenticated workspace."
|
|
>
|
|
<DCArtboard id="sidebar" label="01 · Sidebar w/ workspaces" width={W} height={H}>
|
|
<NavSidebar />
|
|
</DCArtboard>
|
|
<DCArtboard id="rail" label="02 · Icon rail + secondary panel" width={W} height={H}>
|
|
<NavIconRail />
|
|
</DCArtboard>
|
|
<DCArtboard id="topbar" label="03 · Top horizontal + ⌘K bar" width={W} height={H}>
|
|
<NavTopHorizontal />
|
|
</DCArtboard>
|
|
</DCSection>
|
|
|
|
<DCSection
|
|
id="marketing-nav"
|
|
title="Marketing navigation"
|
|
subtitle="Public-facing homepage chrome."
|
|
>
|
|
<DCArtboard id="glasspill" label="04 · Floating glass pill" width={W} height={H}>
|
|
<NavFloatingGlass />
|
|
</DCArtboard>
|
|
</DCSection>
|
|
</DesignCanvas>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
|
</script>
|
|
</body>
|
|
</html>
|