feat(demo): add demo mode notice in sidebar with tooltip information

Author: onmax

src/components/layouts/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="sidebar padding flex-column">
-        <div v-if="isTestnet" class="testnet-notice flex-row">
+        <div v-if="isTestnet" class="environment-notice flex-row">
             <StreetconeIcon/>
             <span class="nq-label">{{ $t('PoS Testnet') }}</span>
             <div class="flex-grow"></div>
@@ -20,6 +20,26 @@
             </Tooltip>
         </div>
 
+        <div v-if="isDemoEnabled" class="environment-notice demo-notice flex-row">
+            <StreetconeIcon/>
+            <span class="nq-label">{{ $t('Demo mode') }}</span>
+            <div class="flex-grow"></div>
+            <Tooltip preferredPosition="bottom left"
+                :container="$parent"
+                theme="inverse"
+                :styles="{ transform: 'translate(0.5rem, 2rem)' }"
+                ref="demoTooltip"
+            >
+                <template #trigger>
+                    <InfoCircleIcon/>
+                </template>
+                <template #default>
+                    <p>{{ $t('Experience the Nimiq Wallet risk-free.' ) }}</p>
+                    <p>{{ $t('Explore and learn how it all works, safely and without real assets.') }}</p>
+                </template>
+            </Tooltip>
+        </div>
+
         <header class="logo" @click="resetState">
             <span class="nq-icon nimiq-logo"></span>
             <span class="logo-wordmark">Nimiq</span>
@@ -193,6 +213,7 @@ import { defineComponent, ref, computed } from '@vue/composition-api';
 import { SwapAsset } from '@nimiq/fastspot-api';
 import { GearIcon, Tooltip, InfoCircleIcon } from '@nimiq/vue-components';
 import { RouteName, useRouter } from '@/router';
+import { checkIfDemoIsActive } from '@/lib/Demo';
 import AnnouncementBox from '../AnnouncementBox.vue';
 import AccountMenu from '../AccountMenu.vue';
 import PriceChart, { TimeRange } from '../PriceChart.vue';
@@ -359,6 +380,8 @@ export default defineComponent({
                 : null;
         });
 
+        const isDemoEnabled = checkIfDemoIsActive();
+
         return {
             CryptoCurrency,
             navigateTo,
@@ -385,6 +408,7 @@ export default defineComponent({
             openSellModal,
             nimSellOptions,
             activeCurrency,
+            isDemoEnabled,
         };
     },
     components: {
@@ -424,7 +448,7 @@ $balance-distribution-display-breakpoint: 450px;
     padding-bottom: max(var(--padding-bottom), env(safe-area-inset-bottom));
 }
 
-.testnet-notice {
+.environment-notice {
     align-items: center;
     width: calc(100% + calc(2 * var(--padding-sides)));
     margin: calc(-1 * var(--padding-top)) calc(-1 * var(--padding-sides)) var(--padding-top);