frontend/app.config.ts

@@ -8,7 +8,6 @@ export default defineAppConfig({
             twitter: 'logos:twitter',
             github: 'mdi:github',
             plus: 'mdi:plus',
-            user: 'mdi:account-circle',
         },
     },
 })

frontend/components/Header.vue

@@ -1,65 +1,18 @@
 <script setup lang="ts">
-const userOptionsCard = ref()
-const userIcon = ref()
-const showUserOptions = ref<Boolean>(false)
-
-const toggleUserOptions = () => {
-    showUserOptions.value = !showUserOptions.value
-}
-
-onClickOutside(
-    userOptionsCard,
-    () => {
-        toggleUserOptions()
-    },
-    { ignore: [userIcon] }
-)
-
-const logout = async () => {
-    await userLogout()
-    useRouter().push('/login')
+const openUrl = (url: string) => {
+    window.open(url, '_blank')
 }
-
-type UserOption = {
-    title: string
-    function: () => void
-}
-
-const userOptions: Array<UserOption> = [
-    {
-        title: 'Github',
-        function: () => {
-            openUrl('https://github.com/TZGyn')
-            toggleUserOptions()
-        },
-    },
-    {
-        title: 'Log Out',
-        function: async () => {
-            await logout()
-            toggleUserOptions()
-        },
-    },
-]
 </script>
 
 <template>
     <div
-        class="fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 border-b-lightgray bg-secondary px-4">
+        class="bg-secondary border-b-lightgray fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 px-4">
         <div class="flex gap-4">
             <Icon name="twitter" />
             <div class="font-bold"> Twitter Clone </div>
         </div>
-        <div class="relative">
-            <Icon name="user" size="28" ref="userIcon" @click="toggleUserOptions()" />
-            <div v-if="showUserOptions" ref="userOptionsCard"
-                class="absolute right-0 top-8 w-max border border-lightgray bg-secondary">
-                <div v-for="userOption in userOptions"
-                    class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
-                    @click="userOption.function()">
-                    {{ userOption.title }}
-                </div>
-            </div>
+        <div>
+            <Icon name="github" @click="openUrl('https://github.com/TZGyn/twitter-clone')" />
         </div>
     </div>
 </template>

frontend/components/PostCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 type Post = {
     title: String
-    description: String
+    description: String | null | undefined
 }
 
 const props = defineProps<Post>()

frontend/components/modal/CreatePost.vue

@@ -26,7 +26,7 @@ const submitPost = async () => {
     closeModal()
 }
 
-onClickOutside(modal, () => {
+onClickOutside(modal, (event) => {
     closeModal()
 })
 
@@ -41,7 +41,7 @@ watch(
 <template>
     <div class="fixed top-0 flex h-screen w-screen justify-center">
         <div ref="modal"
-            class="relative mx-4 mt-20 flex h-96 w-full max-w-3xl flex-col items-center border border-lightgray bg-secondary p-4">
+            class="relative mt-20 flex h-fit max-h-[1000px] min-h-[500px] w-2/3 flex-col items-center border border-lightgray bg-secondary p-4">
             <label class="mt-2 w-full"> Title </label>
             <input type="text" v-model="newPost.title" class="mt-2 w-full rounded-md" />
 

frontend/composables/utils.ts

@@ -1,5 +0,0 @@
-const openUrl = (url: string) => {
-    window.open(url, '_blank')
-}
-
-export { openUrl }

frontend/pages/index.vue

@@ -3,6 +3,8 @@ definePageMeta({
     middleware: ['auth'],
 })
 
+import { z } from 'zod'
+
 const posts = usePosts()
 const openCreatePostModal = ref<Boolean>(false)
 
@@ -10,6 +12,11 @@ const getPosts = async () => {
     await fetchPosts()
 }
 
+const logout = async () => {
+    await userLogout()
+    useRouter().push('/login')
+}
+
 const toggleCreatePostModal = () => {
     openCreatePostModal.value = !openCreatePostModal.value
 }
@@ -27,7 +34,8 @@ onMounted(() => {
     <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-10 pt-4">
+            <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-4 2xl:w-1/3">
+                <button @click="getUserPosts()"> User Posts </button>
                 <div v-if="posts" v-for="post in posts">
                     <PostCard :title="post.title" :description="post.description" />
                 </div>
@@ -35,7 +43,7 @@ onMounted(() => {
             </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">
+            class="fixed bottom-12 right-12 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
             <Icon name="plus" />
             Create Post
         </button>

frontend/pages/login/index.vue

@@ -53,7 +53,7 @@ watch(
 </script>
 
 <template>
-    <div class="absolute flex h-screen w-screen items-center justify-center p-4">
+    <div class="absolute flex h-screen w-screen items-center justify-center">
         <div
             class="flex w-96 flex-col items-center justify-center gap-2 rounded-xl border border-lightgray bg-secondary p-6">
             <label v-if="isSignUp" class="mt-2 w-full">