feat: adds header items, title logo

compile.sh

@@ -1,7 +1,4 @@
 #!/bin/sh
-
-
-
 make
 
 cd bin/

src/routes/+layout.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import '../app.css';
+  import "../app.css";
-	import Header from './Header.svelte';
+  import Header from "./Header/Header.svelte";
 </script>
 
 <Header />
 <slot />
 
 <style>
-	@import '../variables.css';
+  @import "../variables.css";
 </style>

src/routes/Header.svelte

@@ -1,61 +0,0 @@
-<nav>
-	<div class="title">Library Manager</div>
-	<div class="items">
-		<div></div>
-		<!--  TODO: Switch icon between nf-md-view_list and nf-md-view_grid -->
-		<div>󰕰</div>
-		<div></div>
-	</div>
-</nav>
-
-<style>
-	nav {
-		height: 80px;
-		background-color: var(--dark-gray);
-		display: flex;
-		align-items: center;
-
-		& div {
-			height: 100%;
-			width: 50%;
-
-			padding: 0 20px;
-
-			display: flex;
-			align-items: center;
-
-			user-select: none;
-			-webkit-user-select: none;
-			-ms-user-select: none;
-
-			&:hover {
-				cursor: default;
-			}
-
-			&.title {
-				font-size: 40px;
-				font-weight: bold;
-				font-family: 'Oswald', sans-serif;
-			}
-
-			&.items {
-				font-family: 'NFSymbols', monospace;
-				font-size: 20px;
-
-				justify-content: flex-end;
-
-				& div {
-					width: auto;
-
-					display: flex;
-					justify-content: center;
-					align-items: center;
-
-					&:last-child {
-						padding-right: 0;
-					}
-				}
-			}
-		}
-	}
-</style>

src/routes/Header/Header.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import Item from "./Item.svelte";
+
+  enum ViewMode {
+    Grid,
+    List,
+  }
+
+  let view_mode = ViewMode.Grid;
+
+  function toggle_view() {
+    if (view_mode == ViewMode.Grid) {
+      view_mode = ViewMode.List;
+    } else if (view_mode == ViewMode.List) {
+      view_mode = ViewMode.Grid;
+    }
+  }
+</script>
+
+<nav>
+  <div class="title">
+    <div class="icon">󰗚</div>
+    Library Manager
+  </div>
+  <div class="items">
+    <Item></Item>
+    <Item on:click={toggle_view}>
+      {#if view_mode == ViewMode.Grid}
+        󰕰
+      {:else if view_mode == ViewMode.List}
+        󰕲
+      {/if}
+    </Item>
+    <Item></Item>
+  </div>
+</nav>
+
+<style>
+  nav {
+    height: 80px;
+    background-color: var(--dark-gray);
+    display: flex;
+    align-items: center;
+
+    & div {
+      height: 100%;
+
+      padding: 0 20px;
+
+      display: flex;
+      align-items: center;
+
+      user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+
+      &:hover {
+        cursor: default;
+      }
+
+      &.title {
+        & .icon {
+          font-family: "NFSymbols", monospace;
+          padding-left: 0;
+        }
+
+        width: 100%;
+        font-size: 40px;
+        font-weight: bold;
+        font-family: "Oswald", sans-serif;
+      }
+
+      &.items {
+        justify-content: flex-end;
+      }
+    }
+  }
+</style>

src/routes/Header/Item.svelte

@@ -0,0 +1,36 @@
+<button>
+  <slot />
+</button>
+
+<style>
+  button {
+    font-family: "NFSymbols", monospace;
+    font-size: 20px;
+    color: var(--foreground);
+
+    padding: 0 10px;
+    margin: 0 10px;
+    border-radius: 50%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: transparent;
+    border: none;
+
+    aspect-ratio: 1;
+
+    transition: background-color 0.1s linear, text-shadow 0.1s linear;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--light-gray);
+      text-shadow: 2px 2px var(--dark-gray);
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+</style>