[feat] add navbar with blog, samgis presentation, samgis docs

static/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageLayout page-title="Inference map page">
+  <PageLayout pageTitle="SamGIS - Inference map page">
     <div>
       <div id="map-container-md">
         <PredictionMap

static/src/components/NavBar/MobileNavBar.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="bg-gray-200 items-center h-8">
+    <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
+    <TabComponent description="My blog" href="https://trinca.tornidor.com/" />
+    <TabComponent description="SamGIS docs" href="https://docs.trinca.tornidor.com/" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import TabComponent from '@/components/NavBar/TabComponent.vue'
+</script>

static/src/components/NavBar/NavBar.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="fixed top-2 right-5 mr-2 items-center">
+    <TabComponent description="About SamGIS" href="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS" />
+    <TabComponent description="My blog" href="https://trinca.tornidor.com/" />
+    <TabComponent description="SamGIS docs" href="https://docs.trinca.tornidor.com/" />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import TabComponent from '@/components/NavBar/TabComponent.vue'
+</script>

static/src/components/NavBar/TabComponent.vue

@@ -0,0 +1,15 @@
+<template>
+  <h2>
+    <a :href="props.href"
+      class="bg-white border-2 no-underline pl-2 pr-2 p-1
+      landscape:border-gray-300 landscape:font-semibold landscape:text-lg"
+    >{{ props.description }}</a>
+  </h2>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  href: string,
+  description: string,
+}>()
+</script>

static/src/components/PageLayout.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="relative min-h-screen lg:flex">
-    <!-- Sidebar -->
+    <!-- Menubar -->
+    <NavBar class="hidden portrait:sd:hidden portrait:md:flex landscape:flex" style="z-index: 9999;"/>
+    <MobileNavBar class="flex portrait:sd:flex portrait:md:hidden landscape:hidden" style="z-index: 9999;"/>
 
-    <main id="content" class="flex-1 z-1 pb-12 ml-[3.3rem] lg:ml-0 mr-4 overflow-y-auto md:pl-1 lg:h-screen">
+    <main id="content" class="flex-1 z-1 lg:ml-0 mr-4 overflow-y-auto md:pl-1 lg:h-screen">
       <header class="hidden items-center justify-between h-10 ml-2 landscape:md:flex portrait:sd:flex portrait:md:h-12 bg-gray-200 border-b">
         <h2 class="hidden sd:text-sm ml-2 md:block md:text-2xl">{{  props.pageTitle }}</h2>
       </header>
@@ -21,6 +23,8 @@
 
 <script setup lang="ts">
 import Footer from "@/components/PageFooter.vue"
+import NavBar from '@/components/NavBar/NavBar.vue'
+import MobileNavBar from '@/components/NavBar/MobileNavBar.vue'
 
 const props = defineProps<{
   pageTitle: string

static/src/components/PagePredictionMap.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="h-auto">
 
-    <div class="grid grid-cols-1 2xl:grid-cols-5 lg:gap-1 lg:border-r">
+    <div class="grid grid-cols-1 2xl:grid-cols-5 lg:gap-1 lg:border-r ml-2 mt-2 md:ml-4 md:mr-4">
 
       <div class="lg:border-r lg:col-span-3">
-        <div id="id-map-cont" class="ml-2 mt-2 md:ml-4 md:mr-4">
+        <div id="id-map-cont" class="">
           <p class="hidden lg:block">{{ description }}</p>
           <div class="w-full md:pt-1 md:pb-1 lg:hidden portrait:xl:hidden">
             <ButtonMapSendRequest