display github buttons in slider and update readme text. (#16)

Author: alifarooq93

README.md

@@ -23,6 +23,12 @@
 
 openkarte is not just a tool for developers or researchers — it’s a public-facing platform that makes open data tangible. By visualizing relationships between different data layers, it helps uncover insights, support local decision-making, and foster transparency.
 
+## 🐛 Issues & 💡 Feature Requests
+
+If you run into a problem or have a question then start a discussion https://github.com/geprog/openkarte/discussions.
+Would you like to suggest a new feature then please create an issue https://github.com/geprog/openkarte/issues.
+Your contributions and feedback are always welcome and helps improve the project!
+
 ## 🔗 Live Demo
 
 Visit the current version at: https://openkarte.de

i18n/locales/de.json

@@ -3,5 +3,8 @@
   "mapDisplayOption": "Karten Display Optionen",
   "selectedDate": "Gewähltes Datum",
   "notAvailable": "Nicht verfügbar",
-  "loadingText": "Laden der Daten, bitte warten..."
+  "loadingText": "Laden der Daten, bitte warten...",
+  "github": "Github",
+  "featureRequest": "Feature-Anfrage",
+  "startDiscussion": "Diskussion beginnen"
 }

i18n/locales/en.json

@@ -3,5 +3,8 @@
   "mapDisplayOption": "Map Display Options",
   "selectedDate": "Selected Date",
   "notAvailable": "Not Available",
-  "loadingText": "Loading data, please wait..."
+  "loadingText": "Loading data, please wait...",
+  "github": "Github",
+  "featureRequest": "Feature request",
+  "startDiscussion": "Start a discussion"
 }

pages/index.vue

@@ -29,18 +29,48 @@
     </header>
 
     <div class="flex flex-1 overflow-hidden">
-      <aside v-show="sidebarOpen" class="bg-blue w-64 border-r p-4 overflow-y-auto transition-all duration-300">
-        <div class="flex justify-between items-center font-semibold text-lg mb-4">
-          <h3>{{ t('mapDisplayOption') }}</h3>
+      <aside v-show="sidebarOpen" class="bg-blue w-64 h-screen flex flex-col border-r transition-all duration-300">
+        <div class="flex-1 p-4 overflow-y-auto">
+          <div class="flex justify-between items-center font-semibold text-lg mb-4">
+            <h3>{{ t('mapDisplayOption') }}</h3>
+          </div>
+          <ul class="space-y-2">
+            <li
+              v-for="opt in featureOptions" :key="opt.name" class="cursor-pointer hover:text-blue-200"
+              :class="{ 'font-bold underline': feature === opt.name }" @click="setFeature(opt.name)"
+            >
+              {{ opt.title }}
+            </li>
+          </ul>
         </div>
-        <ul class="space-y-2">
-          <li
-            v-for="opt in featureOptions" :key="opt.name" class="cursor-pointer hover:text-blue-200"
-            :class="{ 'font-bold underline': feature === opt.name }" @click="setFeature(opt.name)"
+
+        <div class="flex flex-col p-4 mb-10 space-y-1">
+          <a
+            href="https://github.com/geprog/openkarte/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="block w-full text-center bg-blue-300 text-black font-semibold py-2 px-4 rounded-xl shadow hover:bg-blue-500 transition"
+          >
+            {{ t('startDiscussion') }}
+          </a>
+          <a
+            href="https://github.com/geprog/openkarte/issues"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="block w-full text-center bg-blue-300 text-black font-semibold py-2 px-4 rounded-xl shadow hover:bg-blue-500 transition"
           >
-            {{ opt.title }}
-          </li>
-        </ul>
+            {{ t('featureRequest') }}
+          </a>
+          <a
+            href="https://github.com/geprog/openkarte"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="flex items-center justify-center w-full text-center bg-blue-300 text-black font-semibold py-2 px-4 rounded-xl shadow hover:bg-blue-500 transition"
+          >
+            <img src="/github.png" alt="GitHub" class="w-5 mr-1">
+            {{ t('github') }}
+          </a>
+        </div>
       </aside>
 
       <main class="flex-1 relative">