Responsive design

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",

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>

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>

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}>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;

frontend/src/components/project/project.svelte

@@ -67,13 +67,21 @@
 	section {
 		display: flex;
 		flex-direction: column;
-		width: 100%;
+		height: 100vh;
-		margin: 0 40px;
+		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>

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;
+		align-items: end;
-		justify-content: space-between;
+		gap: 10px;
 		padding: 20px;
 
 		#title {
@@ -143,8 +191,9 @@
 		}
 
 		#version {
-			font-size: 30px;
+			font-size: 25px;
 			color: #aaa;
+			margin-bottom: 3px;
 		}
 	}
 

frontend/src/stores/config.ts

@@ -1 +1 @@
-export const backend = 'http://127.0.0.1:3000';
+export const backend = process.env.BACKEND || 'http://127.0.0.1:3000';