add styles

nostr-components · May 21, 2023 · 9f67a37 · 9f67a37
1 parent e334666
commit 9f67a37
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 15 deletions.
diff --git a/app.js b/app.js
@@ -1,4 +1,4 @@
-import { html, render } from './js/preact.js'
+import { html, render } from './js/standalone.module.js'
 import Navbar from './index.js'
 
 render(html`<${Navbar} />`, document.body)
diff --git a/index.html b/index.html
@@ -2,6 +2,6 @@
 <html>
   <head></head>
   <body>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="./app.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,11 +1,35 @@
 import { html } from './js/standalone.module.js'
 
+const navbarStyle = {
+  overflow: 'hidden',
+  backgroundColor: '#333'
+}
+
+const navbarLinkStyle = {
+  float: 'left',
+  display: 'block',
+  color: '#f2f2f2',
+  textAlign: 'center',
+  padding: '14px 16px',
+  textDecoration: 'none'
+}
+
+const navbarLinkHoverStyle = {
+  backgroundColor: '#ddd',
+  color: 'black'
+}
+
+const dropdownStyle = {
+  float: 'left',
+  overflow: 'hidden'
+}
+
 const Navbar = () => {
   return html`
-    <div class="navbar">
-      <a href="#home">Home</a>
-      <a href="#about">About</a>
-      <a href="#contact">Nostr</a>
+    <div style=${navbarStyle}>
+      <a href="#home" style=${navbarLinkStyle} onMouseOver=${navbarLinkHoverStyle}>Home</a>
+      <a href="#about" style=${navbarLinkStyle} onMouseOver=${navbarLinkHoverStyle}>About</a>
+      <a href="#contact" style=${navbarLinkStyle} onMouseOver=${navbarLinkHoverStyle}>Nostr</a>
     </div>
   `
 }

diff --git a/js/preact.js b/js/preact.js
diff --git a/js/standalone.module.js b/js/standalone.module.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,5 +22,7 @@
     "url": "https://github.com/nostr-components/navbar/issues"
   },
   "homepage": "https://github.com/nostr-components/navbar#readme",
-  "dependencies": {}
+  "dependencies": {
+    "htm": "^3.1.1"
+  }
 }