From 0eb91b9ad8b464c289fe007d8ed8fda072572ead Mon Sep 17 00:00:00 2001
From: Bryce <bryce@integreatconsult.com>
Date: Wed, 31 May 2023 16:58:29 -0700
Subject: [PATCH] Makes company pages work great

---
 docker-compose.dev.yml                        |  54 ++--
 docker-compose.yml                            | 117 ++++----
 resources/input.css                           |   2 +-
 resources/public/output.css                   | 261 ++++++++----------
 src/clj/auto_ap/ssr/company.clj               |   1 +
 src/clj/auto_ap/ssr/company_dropdown.clj      |  31 ++-
 src/clj/auto_ap/ssr/components/aside.clj      |  80 ++++--
 src/clj/auto_ap/ssr/components/navbar.clj     |  94 +------
 .../ssr/components/navbar_dropdown.clj        |  14 -
 src/clj/auto_ap/ssr/components/page.clj       |  20 +-
 .../auto_ap/ssr/components/user_dropdown.clj  |  61 ++++
 src/clj/auto_ap/ssr/grid_page_helper.clj      |  18 +-
 src/clj/auto_ap/ssr/login_dropdown.clj        |  26 --
 src/clj/auto_ap/ssr/svg.clj                   |   5 +
 src/clj/auto_ap/ssr/ui.clj                    |  17 +-
 15 files changed, 389 insertions(+), 412 deletions(-)
 delete mode 100644 src/clj/auto_ap/ssr/components/navbar_dropdown.clj
 create mode 100644 src/clj/auto_ap/ssr/components/user_dropdown.clj
 delete mode 100644 src/clj/auto_ap/ssr/login_dropdown.clj

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 0c8a7d74..ec03fb4d 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -1,31 +1,31 @@
-version: '3'
+version: '3.8'
 services:
-  nginx-proxy:
-    restart: "always"
-    ports:
-      - "80:80"
-      - "443:443"
-    labels:
-      - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy=true
-    volumes:
-      # - ./data/var/run/docker.sock:/tmp/docker.sock:ro
-      - ./data/opt/integreat/dev/usr/share/nginx/html:/usr/share/nginx/html
-  database:
-    restart: "always"
-    ports:
-       - "5432:5432"
-  datomic-transactor:
-    restart: "always"
-    environment:
-      - DATOMIC_PORT=4334
-      - XMS=-Xms3g
-      - XMX=-Xmx6g
-    ulimits:
-      nofile:
-        soft: 65536
-        hard: 65536
-    ports:
-      - 4334:4334
+#  nginx-proxy:
+#    restart: "always"
+#    ports:
+#      - "80:80"
+#      - "443:443"
+#    labels:
+#      - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy=true
+#    volumes:
+#      # - ./data/var/run/docker.sock:/tmp/docker.sock:ro
+#      - ./data/opt/integreat/dev/usr/share/nginx/html:/usr/share/nginx/html
+#  database:
+#    restart: "always"
+#    ports:
+#       - "5432:5432"
+#  datomic-transactor:
+#    restart: "always"
+#    environment:
+#      - DATOMIC_PORT=4334
+#      - XMS=-Xms3g
+#      - XMX=-Xmx6g
+#    ulimits:
+#      nofile:
+#        soft: 65536
+#        hard: 65536
+#    ports:
+#      - 4334:4334
   solr:
     volumes:
       - ./data/solr:/var/solr
diff --git a/docker-compose.yml b/docker-compose.yml
index 4bac2800..d8413888 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,55 +1,70 @@
-version: '3'
+version: '3.8'
 services:
-  nginx-proxy:
-    image: jwilder/nginx-proxy:alpine
-    labels:
-      - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy=true
-    volumes:
-      - /var/run/docker.sock:/tmp/docker.sock:ro
-      - ./data/certs/:/etc/nginx/certs:ro
-      - ./data/etc/nginx/vhost.d:/etc/nginx/vhost.d
-      - ./data/usr/share/nginx/html:/usr/share/nginx/html
-      - ./data/etc/nginx/conf.d:/etc/nginx/conf.d
-  letsencrypt:
-    image: jrcs/letsencrypt-nginx-proxy-companion:stable
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock:ro
-      - ./data/certs/:/etc/nginx/certs
-      - ./data/etc/nginx/vhost.d:/etc/nginx/vhost.d
-      - ./data/usr/share/nginx/html:/usr/share/nginx/html
-  app:
-    build: .
-    expose:
-      - 3000
-    depends_on:
-    - database
-    - datomic-transactor
-    environment:
-      config: /usr/local/config/local.edn
-      VIRTUAL_HOST: local.app.integreatconsult.com
-      VIRTUAL_PORT: 3000
-  database:
-    image: postgres:9-alpine
-    environment:
-      POSTGRES_USER: ap
-      POSTGRES_PASSWORD: fifteen-invoices-imported!
-      POSTGRES_DB: autoap
-    volumes:
-      - ./data/var/lib/postgresql/data:/var/lib/postgresql/data
+  # nginx-proxy:
+    # image: jwilder/nginx-proxy:alpine
+    # labels:
+      # - com.github.jrcs.letsencrypt_nginx_proxy_companion.nginx_proxy=true
+    # volumes:
+      # - /var/run/docker.sock:/tmp/docker.sock:ro
+      # - ./data/certs/:/etc/nginx/certs:ro
+      # - ./data/etc/nginx/vhost.d:/etc/nginx/vhost.d
+      # - ./data/usr/share/nginx/html:/usr/share/nginx/html
+      # - ./data/etc/nginx/conf.d:/etc/nginx/conf.d
+  # letsencrypt:
+    # image: jrcs/letsencrypt-nginx-proxy-companion:stable
+    # volumes:
+      # - /var/run/docker.sock:/var/run/docker.sock:ro
+      # - ./data/certs/:/etc/nginx/certs
+      # - ./data/etc/nginx/vhost.d:/etc/nginx/vhost.d
+      # - ./data/usr/share/nginx/html:/usr/share/nginx/html
+  # app:
+    # build: .
+    # expose:
+      # - 3000
+    # depends_on:
+    # - database
+    # - datomic-transactor
+    # environment:
+      # config: /usr/local/config/local.edn
+      # VIRTUAL_HOST: local.app.integreatconsult.com
+      # VIRTUAL_PORT: 3000
+  # database:
+    # image: postgres:9-alpine
+    # environment:
+      # POSTGRES_USER: ap
+      # POSTGRES_PASSWORD: fifteen-invoices-imported!
+      # POSTGRES_DB: autoap
+    # volumes:
+      # - ./data/var/lib/postgresql/data:/var/lib/postgresql/data
   solr:
     image: solr
