added footer

src/components/Footer.vue

@@ -0,0 +1,114 @@
+<template>
+    <footer>
+      <nav>
+        <ul v-for="item in navigation" :key="item.title" :data-label="item.title">
+            <li v-for="link in item.links" :key="link.title">
+                <router-link :to="link.link" exact>{{link.title}}</router-link>
+            </li>
+        </ul>
+      </nav>
+    </footer>
+</template>
+
+<script setup>
+
+const navigation = [
+{
+    title: "Services",
+    links: [
+    {
+        title: "Sensors map",
+        link: "https://sensors.robonomics.network",
+    }
+    ]
+},
+
+{
+    title: "Tokenomics",
+    links: [
+    {
+        title: "About XRT",
+        link: "https://robonomics.network/xrt/",
+    },
+    {
+        title: "Uniswap",
+        link: "https://app.uniswap.org/#/swap?inputCurrency=0x7de91b204c1c737bcee6f000aaa6569cf7061cb7&outputCurrency=0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
+    },
+    {
+        title: "Basilisk",
+        link: "https://app.basilisk.cloud/pools-and-farms",
+    }
+    ]
+},
+
+{
+    title: "Tools",
+    links: [
+    {
+        title: "Substrate Portal",
+        link: "https://polkadot.js.org/apps/?rpc=wss%3A%2F%2Fkusama.rpc.robonomics.network%2F#/explorer",
+    },
+    {
+        title: "Subscan",
+        link: "https://robonomics.subscan.io/",
+    },
+    {
+        title: "Polkassembly",
+        link: "https://robonomics.polkassembly.io/",
+    }
+    ]
+},
+
+{
+    title: "Help",
+    links: [
+    {
+        title: "Wiki",
+        link: "https://wiki.robonomics.network/",
+    },
+    {
+        title: "Academy",
+        link: "https://robonomics.academy/",
+    },
+    {
+        title: "Contacts",
+        link: "https://robonomics.network/contact/",
+    },
+    ]
+}
+];
+</script>
+
+<style scoped>
+    footer {
+        border-top: 1px solid var(--robo-color-text);
+        margin: var(--robo-layout-padding);
+        padding-top: var(--robo-layout-padding);
+    }
+
+    footer nav {
+        display: flex;
+        gap: calc(var(--robo-layout-padding) * 2);
+        justify-content: center;
+    }
+
+    footer nav ul:before {
+        content: attr(data-label);
+        display: block;
+        font-weight: bold;
+        margin-bottom: var(--robo-space);
+    }
+
+    @media screen and (width < 700px) {
+        footer nav {
+            font-size: 90%;
+            gap: var(--robo-layout-padding);
+        }
+    }
+
+    @media screen and (width < 500px) {
+        footer nav {
+            flex-direction: column;
+        }
+    }
+</style>

src/components/layouts/Main.vue

@@ -1,48 +1,49 @@
 <template>
   <robo-layout>
-    <dapp-header :title="pagetitle" />
+    <dapp-header :title="props.pagetitle" />
     <slot />
+    <dapp-footer />
   </robo-layout>
 </template>
 
-<script>
-import DappHeader from "@/components/Header";
+<script setup>
+
+import DappHeader from '@/components/Header';
+import DappFooter from '@/components/Footer';
 import { useSubscription } from "@/hooks/useSubscription";
-import { watch } from "vue";
+import { defineProps, watch } from 'vue'
 import { useStore } from "vuex";
 
-export default {
-  components: {
-    DappHeader
-  },
-  props: ["pagetitle"],
-  setup() {
-    const store = useStore();
-    const subscription = useSubscription();
+const props = defineProps({
+  pagetitle: {
+    type: String
+  }
+});
+
+const store = useStore();
+const subscription = useSubscription();
 
-    watch(
-      () => store.state.robonomicsUIvue.rws.active,
-      (v) => {
-        subscription.owner.value = v;
-      },
-      { immediate: true }
-    );
+ watch(
+  () => store.state.robonomicsUIvue.rws.active,
+  (v) => {
+    subscription.owner.value = v;
+  },
+  { immediate: true }
+);
 
-    watch(
-      [subscription.owner, subscription.validUntil],
-      () => {
-        store.commit("rws/setExpiredate", subscription.validUntil);
-      },
-      { immediate: true }
-    );
+watch(
+  [subscription.owner, subscription.validUntil],
+  () => {
+    store.commit("rws/setExpiredate", subscription.validUntil);
+  },
+  { immediate: true }
+);
 
-    watch(
-      subscription.devices,
-      (devices) => {
-        store.commit("rws/setUsers", devices);
-      },
-      { immediate: true }
-    );
-  }
-};
+watch(
+  subscription.devices,
+  (devices) => {
+    store.commit("rws/setUsers", devices);
+  },
+  { immediate: true }
+);
 </script>

src/views/Home.vue

@@ -100,20 +100,6 @@
       </robo-section>
     </robo-grid>
   </robo-layout-section>
-
-  <robo-layout-section>
-    <robo-grid id="home-links" offset="x0" :columns="3" gap="x05">
-      <robo-link href="https://www.youtube.com/watch?v=onMv_An8h2Q">
-        <span>What is Robonomics</span>
-      </robo-link>
-      <robo-link href="https://wiki.robonomics.network">
-        <span>Step-by-step tutorials</span>
-      </robo-link>
-      <robo-link href="https://robonomics.academy">
-        <span>Advanced cources</span>
-      </robo-link>
-    </robo-grid>
-  </robo-layout-section>
 </template>
 
 <script>