[fix](@svelteui/core): set fixed as true by default in AppShell and s…

…tory

packages/svelteui-core/src/components/AppShell/AppShell.stories.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Anchor } from '../Anchor';
+	import { Stack } from '../Stack';
+	import { Text } from '../Text';
+	import { Title } from '../Title';
+	import { AppShell, Header, Navbar, ShellSection } from './index';
+</script>
+
+<Meta title="Components/App Shell" component={AppShell} />
+
+<Template>
+	<AppShell>
+		<Navbar slot="navbar" fixed width={{ sm: 200, lg: 300 }}>
+			<ShellSection grow>
+				<Stack>
+					<Text align="center">Navbar</Text>
+					<Anchor href="#">Home Page</Anchor>
+					<Anchor href="#">Test Page</Anchor>
+				</Stack>
+			</ShellSection>
+		</Navbar>
+		<Header slot="header" height={60}>
+			<Title>Header</Title>
+		</Header>
+		<div style="display: flex;">This is the main content</div>
+	</AppShell>
+</Template>
+
+<Story name="App Shell" id="appShellStory" />

packages/svelteui-core/src/components/AppShell/AppShell.svelte

@@ -16,7 +16,7 @@
 		className: $$Props['className'] = '',
 		override: $$Props['override'] = {},
 		zIndex: $$Props['zIndex'] = 100,
-		fixed: $$Props['fixed'] = false,
+		fixed: $$Props['fixed'] = true,
 		padding: $$Props['padding'] = 'md',
 		navbarOffsetBreakpoint: $$Props['navbarOffsetBreakpoint'] = undefined,
 		asideOffsetBreakpoint: $$Props['asideOffsetBreakpoint'] = undefined;
@@ -33,6 +33,7 @@
 	));
 </script>
 
+<!-- @TODO: Remove the AppShellProvider, since it's not being used for anything (react pattern) -->
 <AppShellProvider {use} bind:element value={{ fixed, zIndex }} class={cx(className, classes.root)}>
 	<Box>
 		{#if $$slots.header}

packages/svelteui-core/src/components/AppShell/Navbar/Navbar.svelte

@@ -10,7 +10,7 @@
 		override: $$Props['override'] = {},
 		width: $$Props['width'] = undefined,
 		height: $$Props['height'] = undefined,
-		fixed: $$Props['fixed'] = false,
+		fixed: $$Props['fixed'] = true,
 		position: $$Props['position'] = { top: 0, left: 0 },
 		hiddenBreakpoint: $$Props['hiddenBreakpoint'] = 'md',
 		hidden: $$Props['hidden'] = false,