src/App.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-import favicon from '$shared/assets/favicon.svg';
-import './app.css';
-import Page from './routes/Page.svelte';
-</script>
-
-<svelte:head>
-    <link rel="icon" href={favicon} />
-</svelte:head>
-
-<div id="app-root">
-    <Page />
-</div>
-
-<style>
-#app-root {
-    width: 100%;
-    height: 100vh;
-}
-</style>

src/app/App.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+import Page from '$routes/Page.svelte';
+import Layout from './ui/Layout.svelte';
+</script>
+
+<Layout>
+    <Page />
+</Layout>

src/app/ui/Layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+import favicon from '$shared/assets/favicon.svg';
+import * as Sidebar from '$shared/shadcn/ui/sidebar/index';
+import { AppSidebar } from '$widgets/AppSidebar';
+
+let { children } = $props();
+</script>
+
+<svelte:head>
+    <link rel="icon" href={favicon} />
+</svelte:head>
+
+<div class="app">
+    <header></header>
+
+    <Sidebar.Provider>
+        <AppSidebar />
+        <main>
+            <Sidebar.Trigger />
+            {@render children?.()}
+        </main>
+    </Sidebar.Provider>
+
+    <footer></footer>
+</div>
+
+<style>
+#app-root {
+    width: 100%;
+    height: 100vh;
+}
+</style>

src/main.ts

@@ -1,5 +1,6 @@
+import App from '$app/App.svelte';
 import { mount } from 'svelte';
-import App from './App.svelte';
+import '$app/styles/app.css';
 
 mount(App, {
     target: document.getElementById('app')!,

src/routes/Page.svelte

@@ -1,10 +1,7 @@
 <script>
-import CategoryFilter from '$features/CategoryFilter/ui/CategoryFilter.svelte';
-import Button from '$shared/shadcn/ui/button/button.svelte';
 </script>
 
 <h1>Welcome to Svelte + Vite</h1>
 <p>
     Visit <a href="https://svelte.dev/docs">svelte.dev/docs</a> to read the documentation
 </p>
-<CategoryFilter />