Work on initial markup of UI

web/package.json

@@ -30,6 +30,11 @@
 		"vitest": "^3.0.0"
 	},
 	"dependencies": {
-		"@inlang/paraglide-js": "^2.0.0"
+		"@inlang/paraglide-js": "^2.0.0",
+		"bulma": "^1.0.3",
+		"node-sass": "^9.0.0",
+		"rollup-plugin-postcss": "^4.0.2",
+		"svelma": "^0.4.5",
+		"svelte-preprocess": "^6.0.3"
 	}
 }

web/src/app.css

@@ -1,2 +1 @@
-@import 'tailwindcss';
+@import 'bulma';
-@plugin '@tailwindcss/typography';

web/src/lib/components/nav.svelte

@@ -0,0 +1,24 @@
+<nav class="navbar mb-4 has-background-white-ter" aria-label="main navigation">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+            <h3 class="title is-3">storage-app</h3>
+        </a>
+        <button class="navbar-burger" aria-label="menu" aria-expanded="false">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+        </button>
+    </div>
+    <div class="navbar-start">
+        
+    </div>
+    <div class="navbar-end">
+        <div class="navbar-item">
+            Bell
+        </div>
+        <div class="navbar-item">
+            User
+        </div>
+    </div>
+</nav>

web/src/lib/components/sidebar.svelte

@@ -0,0 +1,39 @@
+<aside class="sidebar pl-0 mb-0">
+  <p class="sidebar-header">Workspace</p>
+  <ul class="sidebar-list">
+    <li class="is-active"><button>[ic] Files</button></li>
+    <li><button>[ic] Favorites</button></li>
+    <li><button>[ic] Activities</button></li>
+  </ul>
+  <p class="sidebar-header">Help</p>
+  <ul class="sidebar-list">
+    <li><button>Help</button></li>
+    <li><button>About</button></li>
+  </ul>
+</aside>
+
+<style scoped>
+.sidebar {
+
+}
+.sidebar-header {
+    color: hsl(0, 0%, 48%);
+    padding-left: 8px;
+}
+.sidebar-list {
+    /* margin-top: 2px; */
+    padding-top: 10px;
+    padding-left: 5px;
+    margin-bottom: 25px;
+}
+.sidebar-list li {
+    padding-left: 8px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    padding-right: 5px;
+    border-radius: 5px;
+}
+.sidebar-list li:hover, .sidebar-list li.is-active {
+    background-color: lightgray;
+}
+</style>

web/src/routes/+layout.svelte

@@ -1,7 +1,19 @@
 <script lang="ts">
 	import '../app.css';
+	import Nav from '$lib/components/nav.svelte';
+	import Sidebar from '$lib/components/sidebar.svelte'
 	
 	let { children } = $props();
 </script>
 
-{@render children()}
+<Nav />
+<div class="mx-5">
+	<div class="columns">
+		<div class="column pl-0">
+			<Sidebar />
+		</div>
+		<div class="column is-10">
+			{@render children()}
+		</div>
+	</div>
+</div>

web/src/routes/+page.svelte

@@ -1,2 +1,4 @@
-<h1>Welcome to SvelteKit</h1>
+<h4 class="title is-4">My Files</h4>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
+<script lang="ts">
+</script>