Frontend: added bottom navbar

frontend/components/BottomNavigationBar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+type Navigation = {
+	path: string
+	icon: string
+}
+
+const options: Navigation[] = [
+	{
+		path: '/',
+		icon: 'home',
+	},
+	{
+		path: '/',
+		icon: 'search',
+	},
+	{
+		path: '/',
+		icon: 'bell',
+	},
+	{
+		path: '/',
+		icon: 'mail',
+	},
+]
+</script>
+
+<template>
+	<div>
+		<div
+			class="fixed bottom-0 flex w-full justify-between gap-6 border border-lightgray bg-primary px-8 py-2">
+			<div
+				v-for="option in options"
+				@click="navigateTo(option.path)">
+				<Icon
+					:name="option.icon"
+					size="32" />
+			</div>
+		</div>
+	</div>
+</template>

frontend/components/Header.vue

@@ -40,6 +40,12 @@ const userOptions: Array<UserOption> = [
 			toggleUserOptions()
 		},
 	},
+	{
+		title: 'Profile',
+		onClick: () => {
+			useRouter().push('/profile')
+		},
+	},
 ]
 </script>
 

frontend/pages/compose/tweet.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const back = () => {
+	navigateTo('/')
+}
+</script>
+
+<template>
+	<div>
+		<div class="flex h-14 w-full items-center justify-between px-4">
+			<Icon
+				name="back"
+				@click="back()" />
+			<!-- <input type="text" /> -->
+			<div></div>
+			<button
+				class="rounded-full bg-accent px-4 py-2 text-sm font-semibold">
+				<div> Tweet </div>
+			</button>
+		</div>
+		<div></div>
+		<BottomNavigationBar />
+	</div>
+</template>

frontend/pages/index.vue

@@ -1,45 +1,95 @@
 <script setup lang="ts">
 definePageMeta({
-    middleware: ['auth'],
+	middleware: ['auth'],
 })
 
 const posts = usePosts()
 const openCreatePostModal = ref<Boolean>(false)
+const pageType = ref<'following' | 'for you'>('for you')
 
 const getPosts = async () => {
-    await fetchPosts()
+	await fetchPosts()
 }
 
 const toggleCreatePostModal = () => {
-    openCreatePostModal.value = !openCreatePostModal.value
+	openCreatePostModal.value = !openCreatePostModal.value
+}
+
+const changePageType = (type: 'following' | 'for you') => {
+	pageType.value = type
 }
 
 const createPost = () => {
-    toggleCreatePostModal()
+	navigateTo('/compose/tweet')
+	// toggleCreatePostModal()
 }
 
 onMounted(() => {
-    getPosts()
+	getPosts()
 })
 </script>
 
 <template>
-    <div>
-        <Header />
-        <div class="mt-16 flex w-full items-center justify-center">
-            <div class="flex w-full max-w-2xl flex-col gap-4 px-4 pb-16 pt-4">
-                <div v-if="posts" v-for="post in posts">
-                    <PostCard :title="post.title" :description="post.description" :created_at="post.created_at"
-                        :user="post.user" />
-                </div>
-                <button @click="getPosts()"> More </button>
-            </div>
-        </div>
-        <button @click="createPost()"
-            class="fixed bottom-6 right-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
-            <Icon name="plus" />
-            Create Post
-        </button>
-        <ModalCreatePost v-if="openCreatePostModal" @close="toggleCreatePostModal()" />
-    </div>
+	<div>
+		<Header />
+		<div class="sticky top-0 flex bg-primary text-center">
+			<div
+				@click="changePageType('for you')"
+				class="flex w-full flex-col items-center hover:bg-white/10">
+				<div>
+					<div
+						class="py-4"
+						:class="{
+							'font-bold': pageType === 'for you',
+						}">
+						For you
+					</div>
+					<div
+						class="w-full border-2 border-sky-500"
+						:class="{
+							invisible: pageType !== 'for you',
+						}">
+					</div>
+				</div>
+			</div>
+			<div
+				@click="changePageType('following')"
+				class="flex w-full flex-col items-center hover:bg-white/10">
+				<div>
+					<div
+						class="py-4"
+						:class="{
+							'font-bold': pageType === 'following',
+						}">
+						Following
+					</div>
+					<div
+						class="w-full border-2 border-sky-500"
+						:class="{
+							invisible: pageType !== 'following',
+						}">
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="mb-16 flex w-full items-center justify-center">
+			<div class="flex w-full max-w-2xl flex-col">
+				<div
+					v-if="posts"
+					v-for="post in posts">
+					<PostCard :post="post" />
+				</div>
+				<button @click="getPosts()">More</button>
+			</div>
+		</div>
+		<button
+			@click="createPost()"
+			class="fixed bottom-16 right-6 flex items-center justify-center gap-2 rounded-full bg-sky-500 p-4">
+			<Icon name="mdi:feather" />
+		</button>
+		<ModalCreatePost
+			v-if="openCreatePostModal"
+			@close="toggleCreatePostModal()" />
+		<BottomNavigationBar />
+	</div>
 </template>

frontend/pages/profile.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+	middleware: ['auth'],
+})
+
+const user = useUser()
+
+const deleteUser = async () => {
+	await userDelete()
+}
+</script>
+
+<template>
+	<div>
+		<button @click="deleteUser()">Delete Account</button>
+	</div>
+</template>