fix: small fixes for mobile (#580)

* fix(theme): show currency-switcher on mobile

* fix(theme): only show login-modal when user isn't logged in

Author: KevinGorjan

packages/theme/components/AppHeader.vue

@@ -30,7 +30,10 @@
         />
       </template>
       <template #aside>
-        <StoreSwitcher class="smartphone-only" />
+        <div class="sf-header__switchers">
+          <CurrencySelector class="smartphone-only" />
+          <StoreSwitcher class="smartphone-only" />
+        </div>
       </template>
       <template
         #header-icons="{activeIcon}"
@@ -197,10 +200,12 @@ import {
   useUiState,
 } from '~/composables';
 import StoreSwitcher from '~/components/StoreSwitcher.vue';
+import CurrencySelector from '~/components/CurrencySelector.vue';
 
 export default defineComponent({
   components: {
     SfHeader,
+    CurrencySelector,
     StoreSwitcher,
     SfIcon,
     SfButton,
@@ -360,6 +365,10 @@ export default defineComponent({
     --header-padding: 0 var(--spacer-sm);
   }
 
+  &__switchers {
+    display: flex;
+  }
+
   &__logo-image {
     height: 100%;
   }

packages/theme/components/BottomNavigation.vue

@@ -78,8 +78,9 @@ export default defineComponent({
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(`${app.localePath('/my-account')}`);
+      } else {
+        toggleLoginModal();
       }
-      toggleLoginModal();
     };
 
     return {

packages/theme/components/StoreSwitcher.vue

@@ -6,7 +6,7 @@
     >
       <SfCharacteristic class="store-switcher">
         <template #title>
-          <span>{{ storeConfig.store_name }}</span>
+          <span class="desktop-only">{{ storeConfig.store_name }}</span>
         </template>
         <template #icon>
           <nuxt-img