feat(frontend): Install nuxt-ui, eslint, prettier, reformat whole code

legalconsenthub/layouts/default.vue

@@ -1,6 +1,160 @@
 <template>
-    <slot/>
+  <UDashboardGroup>
+    <UDashboardSearch :groups="groups" />
+
+    <UDashboardSidebar
+      collapsible
+      resizable
+      class="bg-(--ui-bg-elevated)/25"
+      :ui="{ footer: 'lg:border-t lg:border-(--ui-border)' }"
+    >
+      <template #header="{ collapsed }">
+        <TeamsMenu :collapsed="collapsed" />
+      </template>
+
+      <template #default="{ collapsed }">
+        <UDashboardSearchButton
+          :collapsed="collapsed"
+          class="bg-transparent ring-(--ui-border)"
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="links[0]"
+          orientation="vertical"
+        />
+
+        <UNavigationMenu
+          :collapsed="collapsed"
+          :items="links[1]"
+          orientation="vertical"
+          class="mt-auto"
+        />
+      </template>
+
+      <template #footer="{ collapsed }">
+        <UserMenu :collapsed="collapsed" />
+      </template>
+    </UDashboardSidebar>
+
+    <slot />
+
+    <!-- <HelpSlideover /> -->
+    <NotificationsSlideover />
+  </UDashboardGroup>
 </template>
 
 <script setup lang="ts">
+const route = useRoute();
+const toast = useToast();
+
+const links = [
+  [
+    {
+      label: "Home",
+      icon: "i-lucide-house",
+      to: "/",
+    },
+    {
+      label: "Inbox",
+      icon: "i-lucide-inbox",
+      to: "/inbox",
+      badge: "4",
+    },
+    {
+      label: "Customers",
+      icon: "i-lucide-users",
+      to: "/customers",
+    },
+    {
+      label: "Settings",
+      to: "/settings",
+      icon: "i-lucide-settings",
+      defaultOpen: true,
+      children: [
+        {
+          label: "General",
+          to: "/settings",
+          exact: true,
+        },
+        {
+          label: "Members",
+          to: "/settings/members",
+        },
+        {
+          label: "Notifications",
+          to: "/settings/notifications",
+        },
+        {
+          label: "Security",
+          to: "/settings/security",
+        },
+      ],
+    },
+  ],
+  [
+    {
+      label: "Feedback",
+      icon: "i-lucide-message-circle",
+      to: "https://github.com/nuxt-ui-pro/dashboard",
+      target: "_blank",
+    },
+    {
+      label: "Help & Support",
+      icon: "i-lucide-info",
+      to: "https://github.com/nuxt/ui-pro",
+      target: "_blank",
+    },
+  ],
+];
+
+const groups = computed(() => [
+  {
+    id: "links",
+    label: "Go to",
+    items: links.flat(),
+  },
+  {
+    id: "code",
+    label: "Code",
+    items: [
+      {
+        id: "source",
+        label: "View page source",
+        icon: "i-simple-icons-github",
+        to: `https://github.com/nuxt-ui-pro/dashboard/blob/v3/app/pages${route.path === "/" ? "/index" : route.path}.vue`,
+        target: "_blank",
+      },
+    ],
+  },
+]);
+
+onMounted(async () => {
+  const cookie = useCookie("cookie-consent");
+  if (cookie.value === "accepted") {
+    return;
+  }
+
+  toast.add({
+    title:
+      "We use first-party cookies to enhance your experience on our website.",
+    duration: 0,
+    close: false,
+    actions: [
+      {
+        label: "Accept",
+        color: "neutral",
+        variant: "outline",
+        onClick: () => {
+          cookie.value = "accepted";
+        },
+      },
+      {
+        label: "Opt out",
+        color: "neutral",
+        variant: "ghost",
+      },
+    ],
+  });
+});
 </script>