From ba8d911ddf7d346bf3a81090587ed481a6063085 Mon Sep 17 00:00:00 2001
From: ShyProton <shayanr1001@gmail.com>
Date: Tue, 23 Jan 2024 15:28:55 -0500
Subject: [PATCH] feat: adds header items, title logo
---
compile.sh | 3 --
src/routes/+layout.svelte | 6 +--
src/routes/Header.svelte | 61 --------------------------
src/routes/Header/Header.svelte | 78 +++++++++++++++++++++++++++++++++
src/routes/Header/Item.svelte | 36 +++++++++++++++
5 files changed, 117 insertions(+), 67 deletions(-)
delete mode 100644 src/routes/Header.svelte
create mode 100644 src/routes/Header/Header.svelte
create mode 100644 src/routes/Header/Item.svelte
diff --git a/compile.sh b/compile.sh
index 3e438b1..9e924df 100755
--- a/compile.sh
+++ b/compile.sh
@@ -1,7 +1,4 @@
#!/bin/sh
-
-
-
make
cd bin/
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2b57e98..d42b39b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,11 @@
<script lang="ts">
- import '../app.css';
- import Header from './Header.svelte';
+ import "../app.css";
+ import Header from "./Header/Header.svelte";
</script>
<Header />
<slot />
<style>
- @import '../variables.css';
+ @import "../variables.css";
</style>
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
deleted file mode 100644
index 733c272..0000000
--- a/src/routes/Header.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/Header/Header.svelte b/src/routes/Header/Header.svelte
new file mode 100644
index 0000000..8aa8dea
--- /dev/null
+++ b/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>
diff --git a/src/routes/Header/Item.svelte b/src/routes/Header/Item.svelte
new file mode 100644
index 0000000..4e302c3
--- /dev/null
+++ b/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>