add popup menu account

thuongtruong1009 · Feb 17, 2022 · 6d9fc6f · 6d9fc6f · vercel · Feb 17, 2022
1 parent cafaf90
commit 6d9fc6f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 9 deletions.
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -99,17 +99,39 @@
         <q-btn no-caps :ripple="{ color: 'yellow' }" rounded color="blue-7" label="Post new tweet" class="no-shadow" padding="sm lg" to="/" />
     </div>
     <q-list class="absolute-bottom">
-      <q-item class="cursor-pointer flex justify-between items-center q-px-lg" to="/profile">
+      <q-item class="cursor-pointer flex justify-between items-center q-px-lg">
         <q-icon name="account_circle" size="lg" />
         <q-item-section>
           <q-item-label class="text-weight-medium">Thuong Truong</q-item-label>
           <q-item-label caption>@thuongtruong1009</q-item-label>
         </q-item-section>
-
         <q-item-section side top>
           <q-item-label caption><q-btn flat round :color="isMore ? 'primary' : 'grey-5'" icon="more_horiz" @mouseover="hoverMore(true)"
     @mouseout="hoverMore(false)" /></q-item-label>
         </q-item-section>
+
+        <q-menu>
+          <q-list>
+            <q-item class="cursor-pointer flex justify-between items-center q-px-sm" to="/profile">
+              <q-icon name="account_circle" size="lg" />
+              <q-item-section>
+                <q-item-label class="text-weight-medium">Thuong Truong</q-item-label>
+                <q-item-label caption>@thuongtruong1009</q-item-label>
+              </q-item-section>
+              <q-item-section side top>
+                <q-item-label caption><q-btn flat round color="primary" icon="done" @mouseover="hoverMore(true)"
+          @mouseout="hoverMore(false)" /></q-item-label>
+              </q-item-section>
+            </q-item>
+            <q-separator color="grey-2" />
+            <q-item v-close-popup clickable>
+              <q-item-section>Add an existing account</q-item-section>
+            </q-item>
+            <q-item v-close-popup clickable>
+              <q-item-section>Logout @thuongtruong1009</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
       </q-item>
     </q-list>
     </q-drawer>

diff --git a/src/pages/PageHome.vue b/src/pages/PageHome.vue
@@ -32,12 +32,15 @@
             </q-item-section>
 
             <q-item-section>
-              <q-item-label class="text-subtitle1">
-                <strong>Thuong Truong</strong>
-                <span class="text-grey-7 text-caption q-ml-sm">@thuongtruong1009</span>
-              </q-item-label>
-              <q-item-label caption>
-                <span class="text-grey-7">&bull; {{ relativeDate(tweet.date) }}</span>
+              <q-item-label class="text-subtitle1 flex justify-between items-start">
+                <div>
+                  <strong>Thuong Truong</strong>
+                  <span class="text-grey-7 text-caption q-ml-sm">@thuongtruong1009</span>
+                  <q-item-label caption>
+                    <span class="text-grey-7">&bull; {{ relativeDate(tweet.date) }}</span>
+                  </q-item-label>
+                </div>
+                <q-btn flat round color="grey-5" icon="more_horiz"/>
               </q-item-label>
               <q-item-label class="tweet-content text-body1 q-py-sm">{{ tweet.content }}</q-item-label>
               <div class="tweet-icon row justify-between q-mt-sm">
@@ -82,7 +85,7 @@ export default defineComponent({
       // }
       ],
       thumbStyle: {
-        right: '1px',
+        right: '0px',
         borderRadius: '9px',
         backgroundColor: '#1DA1F2',
         width: '5px',