+    user: solr
+    # network_mode: bridge
     ports:
-      - "8983:8983"
-  datomic-transactor:
-    depends_on:
-    - database
-    image: 679918342773.dkr.ecr.us-east-1.amazonaws.com/datomic:latest
-    environment:
-      - DATOMIC_HOST=datomic-transactor
-      - DATOMIC_PORT=4334
-      - DATOMIC_SQL_HOST=database
-    ports:
-      - 4334:4334
-    restart: on-failure
-
-
+      - 8983:8983
+    ulimits:
+      nofile:
+        soft: "65536"
+        hard: "65536"
+  # datomic-transactor:
+    # depends_on:
+    # - database
+    # image: 679918342773.dkr.ecr.us-east-1.amazonaws.com/datomic:latest
+    # environment:
+      # - DATOMIC_HOST=datomic-transactor
+      # - DATOMIC_PORT=4334
+      # - DATOMIC_SQL_HOST=database
+    # ports:
+      # - 4334:4334
+    # restart: on-failure
+networks:
+  default:
+    driver: bridge
+    attachable: false
+    driver_opts: 
+      com.docker.network.bridge.default_bridge: "true"
+      com.docker.network.bridge.enable_icc: "true"
+      com.docker.network.bridge.enable_ip_masquerade: "true"
+      com.docker.network.bridge.host_binding_ipv4: "0.0.0.0"
+      com.docker.network.bridge.name: "docker0"
+      com.docker.network.driver.mtu: "1500"
diff --git a/resources/input.css b/resources/input.css
index 3ed74314..8653d69d 100644
--- a/resources/input.css
+++ b/resources/input.css
@@ -51,7 +51,7 @@
 }
 
 
