feat: Add Right Nav and Move Widets under Content on Mobile

directus · Nov 7, 2024 · b177885 · b177885
1 parent af2ba00
commit b177885
Show file tree

Hide file tree

Showing 3 changed files with 230 additions and 22 deletions.
diff --git a/app/components/aside/AsideSlideover.vue b/app/components/aside/AsideSlideover.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+const isOpen = defineModel<boolean>();
+</script>
+
+<template>
+	<div>
+		<div
+			class="slideover"
+			:style="`transform: translateX(${isOpen ? '0' : '200%'})`"
+		>
+			<button
+				class="slideover-toggle"
+				@click="isOpen = !isOpen"
+			>
+				<Icon name="material-symbols:close" />
+			</button>
+			<div class="nav-scroll">
+				<slot />
+			</div>
+		</div>
+		<div
+			class="background-overlay"
+			:class="{ hidden: !isOpen }"
+			@click="isOpen = false"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.slideover {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	background-color: var(--background);
+	padding-left: 1.5rem;
+	padding-bottom: 1rem;
+	padding-top: 0.5rem;
+	z-index: 1000;
+	min-width: 75vw;
+	transition: transform 0.3s ease;
+}
+
+.nav-scroll {
+	overflow-y: auto;
+	height: 100%;
+	padding-right: 1rem;
+	scrollbar-color: var(--border-subtle) var(--background);
+}
+
+.background-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(5px);
+	z-index: 999;
+}
+
+.hidden {
+	display: none;
+}
+
+.slideover-toggle {
+	background: none;
+	border: none;
+	color: color-mix(in hsl shorter hue, var(--white) 60%, var(--black) 40%);;
+	font-size: 1.5rem;
+	cursor: pointer;
+	height: 40px;
+	width: 40px;
+	position: fixed;
+	top: 0.25rem;
+	right: 0.25rem;
+}
+</style>
diff --git a/app/components/pages/ArticlePage.global.vue b/app/components/pages/ArticlePage.global.vue
@@ -14,6 +14,8 @@ const breadcrumbs = computed(() => {
 	});
 	return breadcrumbs;
 });
+
+const isOpen = ref(false);
 </script>
 
 <template>
