Update UI for mobile view

frontend/app.config.ts

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

frontend/components/Header.vue

@@ -1,18 +1,65 @@
 <script setup lang="ts">
-const openUrl = (url: string) => {
+const userOptionsCard = ref()
-    window.open(url, '_blank')
+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')
 }
+
+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="bg-secondary border-b-lightgray fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 px-4">
+        class="fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 border-b-lightgray bg-secondary px-4">
         <div class="flex gap-4">
             <Icon name="twitter" />
             <div class="font-bold"> Twitter Clone </div>
         </div>
-        <div>
+        <div class="relative">
-            <Icon name="github" @click="openUrl('https://github.com/TZGyn/twitter-clone')" />
+            <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>
     </div>
 </template>

frontend/components/PostCard.vue

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

frontend/components/modal/CreatePost.vue

@@ -26,7 +26,7 @@ const submitPost = async () => {
     closeModal()
 }
 
-onClickOutside(modal, (event) => {
+onClickOutside(modal, () => {
     closeModal()
 })
 
@@ -41,7 +41,7 @@ watch(
 <template>
     <div class="fixed top-0 flex h-screen w-screen justify-center">
         <div ref="modal"
-            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">
+            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">
             <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

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

frontend/pages/index.vue

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

frontend/pages/login/index.vue

@@ -53,7 +53,7 @@ watch(
 </script>
 
 <template>
-    <div class="absolute flex h-screen w-screen items-center justify-center">
+    <div class="absolute flex h-screen w-screen items-center justify-center p-4">
         <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">