some fixes and examples

1 files changed, 25 insertions, 18 deletions

diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx
index 5d86836d4..d111ae145 100644
--- a/packages/aml-backoffice-ui/src/Dashboard.tsx
+++ b/packages/aml-backoffice-ui/src/Dashboard.tsx
@@ -1,17 +1,12 @@
-import { Footer, GlobalNotificationsBanner, Header, LangSelector, notifyError, notifyException, useNotifications, useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Dialog, Transition } from "@headlessui/react";
-import { UserIcon, XCircleIcon } from "@heroicons/react/20/solid";
-import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { InformationCircleIcon } from "@heroicons/react/24/solid";
-import { ComponentChildren, Fragment, VNode, h } from "preact";
-import { useEffect, useErrorBoundary, useState } from "preact/hooks";
-import logo from "./assets/logo-2021.svg";
-import { Pages } from "./pages.js";
-import { PageEntry, Router, useCurrentLocation } from "./route.js";
-import { uiSettings } from "./settings.js";
 import { TranslatedString } from "@gnu-taler/taler-util";
+import { Footer, GlobalNotificationsBanner, Header, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
+import { useEffect, useErrorBoundary } from "preact/hooks";
 import { useOfficer } from "./hooks/useOfficer.js";
 import { getAllBooleanSettings, getLabelForSetting, useSettings } from "./hooks/useSettings.js";
+import { Pages } from "./pages.js";
+import { PageEntry, useChangeLocation, useCurrentLocation } from "./route.js";
+import { uiSettings } from "./settings.js";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -101,7 +96,7 @@ function LeftMenu() {
                   "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
                 )}
               >
-                <InformationCircleIcon
+                {/* <InformationCircleIcon
                   class={classNames(
                     Pages.cases.url === currentLocation?.path
                       ? "text-white"
@@ -109,7 +104,11 @@ function LeftMenu() {
                     "h-6 w-6 shrink-0",
                   )}
                   aria-hidden="true"
-                />
+                /> */}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+                </svg>
+
                 Cases
               </a>
             </li>
@@ -123,7 +122,11 @@ function LeftMenu() {
                   "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
                 )}
               >
-                <UserIcon
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+
+                {/* <UserIcon
                   class={classNames(
                     Pages.officer.url === currentLocation?.path
                       ? "text-white"
@@ -131,7 +134,7 @@ function LeftMenu() {
                     "h-6 w-6 shrink-0",
                   )}
                   aria-hidden="true"
-                />
+                /> */}
                 Account
               </a>
             </li>
@@ -233,6 +236,7 @@ function Navigation(): VNode {
     Pages.officer,
     Pages.cases
   ]
+  const location = useChangeLocation();
   return (
     <div class="flex gap-y-5 w-48 bg-indigo-600 divide-y rounded-r-lg divide-cyan-800 overflow-y-auto overflow-x-clip">
 
@@ -241,10 +245,13 @@ function Navigation(): VNode {
           <li>
             <ul role="list" class="-mx-2 space-y-1">
               {pageList.map(p => {
+                
                 return <li>
-                  {/* <!-- Current: "bg-indigo-700 text-white", Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" --> */}
-                  <a href="#" class="bg-indigo-700 text-white group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
-                    <img src={p.icon} />
+                  {/* <!-- Current: "bg-indigo-700 text-white", 
+                         Default: "text-indigo-200 hover:text-white hover:bg-indigo-700" --> */}
+                  <a href={p.url} data-selected={location == p.url} 
+                    class="data-[selected=true]:bg-indigo-700 data-[selected=true]:text-white  text-indigo-200 hover:text-white hover:bg-indigo-700   group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold">
+                    { p.Icon && <p.Icon />}
                     {p.name}
                   </a>
                 </li>