Topbar

<script lang="ts">
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
</script>

<Topbar>
	{#snippet brand()}<Brand />{/snippet}
</Topbar>

<script lang="ts">
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
</script>

<Topbar>
	{#snippet brand()}<Brand product="console" />{/snippet}
	{#snippet nav()}
		<Topbar mode="nav" label="Sections" items={[
			{ label: 'Services', href: '#services' },
			{ label: 'Deployments', href: '#deployments', current: true },
			{ label: 'Billing', href: '#billing' }
		]} />
	{/snippet}
	{#snippet end()}<ThemeSwitch />{/snippet}
</Topbar>

<script lang="ts">
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import CommandPalette from '@tcpsystems/ui/foundation/CommandPalette';
	import Avatar from '@tcpsystems/ui/foundation/Avatar';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
</script>

<Topbar>
	{#snippet brand()}<Brand product="console" />{/snippet}
	{#snippet nav()}
		<Topbar mode="nav" label="Sections" items={[
			{ label: 'Services', href: '#services' },
			{ label: 'Deployments', href: '#deployments' },
			{ label: 'Invoices', href: '#invoices' }
		]} />
	{/snippet}
	{#snippet search()}<CommandPalette mode="trigger" label="Search deployments" />{/snippet}
	{#snippet end()}
		<Avatar name="Priya Nair" size="sm" />
		<ThemeSwitch />
	{/snippet}
</Topbar>

<script lang="ts">
	import Topbar from '@tcpsystems/ui/foundation/Topbar';
	import Brand from '@tcpsystems/ui/foundation/Brand';
	import ThemeSwitch from '@tcpsystems/ui/foundation/ThemeSwitch';
</script>

<Topbar hasRail>
	{#snippet brand()}<Brand product="studio" />{/snippet}
	{#snippet end()}<ThemeSwitch />{/snippet}
</Topbar>