@@ -22,29 +24,46 @@ const breadcrumbs = computed(() => {
 			<div class="page">
 				<div class="left-column">
 					<main v-if="data">
-						<div class="breadcrumbs">
-							<NuxtLink
-								v-for="(breadcrumb, index) in breadcrumbs"
-								:key="breadcrumb.to"
-								class="breadcrumb section-title"
-								:to="breadcrumb.to"
+						<div class="page-section-row">
+							<div class="breadcrumbs">
+								<NuxtLink
+									v-for="(breadcrumb, index) in breadcrumbs"
+									:key="breadcrumb.to"
+									class="breadcrumb section-title"
+									:to="breadcrumb.to"
+								>
+									{{ breadcrumb.name }}
+									<Icon
+										v-if="index < breadcrumbs.length - 1"
+										name="material-symbols:chevron-right-rounded"
+										class="breadcrumb-icon"
+									/>
+								</NuxtLink>
+							</div>
+
+							<a
+								v-if="data?.body?.toc && data?.body?.toc?.links?.length > 0"
+								class="slideover-toggle"
+								@click="isOpen = !isOpen"
 							>
-								{{ breadcrumb.name }}
-								<Icon
-									v-if="index < breadcrumbs.length - 1"
-									name="material-symbols:chevron-right-rounded"
-									class="breadcrumb-icon"
-								/>
-							</NuxtLink>
+								<Icon name="material-symbols:menu" />
+								On This Page
+							</a>
 						</div>
-
+						<AsideSlideover v-model="isOpen">
+							<AsideTableOfContents
+								v-if="data?.body?.toc && data?.body?.toc?.links?.length > 0"
+								:toc="data.body.toc"
+							/>
+						</AsideSlideover>
 						<article>
 							<ContentRenderer :value="data">
 								<div class="prose">
 									<h1>
 										{{ data.title }}
 									</h1>
 								</div>
+
 								<div class="tags">
 									<div
 										v-for="tag in data.tags"
@@ -64,6 +83,13 @@ const breadcrumbs = computed(() => {
 								</template>
 							</ContentRenderer>
 						</article>
+						<div class="bottom-aside">
+							<hr>
+							<AsideFeedback />
+							<hr>
+							<AsideNewsletter />
+							<AsideWidget />
+						</div>
 					</main>
 				</div>
 				<aside class="right-aside">
@@ -105,6 +131,41 @@ const breadcrumbs = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+.bottom-aside {
+	margin-top: 24px;
+	display: none;
+	flex-direction: column;
+	gap: 12px;
+}
+
+@media (max-width: 1024px) {
+	.bottom-aside {
+		display: flex;
+	}
+}
+
+.slideover-toggle {
+	display: none;
+	align-items: center;
+	gap: 0.25rem;
+	text-decoration: none;
+	font-size: 0.75rem;
+	color: var(--typography-subdued);
+	cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+	.slideover-toggle{
+		display: flex;
+	}
+}
+
+.page-section-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .tags {
 	display: flex;
 	gap: 0.5rem;
@@ -210,6 +271,13 @@ main {
 		width: 100%;
 	}
 }
+
+@media (max-width: 1024px) {
+	.right-aside {
+		display: none;
+	}
+}
+
 .page-layout {
 	margin-top: 24px;
 	display: grid;

diff --git a/app/components/pages/DocumentationPage.global.vue b/app/components/pages/DocumentationPage.global.vue
@@ -4,6 +4,8 @@ defineProps<{
 	allPages: AllPages;
 	allNavigation: NavItems;
 }>();
+
+const isOpen = ref(false);
 </script>
 
 <template>
@@ -28,15 +30,33 @@ defineProps<{
 				v-if="data"
 				class="main-content"
 			>
+				<AsideSlideover v-model="isOpen">
+					<AsideTableOfContents
+						v-if="data?.body?.toc && data?.body?.toc?.links?.length > 0"
+						:toc="data.body.toc"
+					/>
+				</AsideSlideover>
+
 				<article>
 					<ContentRenderer :value="data">
-						<span
-							v-if="data._dir"
-							v-title
-							class="section-title"
-						>
-							{{ data._dir }}
-						</span>
+						<div class="page-section-row">
+							<span
+								v-if="data._dir"
+								v-title
+								class="section-title"
+							>
+								{{ data._dir }}
+							</span>
+
+							<a
+								v-if="data?.body?.toc && data?.body?.toc?.links?.length > 0"
+								class="slideover-toggle"
+								@click="isOpen = !isOpen"
+							>
+								<Icon name="material-symbols:menu" />
+								On This Page
+							</a>
+						</div>
 						<ContentRendererMarkdown
 							class="prose"
 							:value="data"
@@ -46,6 +66,13 @@ defineProps<{
 						</template>
 					</ContentRenderer>
 				</article>
+				<div class="bottom-aside">
+					<hr>
+					<AsideFeedback />
+					<hr>
+					<AsideNewsletter />
+					<AsideWidget />
+				</div>
 			</main>
 			<aside class="right-aside">
 				<AsideTableOfContents
@@ -63,6 +90,28 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
+.slideover-toggle {
+	display: none;
+	align-items: center;
+	gap: 0.25rem;
+	text-decoration: none;
+	font-size: 0.75rem;
+	color: var(--typography-subdued);
+	cursor: pointer;
+}
+
+@media (max-width: 1024px) {
+	.slideover-toggle{
+		display: flex;
+	}
+}
+
+.page-section-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
 .docs-grid {
 	padding-top: 3rem;
 	padding-bottom: 6rem;
@@ -91,7 +140,7 @@ defineProps<{
 	border-left: 2px solid var(--border);
 	display: flex;
 	flex-direction: column;
-	gap: calc(24px / 2);
+	gap: 12px;
 }
 
 .right-aside > * {
@@ -119,4 +168,17 @@ defineProps<{
 		display: none;
 	}
 }
+
+.bottom-aside {
+	margin-top: 24px;
+	display: none;
+	flex-direction: column;
+	gap: 12px;
+}
+
+@media (max-width: 1024px) {
+	.bottom-aside {
+		display: flex;
+	}
+}
 </style>