add navigation bar

7 files changed, 222 insertions, 0 deletions

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..5cce348
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+        "plugins":["prettier-plugin-svelte"]
+}
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..ae9d7f5
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,3 @@
+body {
+  padding-top: 50px;
+}
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
new file mode 100644
index 0000000..b9b6e14
--- /dev/null
+++ b/src/lib/Modal.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  export let showModal;
+  export let event: NDKEvent;
+  // let str: string = JSON.stringify(event);
+</script>
+
+{#if showModal}
+  <div class="backdrop">
+    <div class="Modal">{event.id}</div>
+  </div>
+{/if}
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..6ffeeb5
--- /dev/null
+++ b/src/lib/components/Navigation.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+</script>
+
+<div class="NavBar">
+  <a href="./about"> About</a>
+  <a href="./create"> New Note</a>
+  <a href="./visualize"> Visualize</a>
+  <a href="./login" class="login"> Login</a>
+</div>
+
+<style>
+  .login {
+    float: right;
+  }
+  .NavBar {
+    overflow: hidden;
+    background-color: #333;
+  }
+
+  .NavBar a {
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+
+  .NavBar a:hover {
+    background-color: #ddd;
+    color: black;
+  }
+
+  .NavBar a.active {
+    background-color: #4caf50;
+    color: white;
+  }
+</style>
diff --git a/src/lib/defaultShareButton.svelte b/src/lib/defaultShareButton.svelte
new file mode 100644
index 0000000..0563afc
--- /dev/null
+++ b/src/lib/defaultShareButton.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { ndk } from "$lib/ndk";
+  import type { NDKEvent } from "@nostr-dev-kit/ndk";
+  import { neventEncode } from "$lib/utils.ts";
+  import { nip19 } from "nostr-tools";
+  import { standardRelays } from "./consts";
+  import Modal from "$lib/Modal.svelte";
+
+  export let event: NDKEvent;
+  // const eventString: string = JSON.stringify(event);
+  // event.toString();
+  let modal = false;
+
+  function copyEventID() {
+    console.log("copyEventID");
+    const relays: string[] = standardRelays;
+    const naddr = neventEncode(event, relays);
+    navigator.clipboard.writeText(naddr);
+  }
+  function viewJSON() {
+    console.log("viewJSON");
+    modal = !modal;
+    console.log(modal);
+  }
+
+  function shareNjump() {
+    const relays: string[] = standardRelays;
+    const naddr = neventEncode(event, relays);
+    console.log(naddr);
+    navigator.clipboard.writeText(`njump.me/${naddr}`);
+  }
+</script>
+
+<div class="dropdown">
+  <button class="dropbtn">
+    <div class="dot" />
+    <div class="dot" />
+    <div class="dot" />
+  </button>
+
+  <div class="dropdown-content">
+    <a on:click={copyEventID}>Copy Event ID</a>
+    <!-- <a on:click={viewJSON}>View JSON</a> -->
+    <a on:click={shareNjump}>Share (njump)</a>
+  </div>
+</div>
+<Modal showModal={modal} {event} />
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-block;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    border-color: green;
+    /* boarder-width: 100px; */
+  }
+  .dropbtn {
+    color: white;
+    grid-column: 2;
+    margin: 50px;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    border: 1px solid red;
+  }
+  .dot {
+    height: 9px;
+    width: 9px;
+    background-color: white;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 5px;
+  }
+
+  /* The container <div> - needed to position the dropdown content */
+
+  /* Dropdown Content (Hidden by Default) */
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+
+  /* Links inside the dropdown */
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+
+  /* Change color of dropdown links on hover */
+  .dropdown-content a:hover {
+    background-color: #cacaca;
+  }
+
+  /* Show the dropdown menu on hover */
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  .dropdown:hover .dropbtn {
+    /* background-color: #3e8e41; */
+  }
+</style>
diff --git a/src/routes/[...eventID]/+page.svelte b/src/routes/[...eventID]/+page.svelte
new file mode 100644
index 0000000..f48186d
--- /dev/null
+++ b/src/routes/[...eventID]/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import {ndk} from '$lib/ndk';
+ import { page } from '$app/stores';
+ import Article from '$lib/Article.svelte';
+ import {idList} from '$lib/stores';
+ import {nip19} from 'nostr-tools';
+ // const id = nip19.decode($page.params.path).data;
+
+
+
+</script>
+<Article />
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..c81f7b4
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1,43 @@
+<div id="content">
+  <div>1</div>
+  <div>2</div>
+  <div>
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the
+    1500s, when an unknown printer took a galley of type and scrambled it to
+    make a type specimen book. It has survived not only five centuries, but also
+    the leap into electronic typesetting, remaining essentially unchanged. It
+    was popularised in the 1960s with the release of Letraset sheets containing
+    Lorem Ipsum passages, and more recently with desktop publishing software
+    like Aldus PageMaker including versions of Lorem Ipsum.
+  </div>
+  <div>4</div>
+  <div>5</div>
+  <div>6</div>
+  <div>7</div>
+  <div>8</div>
+  <div>9</div>
+</div>
+
+<style>
+  #content {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, minmax(150px, auto));
+    /* grid-auto-row: 200px; */
+    gap: 10px;
+    color: green;
+    background-color: black;
+  }
+
+  #content > div {
+    background-color: blue;
+    padding: 10px;
+    font-size: 30px;
+    text-align: center;
+  }
+  #content div:nth-child(even) {
+    background: #777;
+    padding: 30px;
+  }
+</style>