Makes company pages work great

2023-05-31 16:58:29 -07:00
parent 721bbaea53
commit 0eb91b9ad8
15 changed files with 389 additions and 412 deletions
--- 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
--- 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"
--- 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 {
--- 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;
  }
--- 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
--- 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 
--- 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"))
+  [: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"))

-   (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)])
+    (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"}]])])
+    (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"}
@@ -31,7 +38,6 @@
   [: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
        [: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"}
@@ -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"}]
@@ -90,7 +95,7 @@
              [: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)"]]]
+             [: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"}
@@ -117,7 +122,27 @@
            [: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
--- 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})
+    ]]]])
--- a/src/clj/auto_ap/ssr/components/navbar_dropdown.clj
+++ b/src/clj/auto_ap/ssr/components/navbar_dropdown.clj
@@ -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])])
--- a/src/clj/auto_ap/ssr/components/page.clj
+++ b/src/clj/auto_ap/ssr/components/page.clj
@@ -6,10 +6,10 @@
   [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 "
@@ -19,20 +19,18 @@
       [: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
-         ]
-        ]
-       [: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
+         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)]]
+      [:div.p-4]
+      children)]]
   [:div#modal-holder]])
--- a/src/clj/auto_ap/ssr/components/user_dropdown.clj
+++ 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: () => {
+    }
+  });
+}
+")]])
--- 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))
--- a/src/clj/auto_ap/ssr/login_dropdown.clj
+++ b/src/clj/auto_ap/ssr/login_dropdown.clj
@@ -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"]))
--- 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]
--- 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);

 "