Fix CSS import

Author: holtwick

README.md

@@ -64,6 +64,14 @@ If placed somewhere in the project will show tooltips for elements having a `too
 
 See also: `tw-popover`
 
+### tw-debug
+
+Debug output of Vue reactive objects. Requires CSS import:
+
+```js
+import "twindy-headless/index.css"
+```
+
 ---
 
 ### useActive(props)

package.json

@@ -13,6 +13,12 @@
     ".": {
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
+    },
+    "./index.css": {
+      "default": "./dist/style.css"
+    },
+    "./style.css": {
+      "default": "./dist/style.css"
     }
   },
   "dependencies": {
@@ -45,4 +51,4 @@
     "format": "prettier --write .",
     "prepublishOnly": "npm run build"
   }
-}
+}

src/menu.ts

@@ -1,14 +1,16 @@
-import { Ref } from "vue"
-// import twMenu from "./tw-menu.vue"
+import { createApp, Ref } from "vue"
+import twMenu from "./tw-menu.vue"
 import { TwindyMenuItem } from "./types"
 
-// let container = document.createElement("div")
-// document.body.appendChild(container)
-// createApp(twMenu).mount(container)
+let container: HTMLElement | undefined
 
 export function useMenu(items: TwindyMenuItem[], ref?: Ref) {
-  items
-  ref
+  if (container == null) {
+    let container = document.createElement("div")
+    document.body.appendChild(container)
+    createApp(twMenu).mount(container)
+  }
+
   return {
     toggleMenu() {
       // console.log("toggle menu")