-.htmx-request .htmx-indicator {
+.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
     display: inherit !important;
 }
 .htmx-indicator {
diff --git a/resources/public/output.css b/resources/public/output.css
index 0db99f1e..353310dd 100644
--- a/resources/public/output.css
+++ b/resources/public/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -31,6 +31,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -47,6 +48,8 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -875,6 +878,9 @@ input:checked + .toggle-bg {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -922,6 +928,9 @@ input:checked + .toggle-bg {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -1038,10 +1047,7 @@ input:checked + .toggle-bg {
 }
 
 .inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
 }
 
 .inset-y-0 {
@@ -1049,6 +1055,14 @@ input:checked + .toggle-bg {
   bottom: 0px;
 }
 
+.-right-2 {
+  right: -0.5rem;
+}
+
+.-top-2 {
+  top: -0.5rem;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -1065,26 +1079,22 @@ input:checked + .toggle-bg {
   right: 0px;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.top-5 {
-  top: 1.25rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
 .right-2 {
   right: 0.5rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-2 {
   top: 0.5rem;
 }
 
+.top-5 {
+  top: 1.25rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1121,14 +1131,6 @@ input:checked + .toggle-bg {
   grid-column: span 6 / span 6;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
-.m-8 {
-  margin: 2rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -1148,9 +1150,9 @@ input:checked + .toggle-bg {
   margin-right: auto;
 }
 
-.my-20 {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 
 .my-4 {
@@ -1158,11 +1160,6 @@ input:checked + .toggle-bg {
   margin-bottom: 1rem;
 }
 
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
 .-mb-1 {
   margin-bottom: -0.25rem;
 }
@@ -1195,6 +1192,10 @@ input:checked + .toggle-bg {
   margin-left: 0.75rem;
 }
 
+.mr-10 {
+  margin-right: 2.5rem;
+}
+
 .mr-16 {
   margin-right: 4rem;
 }
@@ -1227,10 +1228,6 @@ input:checked + .toggle-bg {
   margin-top: 1.25rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
-}
-
 .block {
   display: block;
 }
@@ -1295,10 +1292,6 @@ input:checked + .toggle-bg {
   height: 1.5rem;
 }
 
-.h-7 {
-  height: 1.75rem;
-}
-
 .h-8 {
   height: 2rem;
 }
@@ -1319,10 +1312,6 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
-.h-16 {
-  height: 4rem;
-}
-
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1359,10 +1348,6 @@ input:checked + .toggle-bg {
   width: 16rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -1371,10 +1356,6 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1387,10 +1368,6 @@ input:checked + .toggle-bg {
   max-width: 1024px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1712,6 +1689,11 @@ input:checked + .toggle-bg {
   border-color: rgb(255 104 104 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 235 251 / var(--tw-bg-opacity));
@@ -1737,6 +1719,11 @@ input:checked + .toggle-bg {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1786,11 +1773,6 @@ input:checked + .toggle-bg {
   background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(201 225 171 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1903,10 +1885,6 @@ input:checked + .toggle-bg {
   padding-left: 0.75rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -2055,6 +2033,11 @@ input:checked + .toggle-bg {
   color: rgb(97 145 37 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(204 2 2 / var(--tw-text-opacity));
+}
+
 .text-red-800 {
   --tw-text-opacity: 1;
   color: rgb(102 1 1 / var(--tw-text-opacity));
@@ -2070,11 +2053,6 @@ input:checked + .toggle-bg {
   color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(204 2 2 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -2236,14 +2214,14 @@ input:checked + .toggle-bg {
     background-color: rgb(175 211 130 / var(--tw-bg-opacity));
   }
 
-  .dark 100% {
+  :is(.dark 100%) {
     --tw-bg-opacity: 1;
     background-color: rgb(153 2 2 / var(--tw-bg-opacity));
   }
 }
 
 @keyframes pulse-dark-green {
-  .dark 0% {
+  :is(.dark 0%) {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
   }
@@ -2254,7 +2232,7 @@ input:checked + .toggle-bg {
   }
 }
 
-.htmx-request .htmx-indicator {
+.htmx-request .htmx-indicator, .htmx-request.htmx-indicator {
   display: inherit !important;
 }
 
@@ -2288,6 +2266,12 @@ input:checked + .toggle-bg {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-gray-300:hover {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -2445,266 +2429,266 @@ input:checked + .toggle-bg {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
-.dark .dark\:block {
+:is(.dark .dark\:block) {
   display: block;
 }
 
-.dark .dark\:hidden {
+:is(.dark .dark\:hidden) {
   display: none;
 }
 
-.dark .dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
+:is(.dark .dark\:divide-gray-600) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
 }
 
-.dark .dark\:border-blue-500 {
+:is(.dark .dark\:border-blue-500) {
   --tw-border-opacity: 1;
   border-color: rgb(0 156 234 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-500 {
+:is(.dark .dark\:border-gray-500) {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-600 {
+:is(.dark .dark\:border-gray-600) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-700 {
+:is(.dark .dark\:border-gray-700) {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-gray-900 {
+:is(.dark .dark\:border-gray-900) {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 
-.dark .dark\:border-transparent {
+:is(.dark .dark\:border-transparent) {
   border-color: transparent;
 }
 
-.dark .dark\:bg-blue-600 {
+:is(.dark .dark\:bg-blue-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 125 187 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-blue-900 {
+:is(.dark .dark\:bg-blue-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 31 47 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-600 {
+:is(.dark .dark\:bg-gray-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-700 {
+:is(.dark .dark\:bg-gray-700) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-800 {
+:is(.dark .dark\:bg-gray-800) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-gray-800\/50 {
+:is(.dark .dark\:bg-gray-800\/50) {
   background-color: rgb(31 41 55 / 0.5);
 }
 
-.dark .dark\:bg-gray-900 {
+:is(.dark .dark\:bg-gray-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-green-600 {
+:is(.dark .dark\:bg-green-600) {
   --tw-bg-opacity: 1;
   background-color: rgb(97 145 37 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-green-900 {
+:is(.dark .dark\:bg-green-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(24 36 9 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-yellow-900 {
+:is(.dark .dark\:bg-yellow-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(99 49 18 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:bg-opacity-80 {
+:is(.dark .dark\:bg-opacity-80) {
   --tw-bg-opacity: 0.8;
 }
 
-.dark .dark\:text-blue-300 {
+:is(.dark .dark\:text-blue-300) {
   --tw-text-opacity: 1;
   color: rgb(102 196 242 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-blue-500 {
+:is(.dark .dark\:text-blue-500) {
   --tw-text-opacity: 1;
   color: rgb(0 156 234 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-100 {
+:is(.dark .dark\:text-gray-100) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-200 {
+:is(.dark .dark\:text-gray-200) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-300 {
+:is(.dark .dark\:text-gray-300) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-400 {
+:is(.dark .dark\:text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-gray-50 {
+:is(.dark .dark\:text-gray-50) {
   --tw-text-opacity: 1;
   color: rgb(249 250 251 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-green-300 {
+:is(.dark .dark\:text-gray-500) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-green-300) {
   --tw-text-opacity: 1;
   color: rgb(175 211 130 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-red-400 {
+:is(.dark .dark\:text-red-400) {
   --tw-text-opacity: 1;
   color: rgb(255 53 53 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-white {
+:is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:text-yellow-300 {
+:is(.dark .dark\:text-yellow-300) {
   --tw-text-opacity: 1;
   color: rgb(250 202 21 / var(--tw-text-opacity));
 }
 
-.dark .dark\:placeholder-gray-400::-moz-placeholder {
+:is(.dark .dark\:placeholder-gray-400)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
 
-.dark .dark\:placeholder-gray-400::placeholder {
+:is(.dark .dark\:placeholder-gray-400)::placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
 }
 
-.dark .dark\:ring-offset-gray-800 {
+:is(.dark .dark\:ring-offset-gray-800) {
   --tw-ring-offset-color: #1F2937;
 }
 
-.dark .dark\:hover\:bg-blue-700:hover {
+:is(.dark .dark\:hover\:bg-blue-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 94 140 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-gray-600:hover {
+:is(.dark .dark\:hover\:bg-gray-600:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-gray-700:hover {
+:is(.dark .dark\:hover\:bg-gray-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-gray-800:hover {
+:is(.dark .dark\:hover\:bg-gray-800:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-green-600:hover {
+:is(.dark .dark\:hover\:bg-green-600:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(97 145 37 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-green-700:hover {
+:is(.dark .dark\:hover\:bg-green-700:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(73 109 28 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:text-blue-500:hover {
+:is(.dark .dark\:hover\:text-blue-500:hover) {
   --tw-text-opacity: 1;
   color: rgb(0 156 234 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-gray-100:hover {
+:is(.dark .dark\:hover\:text-gray-100:hover) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-gray-300:hover {
+:is(.dark .dark\:hover\:text-gray-300:hover) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
-.dark .dark\:hover\:text-white:hover {
+:is(.dark .dark\:hover\:text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.dark .dark\:focus\:border-blue-500:focus {
+:is(.dark .dark\:focus\:border-blue-500:focus) {
   --tw-border-opacity: 1;
   border-color: rgb(0 156 234 / var(--tw-border-opacity));
 }
 
-.dark .dark\:focus\:border-primary-500:focus {
+:is(.dark .dark\:focus\:border-primary-500:focus) {
   --tw-border-opacity: 1;
   border-color: rgb(121 181 46 / var(--tw-border-opacity));
 }
 
-.dark .dark\:focus\:ring-blue-500:focus {
+:is(.dark .dark\:focus\:ring-blue-500:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-blue-800:focus {
+:is(.dark .dark\:focus\:ring-blue-800:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(0 62 94 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-gray-600:focus {
+:is(.dark .dark\:focus\:ring-gray-600:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-gray-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
-.dark .dark\:focus\:ring-green-800:focus {
+:is(.dark .dark\:focus\:ring-green-800:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(48 72 18 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-primary-500:focus {
+:is(.dark .dark\:focus\:ring-primary-500:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(121 181 46 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-primary-600:focus {
+:is(.dark .dark\:focus\:ring-primary-600:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(97 145 37 / var(--tw-ring-opacity));
 }
 
-.dark .group:hover .dark\:group-hover\:text-white {
+:is(.dark .group:hover .dark\:group-hover\:text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
@@ -2735,10 +2719,7 @@ input:checked + .toggle-bg {
 
 @media (min-width: 768px) {
   .md\:inset-0 {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+    inset: 0px;
   }
 
   .md\:ml-2 {
@@ -2749,10 +2730,6 @@ input:checked + .toggle-bg {
     margin-right: 6rem;
   }
 
-  .md\:table-cell {
-    display: table-cell;
-  }
-
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2783,10 +2760,6 @@ input:checked + .toggle-bg {
     display: flex;
   }
 
-  .lg\:table-cell {
-    display: table-cell;
-  }
-
   .lg\:hidden {
     display: none;
   }
diff --git a/src/clj/auto_ap/ssr/company.clj b/src/clj/auto_ap/ssr/company.clj
index 1b9dd19d..1d20c4d9 100644
--- a/src/clj/auto_ap/ssr/company.clj
+++ b/src/clj/auto_ap/ssr/company.clj
@@ -56,6 +56,7 @@
                             :hx-get     (bidi/path-for ssr-routes/only-routes
                                                        :company)
                             :hx-trigger "clientSelected from:body"
+                            :hx-select "#app-contents"
                             :hx-swap    "outerHTML swap:300ms"}}
               (com/breadcrumbs {}
                                [:a {:href (bidi/path-for ssr-routes/only-routes
diff --git a/src/clj/auto_ap/ssr/company_dropdown.clj b/src/clj/auto_ap/ssr/company_dropdown.clj
index c5b900c7..43d71702 100644
--- a/src/clj/auto_ap/ssr/company_dropdown.clj
+++ b/src/clj/auto_ap/ssr/company_dropdown.clj
@@ -1,7 +1,8 @@
 (ns auto-ap.ssr.company-dropdown
   (:require
-   [auto-ap.datomic :refer [conn]]
-   [auto-ap.graphql.utils :refer [assert-can-see-client]]
+   [auto-ap.datomic :refer [conn pull-many]]
+   [auto-ap.graphql.utils :refer [assert-can-see-client cleanse-query]]
+   [auto-ap.solr :as solr]
    [auto-ap.ssr-routes :as ssr-routes]
    [auto-ap.ssr.svg :as svg]
    [auto-ap.ssr.utils :refer [html-response]]
@@ -12,24 +13,30 @@
 
 (defn dropdown-search-results* [{:keys [options]}]
   [:ul 
-   (for [[id company-name]options]
+   (for [{:keys [id name]} options]
      [:li  
       [:div {:class "flex items-center pl-2 rounded hover:bg-green-100 dark:hover:bg-green-600"}
 
        [:a {:href "#" :class "w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300"
             "_" (hiccup/raw "on click set value of <#company-search-value/> to @data-value then send selected to #company-dropdown")
             :data-value id}
-        company-name]]])])
+        name]]])])
+
+
 
 (defn get-clients [identity query]
-  (dc/q '[:find ?c ?n
-          :in $ ?user ?q
-          :where [?c :client/name ?n]
-          [(clojure.string/includes? ?n ?q)]
-          [(iol-ion.query/can-see-client? ?user ?c)]]
-        (dc/db conn)
-        identity
-        (or query "")))
+  (if-let [query (not-empty (cleanse-query query))]
+    (let [search-query (str "name:(" query ")")]
+
+      (for [n (pull-many (dc/db conn) [:client/name :db/id]
+                       (for [{:keys [id name]} (solr/query solr/impl "clients" {"query"  search-query
+                                                                                "fields" "id, name"})
+                             :let [client-id (Long/parseLong id)]
+                             :when (can-see-client? identity client-id)]
+                         client-id))]
+        {:id (:db/id n)
+         :name (:client/name n)}))
+    []))
 
 (defn dropdown-search-results [{:keys [identity] :as request}]
   (html-response 
diff --git a/src/clj/auto_ap/ssr/components/aside.clj b/src/clj/auto_ap/ssr/components/aside.clj
index cb470b81..3d5cdd33 100644
--- a/src/clj/auto_ap/ssr/components/aside.clj
+++ b/src/clj/auto_ap/ssr/components/aside.clj
@@ -5,19 +5,26 @@
             [auto-ap.ssr-routes :as ssr-routes]))
 
 (defn menu-button- [params & children]
-  [:a (-> params
-               (dissoc :icon)
-               (assoc :type "button",)
-               (update :class str " cursor-pointer flex items-center p-2 w-full text-sm text-gray-600 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"))
-   
-   (when (:icon params)
-     [:span {:class "flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-blue-500 dark:text-gray-400 group-hover:scale-110 dark:group-hover:text-white mr-3"}
-      (:icon params)])
+  [:div
+   [:a (-> params
+           (dissoc :icon)
+           (assoc :type "button")
+           (update :class str " cursor-pointer flex items-center p-2 w-full text-sm text-gray-600 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700")
+           (assoc :hx-indicator "find .htmx-indicator")
+           (assoc :hx-select "#app-contents")
+           (assoc :hx-target "#app-contents")
+           (assoc :hx-swap "outerHTML"))
 
-   (into [:span {:class "flex-1 text-left whitespace-nowrap text-gray-600 dark:text-white"} ] children)
-   (when (:data-collapse-toggle params)
-     [:svg {:aria-hidden "true", :class "w-6 h-6", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-      [:path {:fill-rule "evenodd", :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", :clip-rule "evenodd"}]])])
+    (when (:icon params)
+      [:span {:class "flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 group-hover:text-blue-500 dark:text-gray-400 group-hover:scale-110 dark:group-hover:text-white mr-3"}
+       (:icon params)])
+
+    (into [:span {:class "flex-1 text-left whitespace-nowrap text-gray-600 dark:text-white"}] children)
+    (when (:data-collapse-toggle params)
+      [:svg {:aria-hidden "true", :class "w-6 h-6", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
+       [:path {:fill-rule "evenodd", :d "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", :clip-rule "evenodd"}]])
+    [:div.htmx-indicator.flex.items-center
+     (svg/spinner-primary {:class "inline w-4 h-4 text-white"})]]])
 
 (defn sub-menu- [params & children]
   [:ul {:id (:id params) :class "hidden py-2 space-y-2"}
@@ -30,21 +37,20 @@
 
    [:div {:class "overflow-y-auto py-5 px-3 h-full bg-gray-50 border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"}
     nav
-    
-    
+
     [:ul {:class "pt-5 mt-5 space-y-2 border-t border-gray-200 dark:border-gray-700"}
-     #_[:li  
+     #_[:li
         [:a {:href "#", :class "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group"}
          [:svg {:aria-hidden "true", :class "flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
           [:path {:d "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"}]
           [:path {:fill-rule "evenodd", :d "M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z", :clip-rule "evenodd"}]]
          [:span {:class "ml-3"} "Docs"]]]
-     #_[:li  
+     #_[:li
         [:a {:href "#", :class "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group"}
          [:svg {:aria-hidden "true", :class "flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
           [:path {:d "M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"}]]
          [:span {:class "ml-3"} "Components"]]]
-     #_[:li  
+     #_[:li
         [:a {:href "#", :class "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group"}
          [:svg {:aria-hidden "true", :class "flex-shrink-0 w-6 h-6 text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
           [:path {:fill-rule "evenodd", :d "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z", :clip-rule "evenodd"}]]
@@ -57,8 +63,7 @@
       [:a {:href "#", :data-tooltip-target "tooltip-settings", :class "inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:text-gray-400 dark:hover:text-white hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600"}
        [:svg {:aria-hidden "true", :class "w-6 h-6", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
         [:path {:fill-rule "evenodd", :d "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z", :clip-rule "evenodd"}]]]
-      [:div {:id "tooltip-settings", :role "tooltip", :class "inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"} "Settings page" 
-       ]
+      [:div {:id "tooltip-settings", :role "tooltip", :class "inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip"} "Settings page"]
       [:button {:type "button", :data-dropdown-toggle "language-dropdown", :class "inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-400 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600"}
        [:svg {:aria-hidden "true", :class "h-5 w-5 rounded-full mt-0.5", :xmlns "http://www.w3.org/2000/svg", :xmlns:xlink "http://www.w3.org/1999/xlink", :viewbox "0 0 3900 3900"}
         [:path {:fill "#b22234", :d "M0 0h7410v3900H0z"}]
@@ -81,7 +86,7 @@
          [:use {:xlink:href "#e", :x "2470"}]]]]
       [:div {:class "hidden z-50 my-4 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700", :id "language-dropdown"}
        [:ul {:class "py-1", :role "none"}
-        [:li  
+        [:li
          [:a {:href "#", :class "block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600", :role "menuitem"}
           [:div {:class "inline-flex items-center"}
            [:svg {:aria-hidden "true", :class "h-3.5 w-3.5 rounded-full mr-2", :xmlns "http://www.w3.org/2000/svg", :id "flag-icon-css-us", :viewbox "0 0 512 512"}
@@ -90,15 +95,15 @@
               [:path {:fill "#bd3d44", :d "M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z", :transform "scale(3.9385)"}]
               [:path {:fill "#fff", :d "M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z", :transform "scale(3.9385)"}]]
              [:path {:fill "#192f5d", :d "M0 0h98.8v70H0z", :transform "scale(3.9385)"}]
-             [:path {:fill "#fff", :d "M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z", :transform "scale(3.9385)"}]]]"              \n                English (US)"]]]
-        [:li  
+             [:path {:fill "#fff", :d "M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z", :transform "scale(3.9385)"}]]] "              \n                English (US)"]]]
+        [:li
          [:a {:href "#", :class "block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-600", :role "menuitem"}
           [:div {:class "inline-flex items-center"}
            [:svg {:aria-hidden "true", :class "h-3.5 w-3.5 rounded-full mr-2", :xmlns "http://www.w3.org/2000/svg", :id "flag-icon-css-de", :viewbox "0 0 512 512"}
             [:path {:fill "#ffce00", :d "M0 341.3h512V512H0z"}]
             [:path {:d "M0 0h512v170.7H0z"}]
             [:path {:fill "#d00", :d "M0 170.7h512v170.6H0z"}]]]]]
-        [:li  
+        [:li
          [:a {:href "#", :class "block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-600", :role "menuitem"}
           [:div {:class "inline-flex items-center"}
            [:svg {:aria-hidden "true", :class "h-3.5 w-3.5 rounded-full mr-2", :xmlns "http://www.w3.org/2000/svg", :id "flag-icon-css-it", :viewbox "0 0 512 512"}
@@ -106,18 +111,38 @@
              [:path {:fill "#fff", :d "M0 0h512v512H0z"}]
              [:path {:fill "#009246", :d "M0 0h170.7v512H0z"}]
              [:path {:fill "#ce2b37", :d "M341.3 0H512v512H341.3z"}]]]]]]
-        [:li  
+        [:li
          [:a {:href "#", :class "block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600", :role "menuitem"}
           [:div {:class "inline-flex items-center"}
            [:svg {:aria-hidden "true", :class "h-3.5 w-3.5 rounded-full mr-2", :xmlns "http://www.w3.org/2000/svg", :xmlns:xlink "http://www.w3.org/1999/xlink", :id "flag-icon-css-cn", :viewbox "0 0 512 512"}
-            [:defs  
+            [:defs
              [:path {:id "a", :fill "#ffde00", :d "M1-.3L-.7.8 0-1 .6.8-1-.3z"}]]
             [:path {:fill "#de2910", :d "M0 0h512v512H0z"}]
             [:use {:width "30", :height "20", :transform "matrix(76.8 0 0 76.8 128 128)", :xlink:href "#a"}]
             [:use {:width "30", :height "20", :transform "rotate(-121 142.6 -47) scale(25.5827)", :xlink:href "#a"}]
             [:use {:width "30", :height "20", :transform "rotate(-98.1 198 -82) scale(25.6)", :xlink:href "#a"}]
             [:use {:width "30", :height "20", :transform "rotate(-74 272.4 -114) scale(25.6137)", :xlink:href "#a"}]
-            [:use {:width "30", :height "20", :transform "matrix(16 -19.968 19.968 16 256 230.4)", :xlink:href "#a"}]]"中文 (繁體)"]]]]]]])
+            [:use {:width "30", :height "20", :transform "matrix(16 -19.968 19.968 16 256 230.4)", :xlink:href "#a"}]] "中文 (繁體)"]]]]]]
+   [:script {:lang "text/javascript"}
+    (hiccup/raw "
+        var $targetEl = document.getElementById('left-nav');
+
+        var $triggerEl = document.getElementById('left-nav-toggle');
+
+        var options = {
+          onCollapse: () => {
+          document.getElementById('main-content').classList.remove('lg:pl-64')
+          },
+          onExpand: () => {
+          document.getElementById('main-content').classList.add('lg:pl-64')
+          },
+          onToggle: () => {
+          }
+        };
+
+        var collapse = new Collapse($targetEl, $triggerEl, options);
+
+")]])
 
 (defn main-aside-nav- []
   [:ul {:class "space-y-2"}
@@ -186,8 +211,9 @@
                  (menu-button- {:href "Sales"} "Balance Sheet")
                  (menu-button- {:href "Sales"} "External Ledger Import"))]])
 
+
 (defn company-aside-nav- []
-  [:ul {:class "space-y-2"}
+  [:ul {:class "space-y-2" :hx-boost "true"}
    [:li
     (menu-button- {:icon svg/vendors
                    :href (bidi/path-for ssr-routes/only-routes
diff --git a/src/clj/auto_ap/ssr/components/navbar.clj b/src/clj/auto_ap/ssr/components/navbar.clj
index 8085d9f2..5c044b3a 100644
--- a/src/clj/auto_ap/ssr/components/navbar.clj
+++ b/src/clj/auto_ap/ssr/components/navbar.clj
@@ -1,12 +1,15 @@
 (ns auto-ap.ssr.components.navbar
-  (:require [auto-ap.ssr.components.buttons :refer [icon-button-]]
-            [datomic.api :as dc]
-            [auto-ap.datomic :refer [conn pull-attr]]
-            [auto-ap.ssr.svg :as svg]
-            [hiccup2.core :as hiccup]
-            [bidi.bidi :as bidi]
-            [auto-ap.ssr-routes :as ssr-routes]
-            [auto-ap.ssr.company-dropdown :as cd]))
+  (:require
+   [auto-ap.datomic :refer [conn pull-attr]]
+   [auto-ap.client-routes :as client-routes2]
+   [auto-ap.ssr-routes :as ssr-routes]
+   [auto-ap.ssr.company-dropdown :as cd]
+   [auto-ap.ssr.components.buttons :refer [icon-button-]]
+   [auto-ap.ssr.svg :as svg]
+   [bidi.bidi :as bidi]
+   [datomic.api :as dc]
+   [hiccup2.core :as hiccup]
+   [auto-ap.ssr.components.user-dropdown :as user-dropdown]))
 
 (defn navbar- [{:keys [client identity]}]
   [:nav {:class "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"}
@@ -17,7 +20,7 @@
      [:span {:class "sr-only"} "Open sidebar"]
      [:svg {:class "w-6 h-6", :aria-hidden "true", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
       [:path {:clip-rule "evenodd", :fill-rule "evenodd", :d "M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"}]]]
-    [:a {:href "https://flowbite-admin-dashboard.vercel.app/", :class "flex ml-2 md:mr-24"}
+    [:a {:href "/" :class "flex ml-2 md:mr-24"}
      [:img {:src "/img/logo-big2.png", :class "h-10 mr-16", :alt "Integreat logo"}]
      ]
     ]
@@ -40,77 +43,8 @@
        :hx-target "#modal-holder"
        :hx-swap   "outerHTML"}
       svg/search)
-    #_[:button 
-     [:div.w-4.h-4 svg/search]]
     (cd/dropdown {:client client :identity identity})
     
     
-    [:div {:class "z-20 z-50 max-w-sm my-4 overflow-hidden text-base list-none bg-white divide-y divide-gray-100 rounded shadow-lg dark:bg-gray-700 dark:divide-gray-600 hidden", :id "apps-dropdown", :style "position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(1545px, 65px);", :data-popper-placement "bottom"}
-     [:div {:class "block px-4 py-2 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400"} ]
-     [:div {:class "grid grid-cols-3 gap-4 p-4"}
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:fill-rule "evenodd", :d "M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Sales"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:d "M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Users"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:fill-rule "evenodd", :d "M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Inbox"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:fill-rule "evenodd", :d "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Profile"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:fill-rule "evenodd", :d "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Settings"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:d "M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"}]
-        [:path {:fill-rule "evenodd", :d "M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Products"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:d "M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"}]
-        [:path {:fill-rule "evenodd", :d "M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Pricing"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:fill-rule "evenodd", :d "M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z", :clip-rule "evenodd"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Billing"]]
-      [:a {:href "#", :class "block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"}
-       [:svg {:class "mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400", :fill "none", :stroke "currentColor", :viewbox "0 0 24 24", :xmlns "http://www.w3.org/2000/svg"}
-        [:path {:stroke-linecap "round", :stroke-linejoin "round", :stroke-width "2", :d "M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"}]]
-       [:div {:class "text-sm font-medium text-gray-900 dark:text-white"} "Logout"]]]]
-    (icon-button- {"_" (hiccup/raw "on click toggle .dark on <body />")}
-      [:div.h-4.w-4
-       [:div.hidden.dark:block svg/sun]
-       [:div.dark:hidden svg/moon]
-       ])
-    #_[:button {:id "theme-toggle", :data-tooltip-target "tooltip-toggle", :type "button", :class "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
-              }
-     ]
-    [:div {:id "tooltip-toggle", :role "tooltip", :class "absolute z-10 inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip opacity-0 invisible", :style "position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(2326px, 63px);", :data-popper-placement "bottom"} [:img {:src (pull-attr (dc/db conn) :user/profile-image-url (:db/id identity))}]
-     [:div {:class "tooltip-arrow", :data-popper-arrow "data-popper-arrow", :style "position: absolute; left: 0px; transform: translate(69px);"}]]
-    [:div {:class "flex items-center ml-3"}
-     [:div  
-      [:button {:type "button", :class "flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600", :id "user-menu-button-2", :aria-expanded "false", :data-dropdown-toggle "dropdown-2"}
-       [:span {:class "sr-only"} "Open user menu"]
-       [:img {:class "w-8 h-8 rounded-full", :src (pull-attr (dc/db conn) :user/profile-image-url (:db/id identity)) :alt "user photo"}]]]
-     [:div {:class "z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600", :id "dropdown-2", :style "position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(2446px, 61px);", :data-popper-placement "bottom"}
-      [:div {:class "px-4 py-3", :role "none"}
-       [:p {:class "text-sm text-gray-900 dark:text-white", :role "none"} (:user/name identity)]
-       [:p {:class "text-sm font-medium text-gray-900 truncate dark:text-gray-300", :role "none"} (pull-attr (dc/db conn) :user/email (:db/id identity))]]
-      [:ul {:class "py-1", :role "none"}
-       [:li  
-        [:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Dashboard"]]
-       [:li  
-        [:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Settings"]]
-       [:li  
-        [:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Earnings"]]
-       [:li  
-        [:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Sign out"]]]]]]]]])
+    (user-dropdown/dropdown {:identity identity})
+    ]]]])
diff --git a/src/clj/auto_ap/ssr/components/navbar_dropdown.clj b/src/clj/auto_ap/ssr/components/navbar_dropdown.clj
deleted file mode 100644
index b478b720..00000000
--- a/src/clj/auto_ap/ssr/components/navbar_dropdown.clj
+++ /dev/null
@@ -1,14 +0,0 @@
-(ns auto-ap.ssr.components.navbar-dropdown
-  (:require [hiccup2.core :as hiccup]))
-
-(defn navbar-dropdown [id header children]
-  [:div {
-         :id id
-         :class (str "navbar-item has-dropdown")
-         "_"     (hiccup/raw "on click elsewhere remove .is-active from me")
-         
-         }
-   [:a {:class "navbar-link login"
-        "_"    (hiccup/raw "on click toggle .is-active on the parentElement of me then add .appear to next <.navbar-dropdown />")} header]
-   (into [:div {:class "navbar-dropdown"}
-          children])])
diff --git a/src/clj/auto_ap/ssr/components/page.clj b/src/clj/auto_ap/ssr/components/page.clj
index 1d1c5ae4..beddb31c 100644
--- a/src/clj/auto_ap/ssr/components/page.clj
+++ b/src/clj/auto_ap/ssr/components/page.clj
@@ -6,33 +6,31 @@
    [auto-ap.ssr.svg :as svg]))
 
 (defn page- [{:keys [nav page-specific active-client identity app-params] :or {app-params {}}} & children]
-  [:div#app app-params
+  [:div#app
    (navbar- {:client active-client
              :identity identity})
-   [:div.flex.pt-16.overflow-hidden
+   [:div#app-contents.flex.pt-16.overflow-hidden app-params
     (left-aside- {:nav nav
                   :page-specific page-specific})
     [:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "
                         "_" (hiccup/raw "on htmx:responseError put event.detail.xhr.response into #error-details then add .htmx-added to #error-holder then remove .hidden from #error-holder then wait 30ms then remove .htmx-added from #error-holder")}
      [:div#error-holder.hidden
       [:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
-       [:div.relative 
+       [:div.relative
         [:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
          {"_" (hiccup/raw "on click add .hidden to #error-holder")}
-         svg/filled-x
-         ]
-        ]
+         svg/filled-x]]
+
        [:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
-        
 
         [:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
          [:div.inline-block.w-8.h-8.mr-2 svg/alert]
          [:span.font-medium "Oh, drat! An unexpected error has occurred."]
          [:div.text-sm
-          [:p "Integreat staff have been notified and are looking into it. " ]
+          [:p "Integreat staff have been notified and are looking into it. "]
           [:p "To see error details, " [:a.underline {:href "#" :data-collapse-toggle "error-details"} "click here"] "."]
           [:pre#error-details.text-xs.hidden]]]]]]
-     (into 
-       [:div.p-4]
-       children)]]
+     (into
+      [:div.p-4]
+      children)]]
    [:div#modal-holder]])
diff --git a/src/clj/auto_ap/ssr/components/user_dropdown.clj b/src/clj/auto_ap/ssr/components/user_dropdown.clj
new file mode 100644
index 00000000..809cc8fa
--- /dev/null
+++ b/src/clj/auto_ap/ssr/components/user_dropdown.clj
@@ -0,0 +1,61 @@
+(ns auto-ap.ssr.components.user-dropdown
+  (:require
+   [auto-ap.client-routes :as client-routes2]
+   [auto-ap.datomic :refer [conn pull-attr]]
+   [auto-ap.ssr-routes :as ssr-routes]
+   [bidi.bidi :as bidi]
+   [datomic.api :as dc]
+   [hiccup2.core :as hiccup]))
+
+(defn dropdown [{:keys [identity]}]
+  [:div {:class "flex items-center ml-3 mr-10"}
+   [:div
+    [:button#user-menu-button {:type "button", :class "flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600", :aria-expanded "false"
+                               "_" (hiccup/raw "init call initUserDropdown()")}
+     [:span {:class "sr-only"} "Open user menu"]
+     [:img {:class "w-8 h-8 rounded-full", :src (pull-attr (dc/db conn) :user/profile-image-url (:db/id identity)) :alt "user photo"}]]]
+   [:div#user-menu {:class "z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 mr-10"}
+    [:div {:class "px-4 py-3", :role "none"}
+     [:p {:class "text-sm text-gray-900 dark:text-white", :role "none"} (:user/name identity)]
+     [:p {:class "text-sm font-medium text-gray-900 truncate dark:text-gray-300", :role "none"} (pull-attr (dc/db conn) :user/email (:db/id identity))]
+     #_(icon-button-
+        {"_"   (hiccup/raw "on click toggle .dark on <body />")}
+        [:div.h-4.w-4
+         [:div.hidden.dark:block svg/sun]
+         [:div.dark:hidden svg/moon]])]
+    [:ul {:class "py-1", :role "none"}
+     [:li
+      [:a {:href (bidi/path-for ssr-routes/only-routes :company), :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "My Company"]]
+     (when (= "admin" (:user/role identity))
+       [:a {:href (bidi/path-for client-routes2/routes :admin), :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Admin"])
+     [:li
+      [:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"
+           "_" (hiccup/raw "on click toggle .dark on <body />")}
+       "Night Mode"]]
+     [:li
+      [:a {:href "/logout", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Sign out"]]]]
+
+   [:script {:lang "text/javascript"}
+    (hiccup/raw
+     "
+function initUserDropdown() {
+  var $dropdownTargetEl = document.getElementById('user-menu');
+
+  // set the element that trigger the dropdown menu on click
+  var $dropdownTriggerEl = document.getElementById('user-menu-button');
+
+  var userDrowdown = new Dropdown($dropdownTargetEl, $dropdownTriggerEl, {
+    placement: 'bottom',
+    triggerType: 'click',
+    offsetSkidding: 0,
+    offsetDistance: 10,
+    delay: 5000,
+    onHide: () => {
+    },
+    onShow: () => {
+    },
+    onToggle: () => {
+    }
+  });
+}
+")]])
diff --git a/src/clj/auto_ap/ssr/grid_page_helper.clj b/src/clj/auto_ap/ssr/grid_page_helper.clj
index 05df9a33..ccc46650 100644
--- a/src/clj/auto_ap/ssr/grid_page_helper.clj
+++ b/src/clj/auto_ap/ssr/grid_page_helper.clj
@@ -175,12 +175,12 @@
 
 (defn page [grid-spec {:keys [identity] :as request}]
   (base-page
-    request
-    (com/page {:nav           (:nav grid-spec)
-               :active-client (:client (:session request))
-               :identity      (:identity request)}
-              (apply com/breadcrumbs {} (:breadcrumbs grid-spec))
-              (table* grid-spec
-                      identity
-                      (extract-params grid-spec request)))
-    nil))
+   request
+   (com/page {:nav           (:nav grid-spec)
+              :active-client (:client (:session request))
+              :identity      (:identity request)}
+             (apply com/breadcrumbs {} (:breadcrumbs grid-spec))
+             (table* grid-spec
+                     identity
+                     (extract-params grid-spec request)))
+   nil))
diff --git a/src/clj/auto_ap/ssr/login_dropdown.clj b/src/clj/auto_ap/ssr/login_dropdown.clj
deleted file mode 100644
index a0b4715f..00000000
--- a/src/clj/auto_ap/ssr/login_dropdown.clj
+++ /dev/null
@@ -1,26 +0,0 @@
-(ns auto-ap.ssr.login-dropdown
-  (:require
-   [auto-ap.client-routes :as client-routes]
-   [auto-ap.ssr.components.navbar-dropdown :refer [navbar-dropdown]]
-   [bidi.bidi :as bidi]
-   [hiccup2.core :as hiccup]
-   [auto-ap.ssr-routes :as ssr-routes]))
-
-(defn dropdown [{:keys [identity]}]
-  (if identity
-    (navbar-dropdown
-      "login-dropdown"
-      [:span [:span.icon [:i.fa.fa-user] ]
-       [:span (:user/name identity)]]
-      [:div
-       [:a {:class "navbar-item"
-            :href  (bidi/path-for client-routes/routes :reports)} "My company"]
-       #_[:a.dropdown-item {:on-click (dispatch-event-with-propagation [:vendor-dialog/started {}])} "New Vendor"] ;; double colorn
-       #_[:a.dropdown-item {:on-click (dispatch-event-with-propagation [:vendor-dialog/edit {}])} "Edit Vendor"]
-       (when (= "admin" (:user/role identity))
-         [:a {:class "navbar-item" :href (bidi/path-for client-routes/routes :admin)} "Administration"])
-       [:hr {:class "navbar-divider"}]
-       [:a.navbar-item {"_" (hiccup/raw "on click call localStorage.removeItem(\"jwt\")")
-                        :href (bidi/path-for ssr-routes/only-routes :logout)}
-        "Logout"]])
-    [:a.navbar-item {:href (bidi/path-for client-routes/routes :login  )} "Login"]))
diff --git a/src/clj/auto_ap/ssr/svg.clj b/src/clj/auto_ap/ssr/svg.clj
index feb60375..f0cdcb76 100644
--- a/src/clj/auto_ap/ssr/svg.clj
+++ b/src/clj/auto_ap/ssr/svg.clj
@@ -71,6 +71,11 @@
                 [:path {:d "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", :fill "#E5E7EB"}]
                 [:path {:d "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", :fill "currentColor"}]])
 
+(defn spinner-primary [{:keys [class]}]
+  [:svg {:aria-hidden "true", :role "status", :class (str "animate-spin " class) :viewbox "0 0 100 101", :fill "none", :xmlns "http://www.w3.org/2000/svg"}
+   [:path {:d "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", :fill "#79b52e"}]
+   [:path {:d "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", :fill "currentColor"}]])
+
 (def search 
   [:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
    [:defs]
diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj
index 4521e0ba..8b74ea12 100644
--- a/src/clj/auto_ap/ssr/ui.clj
+++ b/src/clj/auto_ap/ssr/ui.clj
@@ -22,8 +22,8 @@
       [:link {:href "/css/font.min.css", :rel "stylesheet"}]
       [:link {:rel "stylesheet", :href "/css/react-datepicker.min.inc.css"}]
       [:link {:rel "stylesheet", :href "/output.css"}]
-      [:script {:src "https://unpkg.com/hyperscript.org@0.9.7"}]
-      [:script {:src "https://unpkg.com/@popperjs/core@2"}]
+      [:script {:src "https://unpkg.com/hyperscript.org@0.9.7/dist/_hyperscript.min.js"}]
+      [:script {:src "https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js"}]
       #_[:script {:src          "https://unpkg.com/htmx.org@1.8.4"
                 :integrity    "sha384-wg5Y/JwF7VxGk4zLsJEcAojRtlVp1FKKdGy1qN+OMtdq72WRvX/EdRdqg/LOhYeV"
                 :crossorigin= "anonymous"}]
@@ -32,7 +32,7 @@
       [:script {:src "/js/htmx-disable.js"}]
       [:script {:type "text/javascript", :src "https://cdn.yodlee.com/fastlink/v4/initialize.js", :async "async" }]]
      [:script {:type "text/javascript", :src "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"}]
-     [:script {:src "https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"}]
+     [:script {:src "https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"}]
      [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"  :type "text/css"}]
      [:body {:hx-ext "disable-submit"
              }
@@ -40,11 +40,11 @@
       [:script {:src "/js/flowbite.min.js"}]
       [:script {:lang "text/javascript"}
        (hiccup/raw "
-        const $targetEl = document.getElementById('left-nav');
+        var $targetEl = document.getElementById('left-nav');
 
-        const $triggerEl = document.getElementById('left-nav-toggle');
+        var $triggerEl = document.getElementById('left-nav-toggle');
 
-        const options = {
+        var options = {
           onCollapse: () => {
           document.getElementById('main-content').classList.remove('lg:pl-64')
           },
@@ -55,10 +55,7 @@
           }
         };
 
-        const collapse = new Collapse($targetEl, $triggerEl, options);
-
-
-  ;
+        var collapse = new Collapse($targetEl, $triggerEl, options);
 
 "