add init user profile button placeholders and spacer between the actions and search bar

web/src/components/NavBar.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 
 const showSearch = ref(false);
+const userProfileActions = ref(false);
 </script>
 
 <template>
@@ -34,7 +35,35 @@ const showSearch = ref(false);
           </v-responsive>
         </v-slide-x-reverse-transition>
 
-        <v-btn icon="mdi-account" class="ml-3 mr-2"></v-btn>
+        <v-divider v-show="!showSearch" vertical></v-divider>
+
+        <!------------------>
+        <!-- User Profile -->
+        <!------------------>
+        <v-menu>
+          <template v-slot:activator="{ props }">
+            <v-btn
+              class="ml-3 mr-2"
+              icon="mdi-account"
+              variant="text"
+              v-bind="props"
+            ></v-btn>
+          </template>
+
+          <v-list>
+            <v-list-item
+              v-for="(item, index) in [
+                { title: 'Profile' },
+                { title: 'Settings' },
+                { title: 'Log Out' },
+              ]"
+              :key="index"
+              :value="index"
+            >
+              <v-list-item-title>{{ item.title }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </template>
     </v-app-bar>
   </v-app>