Navbar changes

components/AppNavbar.vue

@@ -58,7 +58,7 @@ const handleNavigateMyUpDashboard = () => {
     is-sticky
     is-transparent
     has-menu
-    mobile-breakpoint="lg"
+    mobile-breakpoint="md"
     @on-brand-click="handleNavigateLanding"
   >
     <!-- Desktop Menu -->
@@ -91,15 +91,13 @@ const handleNavigateMyUpDashboard = () => {
       <!-- Connect -->
       <lukso-button
         v-else
-        variant="secondary"
+        variant="landing"
         custom-class="text-12 nav-apax-12-medium-uppercase"
         @click="handleConnect"
         :is-loading="isConnecting ? true : undefined"
         :loading-text="$formatMessage('header_connect')"
       >
-        <span class="text-purple-41">
-          {{ $formatMessage('header_connect') }}
-        </span>
+        {{ $formatMessage('header_connect') }}
       </lukso-button>
 
       <!-- Settings -->
@@ -224,12 +222,30 @@ const handleNavigateMyUpDashboard = () => {
     </div>
 
     <!-- Mobile Icons -->
-    <div slot="mobile-icons" class="flex">
+    <div slot="mobile-icons" class="flex items-center">
       <lukso-icon
         name="search"
         class="cursor-pointer"
         @click="handleMobileSearch"
       ></lukso-icon>
+      <lukso-button
+        v-if="!isConnected"
+        variant="landing"
+        size="small"
+        custom-class="text-12 nav-apax-12-medium-uppercase"
+        @click="handleConnect"
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="$formatMessage('header_connect')"
+        class="ml-4 mr-1"
+      >
+        {{ $formatMessage('header_connect') }}
+      </lukso-button>
+      <AppNavbarAvatar
+        v-if="isConnected"
+        size="x-small"
+        class="ml-4 mr-1 cursor-pointer"
+        @click="handleNavigateProfile"
+      />
     </div>
     <div slot="desktop-center" class="w-full">
       <AppNavbarProfileSearch />

components/AppNavbarAvatar.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ProfileSize } from '@lukso/web-components'
+
+type Props = {
+  size: ProfileSize
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'small',
+})
+const connectedProfile = useProfile().connectedProfile()
+const avatarImage = useProfileAvatar(connectedProfile, 40)
+</script>
+
+<template>
+  <lukso-profile
+    :size="size"
+    :profile-url="avatarImage?.url"
+    :profile-address="connectedProfile?.address"
+    :data-profile-address="connectedProfile?.address"
+    has-identicon
+  ></lukso-profile>
+</template>

components/AppNavbarLanding.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { isTestnet, isConnected, connectedProfileAddress } =
+const { isTestnet, isConnected, connectedProfileAddress, isConnecting } =
   storeToRefs(useAppStore())
 const { disconnect } = useBaseProvider()
 const { showModal } = useModal()
@@ -34,7 +34,6 @@ const handleNavigateMyUpDashboard = () => {
     logo-url="/images/logo-ue.svg"
     is-transparent
     has-menu
-    mobile-breakpoint="lg"
   >
     <!-- Desktop Menu -->
     <div
@@ -278,5 +277,27 @@ const handleNavigateMyUpDashboard = () => {
         </lukso-button>
       </div>
     </div>
+
+    <!-- Mobile Icons -->
+    <div slot="mobile-icons" class="flex items-center">
+      <lukso-button
+        v-if="!isConnected"
+        variant="landing"
+        size="small"
+        custom-class="text-12 nav-apax-12-medium-uppercase"
+        @click="handleConnect"
+        :is-loading="isConnecting ? true : undefined"
+        :loading-text="$formatMessage('header_connect')"
+        class="ml-4 mr-1"
+      >
+        {{ $formatMessage('header_connect') }}
+      </lukso-button>
+      <AppNavbarAvatar
+        v-if="isConnected"
+        size="x-small"
+        class="ml-4 mr-1 cursor-pointer"
+        @click="handleNavigateProfile"
+      />
+    </div>
   </lukso-navbar>
 </template>

components/AppNavbarProfileDropdown.vue

@@ -9,8 +9,6 @@ const handleToggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value
 }
 
-const avatarImage = useProfileAvatar(connectedProfile, 40)
-
 const handleDisconnect = async () => {
   disconnect()
 }
@@ -48,14 +46,7 @@ onUnmounted(() => {
 
 <template>
   <div class="relative cursor-pointer pl-4">
-    <lukso-profile
-      size="small"
-      :profile-url="avatarImage?.url"
-      @click="handleToggleDropdown"
-      :profile-address="connectedProfile?.address"
-      :data-profile-address="connectedProfile?.address"
-      has-identicon
-    ></lukso-profile>
+    <AppNavbarAvatar @click="handleToggleDropdown" />
     <div
       class="absolute right-0 z-[1000] mt-4 animate-fade-in select-none rounded-12 bg-neutral-100 shadow-pink-drop-shadow animation-duration-150 before:absolute before:right-0 before:top-0 before:-mt-1 before:mr-4 before:size-3 before:rotate-45 before:bg-neutral-100"
       :class="isDropdownOpen ? 'block' : 'hidden'"