mongo connected

frontend/app/pages/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import ServerStatus from '~/components/parts/ServerStatus.vue';
 import api from '~/composables/api'
 import { useSeo } from '~/composables/seo'
 
@@ -167,9 +168,16 @@ const sectionTargets = {
 
   <FixedLayout>
     <section class="intro-section">
-      <Container>
-        <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
-      </Container>
+      <div class="intro-layout">
+        <div class="intro-content">
+          <Container>
+            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
+          </Container>
+        </div>
+        <div class="intro-sidebar">
+          <ServerStatus />
+        </div>
+      </div>
     </section>
 
     <section class="projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
@@ -356,6 +364,31 @@ const sectionTargets = {
 <style lang="scss" scoped>
 .intro-section {
 
+  .intro-layout {
+    display: flex;
+    gap: 16px;
+    align-items: stretch;
+
+    @media screen and (max-width: 1200px) {
+      flex-direction: column;
+    }
+  }
+
+  .intro-content {
+    flex: 1;
+    min-width: 0;
+    margin: 0px;
+  }
+
+  .intro-sidebar {
+    width: 220px;
+    flex-shrink: 0;
+
+    @media screen and (max-width: 1200px) {
+      width: 100%;
+    }
+  }
+
   > div:first-child {
     margin-top: 0;
   }
@@ -364,6 +397,10 @@ const sectionTargets = {
     margin-bottom: 0;
   }
 
+  .tui-frame:last-child {
+    margin-bottom: 0;
+  }
+
   @media screen and (min-width: 1200px) {
     margin-top: 290px;
   }