Change structure

components/SecondLevelMenu.vue

@@ -0,0 +1,46 @@
+<template>
+  <nav class="w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l
+  flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2">
+    <span class="font-semibold px-4">
+      <slot name="title"/>
+    </span>
+    <div class="flex flex-col gap-2 justify-between flex-1">
+      <div class="flex flex-col gap-2">
+        <slot/>
+      </div>
+      <div>
+        <SecondLevelLink class="bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600"
+          icon="fa-plus">
+          Create Resource
+        </SecondLevelLink>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import SecondLevelLink from "./SecondLevelLink.vue";
+
+export default {
+  name: "SecondLevelMenu",
+  components: {SecondLevelLink},
+  props: {
+    items: {
+      type: Array,
+      default: [
+        {name: 'Test', href: 'Test'}
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.nuxt-link-active {
+  background: #f3f3f3;
+}
+
+.dark .nuxt-link-active {
+  background: #464649;
+}
+</style>