navbar btn + ticket fetching

components/layout/navbar.tsx

@@ -1,8 +1,13 @@
-const Navbar = () => {
+import { UserPartial } from "@/utils/db/kv.ts";
+import NavbarDropDown from "@/islands/components/peices/navDropDown.tsx";
+
+const Navbar = ({user}: {user: UserPartial | undefined}) => {
   const loggedIn = true;
 
   return (
-    <div class="flex mt-1 md:mt-2 mb-2 sticky top-0 bg-white h-14 z-30">
+    <div class="flex sticky top-0 bg-white h-14 z-30">
+      {user && 
+      <NavbarDropDown user={user} /> }
       <div
         className={`fixed left-0 right-0 top-0 flex justify-center items-center h-14`}
       >

fresh.gen.ts

@@ -46,6 +46,7 @@ import * as $kv_insights_layout from "./routes/kv-insights/_layout.tsx";
 import * as $kv_insights_middleware from "./routes/kv-insights/_middleware.ts";
 import * as $login from "./routes/login.tsx";
 import * as $components_dropinUI_trash from "./islands/components/dropinUI/trash.tsx";
+import * as $components_peices_navDropDown from "./islands/components/peices/navDropDown.tsx";
 import * as $components_peices_ticket from "./islands/components/peices/ticket.tsx";
 import * as $components_pickers_calender from "./islands/components/pickers/calender.tsx";
 import * as $components_pickers_dropdown from "./islands/components/pickers/dropdown.tsx";
@@ -138,6 +139,8 @@ const manifest = {
   },
   islands: {
     "./islands/components/dropinUI/trash.tsx": $components_dropinUI_trash,
+    "./islands/components/peices/navDropDown.tsx":
+      $components_peices_navDropDown,
     "./islands/components/peices/ticket.tsx": $components_peices_ticket,
     "./islands/components/pickers/calender.tsx": $components_pickers_calender,
     "./islands/components/pickers/dropdown.tsx": $components_pickers_dropdown,

islands/components/peices/navDropDown.tsx

@@ -0,0 +1,40 @@
+import { UserPartial } from "@/utils/db/kv.types.ts";
+import Selector from "$tabler/selector.tsx";
+import Dropdown from "@/islands/components/pickers/dropdown.tsx";
+import CirclePlus from "$tabler/circle-plus.tsx";
+import Settings from "$tabler/settings.tsx";
+import UserCircle from "$tabler/user-circle.tsx"
+
+const NavbarDropDown = ({ user }: { user: UserPartial }) => {
+  return (
+    <Dropdown
+      className="ml-auto mr-1 md:mr-2 z-30 focus:outline-none my-auto"
+      options={[
+        {
+          content: (
+            <div class="flex items-center">
+              <CirclePlus class="w-5 h-5 mr-2" /> <p>New Team</p>
+            </div>
+          ),
+          onClick: () => alert("Teams is coming soon!"),
+        },
+				{
+          content: (
+            <div class="flex items-center">
+              <Settings class="w-5 h-5 mr-2" /> <p>Settings</p>
+            </div>
+          ),
+          onClick: () => alert("Settings is coming soon!"),
+        },
+      ]}
+    >
+      <button class="flex p-1 md:px-3 md:py-1.5 items-center hover:bg-gray-200 transition md:rounded-md rounded-full">
+        <p class="font-medium hidden md:block">{user.email.split("@")[0]}</p>
+        <Selector class="w-5 h-5 ml-2 hidden md:block" />
+				<UserCircle class="w-6 h-6 block md:hidden" />
+      </button>
+    </Dropdown>
+  );
+};
+
+export default NavbarDropDown;

islands/components/pickers/dropdown.tsx

@@ -6,12 +6,14 @@ import { useSignal } from "@preact/signals";
 export default function Dropdown({
   options,
   children,
+  className
 }: {
   options: {
     content: ComponentChild;
     onClick?: () => void;
   }[];
   children: ComponentChild;
+  className?: string
 }) {
   const open = useSignal(false);
   const dropdown = useRef<HTMLDivElement>(null);
@@ -20,7 +22,7 @@ export default function Dropdown({
   });
   return (
     <>
-      <div className="relative flex flex-col items-end" ref={dropdown}>
+      <div className={`${className} relative flex flex-col items-end`} ref={dropdown}>
         <button onClick={() => (open.value = !open.value)}>{children}</button>
         <div
           className={`${
@@ -34,7 +36,7 @@ export default function Dropdown({
                   open.value = false;
                   option.onClick && option.onClick();
                 }}
-                class="min-w-max hover:bg-gray-200 px-2 py-1 font-medium rounded-md w-full text-left"
+                class="min-w-max hover:bg-gray-200 px-2 py-1 font-medium rounded-md w-full text-left focus:outline-none"
               >
                 {option.content}
               </button>

routes/_layout.tsx

@@ -2,11 +2,14 @@ import { defineLayout } from "$fresh/server.ts";
 import Footer from "../components/layout/footer.tsx";
 import Navbar from "../components/layout/navbar.tsx";
 import { Partial } from "$fresh/runtime.ts";
+import { getUser } from "@/utils/db/kv.ts";
+
+export default defineLayout(async (req, { Component }) => {
+  const user = await getUser(req)
 
-export default defineLayout((req, { Component }) => {
   return (
     <div className="min-h-screen flex flex-col">
-      <Navbar /*f-client-nav*/ />
+      <Navbar /*f-client-nav*/ user={user} />
       {/* <Partial name="navbar"> */}
       <div className="flex flex-col grow">
         <Component />

routes/events/[id]/tickets.tsx

@@ -34,8 +34,8 @@ export default defineRoute(
 
     const request = ["ticket", eventID];
     if (showTimeID !== "0") request.push(showTimeID);
-    const tix = kv.list<Ticket>({ prefix: request }, {});
-    // we should probably add pagination
+
+    const tix = kv.list<Ticket>({ prefix: request, });
     const tickets: Deno.KvEntry<Ticket>[] = [];
     for await (const ticket of tix) {
       tickets.push(ticket);

routes/kv-insights/_middleware.ts

@@ -1,11 +1,11 @@
-import { MiddlewareHandlerContext } from "$fresh/src/server/types.ts";
+import { FreshContext } from "$fresh/src/server/types.ts";
 import { getUser } from "@/utils/db/kv.ts";
 
 export const handler = [handleKVInsightsAuthorization];
 
 async function handleKVInsightsAuthorization(
   request: Request,
-  context: MiddlewareHandlerContext,
+  context: FreshContext,
 ) {
   const user = await getUser(request);