Added mobile navigation.

renderer/container.vue

@@ -3,6 +3,13 @@
 		class="container"
 		@click="blur"
 	>
+		<transition name="slide">
+			<Sidebar
+				v-if="showSidebar"
+				@sidebar="showSidebar = false"
+			/>
+		</transition>
+
 		<Header />
 
 		<div
@@ -11,6 +18,11 @@
 		>
 			<slot @scroll="scroll" />
 		</div>
+
+		<BottomNavigation
+			class="nav"
+			@sidebar="showSidebar = true"
+		/>
 	</div>
 </template>
 
@@ -19,9 +31,12 @@ import { ref, onMounted } from 'vue';
 
 import events from '#/src/events.js';
 
-import Header from '../components/header/header.vue';
+import Header from '#/components/header/header.vue';
+import Sidebar from '#/components/sidebar/sidebar.vue';
+import BottomNavigation from '#/components/footer/navigation.vue';
 
 const content = ref(null);
+const showSidebar = ref(false);
 
 function blur() {
 	events.emit('blur');
@@ -44,6 +59,28 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 }
+
+.slide-enter-active,
+.slide-leave-active {
+	&.sidebar-container {
+		transition: background .15s ease-in-out;
+	}
+
+	.sidebar {
+		transition: transform .15s ease-in-out;
+	}
+}
+
+.slide-enter-from,
+.slide-leave-to {
+	&.sidebar-container {
+		background: transparent;
+	}
+
+	.sidebar {
+		transform: translate(100%, 0);
+	}
+}
 </style>
 
 <style scoped>
@@ -60,4 +97,14 @@ onMounted(() => {
 	flex-grow: 1;
 	overflow-y: auto;
 }
+
+.nav {
+	display: none;
+}
+
+@media(--small-10) {
+	.nav {
+		display: flex;
+	}
+}
 </style>