diff --git a/components/ui/Dropdowns/MultiLevel.vue b/components/ui/Dropdowns/MultiLevel.vue
new file mode 100644
index 0000000..124d873
--- /dev/null
+++ b/components/ui/Dropdowns/MultiLevel.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+
diff --git a/components/ui/Dropdowns/MultiLevelWithIcons.vue b/components/ui/Dropdowns/MultiLevelWithIcons.vue
new file mode 100644
index 0000000..23b2693
--- /dev/null
+++ b/components/ui/Dropdowns/MultiLevelWithIcons.vue
@@ -0,0 +1,219 @@
+
+
+
+
+
+
+
diff --git a/components/ui/Dropdowns/UserInfo.vue b/components/ui/Dropdowns/UserInfo.vue
new file mode 100644
index 0000000..3f77be0
--- /dev/null
+++ b/components/ui/Dropdowns/UserInfo.vue
@@ -0,0 +1,141 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/ui/Dropdowns/UserInfoWithIcons.vue b/components/ui/Dropdowns/UserInfoWithIcons.vue
new file mode 100644
index 0000000..63d878a
--- /dev/null
+++ b/components/ui/Dropdowns/UserInfoWithIcons.vue
@@ -0,0 +1,241 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/models/Components.js b/models/Components.js
index ba25125..493251a 100644
--- a/models/Components.js
+++ b/models/Components.js
@@ -55,7 +55,14 @@ export default [
},
{
name: "Dropdowns",
- components: [{ name: "Simple" }, { name: "Notification" }],
+ components: [
+ { name: "Simple" },
+ { name: "MultiLevel" },
+ { name: "MultiLevelWithIcons" },
+ { name: "UserInfo" },
+ { name: "UserInfoWithIcons" },
+ { name: "Notification" },
+ ],
},
{
name: "Navbars",
@@ -95,7 +102,11 @@ export default [
},
{
name: "Pricing",
- components: [{ name: "Simple" }, { name: "Popular" }, { name: "WithNavigation" }],
+ components: [
+ { name: "Simple" },
+ { name: "Popular" },
+ { name: "WithNavigation" },
+ ],
},
{
name: "Pagination",
diff --git a/pages/index.vue b/pages/index.vue
index da3d09c..53eee5d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -134,6 +134,10 @@ import CardsUser from "~/components/ui/Cards/User";
import CardsUserWithDetails from "~/components/ui/Cards/UserWithDetails";
// Dropdowns
import DropdownsSimple from "~/components/ui/Dropdowns/Simple";
+import DropdownsMultiLevel from "~/components/ui/Dropdowns/MultiLevel";
+import DropdownsMultiLevelWithIcons from "~/components/ui/Dropdowns/MultiLevelWithIcons";
+import DropdownsUserInfo from "~/components/ui/Dropdowns/UserInfo";
+import DropdownsUserInfoWithIcons from "~/components/ui/Dropdowns/UserInfoWithIcons";
import DropdownsNotification from "~/components/ui/Dropdowns/Notification";
// Forms
import FormsNewsletter from "~/components/ui/Forms/Newsletter";
@@ -208,6 +212,10 @@ export default {
CardsUser,
CardsUserWithDetails,
DropdownsSimple,
+ DropdownsMultiLevel,
+ DropdownsMultiLevelWithIcons,
+ DropdownsUserInfo,
+ DropdownsUserInfoWithIcons,
DropdownsNotification,
FormsNewsletter,
FormsSimpleNewsletter,
@@ -245,7 +253,7 @@ export default {
data() {
return {
- components_count: 58,
+ components_count: 62,
categories: [],
activeCategory: "Alerts",
component: new Component(),
diff --git a/tailwind.config.js b/tailwind.config.js
index c4ed7e3..c41f1e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,12 +2,12 @@ const colors = require('tailwindcss/colors');
module.exports = {
purge: [
- './components/**/*.{vue,js}',
- './pages/**/*.vue',
- './plugins/**/*.{js,ts}',
- './nuxt.config.{js,ts}',
+ "./components/**/*.{vue,js}",
+ "./pages/**/*.vue",
+ "./plugins/**/*.{js,ts}",
+ "./nuxt.config.{js,ts}",
],
- mode: 'jit',
+ mode: "jit",
darkMode: "class",
theme: {
extend: {
@@ -18,6 +18,7 @@ module.exports = {
roboto: ["Roboto"],
},
spacing: {
+ 104: "26rem",
128: "32rem",
},
},