From bf6873d261841adbd220adc533f2c986dca2cf8c Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Wed, 3 Jan 2024 04:37:21 +0100
Subject: [PATCH] Responsive design

---
 frontend/package.json                         |  1 +
 .../icons/chevron-right-svgrepo-com.svg       |  3 +
 .../src/components/icons/menu_opener.svelte   | 19 ++++++
 frontend/src/components/project/header.svelte | 10 +--
 .../src/components/project/project.svelte     | 12 +++-
 frontend/src/components/sidebar.svelte        | 61 +++++++++++++++++--
 frontend/src/stores/config.ts                 |  2 +-
 7 files changed, 94 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/icons/chevron-right-svgrepo-com.svg
 create mode 100644 frontend/src/components/icons/menu_opener.svelte

diff --git a/frontend/package.json b/frontend/package.json
index e57ca14..9a1e0e7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,6 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
+		"dev-host": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "playwright test",
diff --git a/frontend/src/components/icons/chevron-right-svgrepo-com.svg b/frontend/src/components/icons/chevron-right-svgrepo-com.svg
new file mode 100644
index 0000000..186dd4a
--- /dev/null
+++ b/frontend/src/components/icons/chevron-right-svgrepo-com.svg
@@ -0,0 +1,3 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 6L15 12L9 18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/components/icons/menu_opener.svelte b/frontend/src/components/icons/menu_opener.svelte
new file mode 100644
index 0000000..22f0026
--- /dev/null
+++ b/frontend/src/components/icons/menu_opener.svelte
@@ -0,0 +1,19 @@
+<!-- <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M4 6H20M4 12H14M4 18H9"
+		stroke="#fff"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg> -->
+
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M9 6L15 12L9 18"
+		stroke="#fff"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/frontend/src/components/project/header.svelte b/frontend/src/components/project/header.svelte
index 4f7d3dd..ffa11d4 100644
--- a/frontend/src/components/project/header.svelte
+++ b/frontend/src/components/project/header.svelte
@@ -56,9 +56,7 @@
 				currentChoice={view?.primary_tag_id}
 			/>
 		</div>
-		<div>
-			<button class:disabled={true}>Sub-group</button>
-		</div>
+		<button class:disabled={true}>Sub-group</button>
 		<button class:disabled={true}>Filter</button>
 		<button class:disabled={true}>Sort</button>
 		<button id="newButton" on:click={async () => cards.add(project.id, getEmptyTags())}>New</button>
@@ -67,27 +65,29 @@
 
 <style lang="less">
 	header {
+		margin: 0 50px;
 		padding: 20px 0;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		flex-wrap: wrap;
 		border-bottom: 2px solid #444;
 	}
 
 	h2 {
-		font-size: 40px;
+		font-size: 30px;
 	}
 
 	nav {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
+		gap: 7px;
 
 		button {
 			cursor: pointer;
 			color: #aaa;
 			padding: 5px 10px;
-			margin-left: 10px;
 			border-radius: 7px;
 			border: none;
 			background-color: transparent;
diff --git a/frontend/src/components/project/project.svelte b/frontend/src/components/project/project.svelte
index 720f6e2..ffe9672 100644
--- a/frontend/src/components/project/project.svelte
+++ b/frontend/src/components/project/project.svelte
@@ -67,13 +67,21 @@
 	section {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
-		margin: 0 40px;
+		height: 100vh;
+		transition: all 0.3s ease-in-out;
+		width: 100vw;
+
+		@media (min-width: 800px) {
+			margin-left: 250px;
+			width: calc(100vw - 250px);
+		}
 	}
 
 	.grid {
 		display: flex;
 		flex-direction: row;
 		flex: 1;
+		overflow: scroll;
+		padding: 0 40px;
 	}
 </style>
diff --git a/frontend/src/components/sidebar.svelte b/frontend/src/components/sidebar.svelte
index 201296b..e77a0fc 100644
--- a/frontend/src/components/sidebar.svelte
+++ b/frontend/src/components/sidebar.svelte
@@ -7,12 +7,15 @@
 	import projectTags from '../stores/projectTags';
 	import EditIcon from './icons/editIcon.svelte';
 	import { get } from 'svelte/store';
+	import MenuOpener from './icons/menu_opener.svelte';
 
 	export let project: Project;
 
 	let viewEditId: number;
 	let viewEditValue: string;
 
+	let isVisible = false;
+
 	onMount(async () => {
 		await views.init(project.id);
 
@@ -46,7 +49,7 @@
 	}
 </script>
 
-<nav>
+<nav class:hidden={!isVisible}>
 	<div>
 		<div id="branding">
 			<span id="title">Focus.</span>
@@ -119,23 +122,68 @@
 		</div>
 	</div>
 </nav>
+<button class="toggle" class:open={isVisible} on:click={() => (isVisible = !isVisible)}>
+	<MenuOpener />
+</button>
 
 <style lang="less">
 	nav {
-		min-width: 300px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 250px;
 		background-color: #273049;
-		height: 100vh;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
 		font-size: 22px;
+		transition: transform 0.3s ease-in-out;
+	}
+
+	.toggle {
+		visibility: hidden;
+		position: fixed;
+		top: 5px;
+		left: 5px;
+		border-radius: 50%;
+		width: 50px;
+		height: 50px;
+		transform: scale(1);
+		transition-property: left, transform;
+		transition-duration: 0.3s;
+		transition-timing-function: ease-in-out;
+
+		&:hover {
+			cursor: pointer;
+			background-color: #fff2;
+		}
+
+		&:active {
+			background-color: #fff2;
+		}
+
+		&.open {
+			left: 195px;
+			transform: scaleX(-1);
+		}
+	}
+
+	@media (max-width: 800px) {
+		nav.hidden {
+			transform: translateX(-100%);
+		}
+
+		.toggle {
+			visibility: visible;
+		}
 	}
 
 	#branding {
 		display: flex;
 		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
+		align-items: end;
+		gap: 10px;
 		padding: 20px;
 
 		#title {
@@ -143,8 +191,9 @@
 		}
 
 		#version {
-			font-size: 30px;
+			font-size: 25px;
 			color: #aaa;
+			margin-bottom: 3px;
 		}
 	}
 
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index d78d1ab..d28fe54 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -1 +1 @@
-export const backend = 'http://127.0.0.1:3000';
\ No newline at end of file
+export const backend = process.env.BACKEND || 'http://127.0.0.1:3000';