(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" :referrerpolicy "no-referrer"}]]] [: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 ")} [: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 ")} "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: () => { } }); } ")]])