Edit: Make footer responsive

svIndicium · Aug 4, 2024 · ff01df9 · ff01df9
1 parent c9606e4
commit ff01df9
Showing 1 changed file with 24 additions and 23 deletions.
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -1,33 +1,34 @@
 <template>
-  <v-footer height="40" app>
-    <a
-      v-for="item in items"
-      :key="item.title"
-      :href="item.href"
-      :title="item.title"
-      class="d-inline-block mx-2 social-link"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <v-icon :icon="item.icon" :size="item.icon === '$vuetify' ? 24 : 16" />
-    </a>
-
-    <div
-      class="text-caption text-disabled"
-      style="position: absolute; right: 16px"
-    >
-      &copy; 2017-{{ new Date().getFullYear() }}
-      <span class="d-none d-sm-inline-block">Studievereniging Indicium</span>
-      —
+  <v-footer class="d-flex flex-column px-4" app>
+    <div class="d-flex align-center">
       <a
-        class="text-decoration-none on-surface"
-        href="https://svindicium.nl/commissies"
+        v-for="item in items"
+        :key="item.title"
+        :href="item.href"
+        :title="item.title"
+        class="d-inline-block mx-2 social-link"
         rel="noopener noreferrer"
         target="_blank"
       >
-        Development commissie
+        <v-icon :icon="item.icon" :size="item.icon === '$vuetify' ? 24 : 16" />
       </a>
     </div>
+
+    <div class="d-flex px-4 py-2">
+      <div class="text-caption text-disabled">
+        &copy; 2017-{{ new Date().getFullYear() }}
+        <span class="d-none d-sm-inline-block">Studievereniging Indicium</span>
+        —
+        <a
+          class="text-decoration-none on-surface"
+          href="https://svindicium.nl/commissies"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Development commissie
+        </a>
+      </div>
+    </div>
   </v-footer>
 </template>