Bryce
6b4392b74b
The top bar grew vertically on narrower viewports when the environment badge and company-selector labels wrapped, pushing content under the fixed navbar (which the layout offsets with a fixed pt-16). Rework the navbar into a fixed h-16 row with a priority-based responsive layout: - search fills the middle (flex-1) and shrinks first when space is tight - company selector holds its size and truncates long names - environment badge degrades full pill -> compact letter badge -> hidden - harmonize control heights (40px controls, 32px badge/avatar accents) so the search no longer renders as a cramped thin strip Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
4.3 KiB
Clojure
60 lines
4.3 KiB
Clojure
(ns auto-ap.ssr.components.navbar
|
|
(:require
|
|
[auto-ap.graphql.utils :refer [is-admin? limited-clients]]
|
|
[auto-ap.routes.dashboard :as dashboard]
|
|
[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.components.user-dropdown :as user-dropdown]
|
|
[auto-ap.ssr.svg :as svg]
|
|
[bidi.bidi :as bidi]
|
|
[clojure.string :as str]))
|
|
|
|
(defn navbar- [{:keys [client-selection client identity clients dd-env]}]
|
|
[:nav {:class "fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"}
|
|
[:div {:class "px-3 lg:px-5 lg:pl-3 h-16 flex items-center"}
|
|
[:div {:class "flex items-center w-full"}
|
|
;; Left cluster: sidebar toggle, logo, environment badge. Holds its size.
|
|
[:div {:class "flex items-center shrink-0"}
|
|
[:button {:aria-controls "left-nav", :id "left-nav-toggle" :type "button", :class "inline-flex items-center p-2 mr-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
|
"@click" "leftNavShow = !leftNavShow"}
|
|
[: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 (bidi/path-for ssr-routes/only-routes ::dashboard/page) :class "hidden sm:flex items-center shrink-0"}
|
|
[:img {:src "/img/logo-big2.png", :class "h-10 max-w-none", :alt "Integreat logo"}]]
|
|
(when (and dd-env (not= "prod" dd-env))
|
|
(let [env-label (str "environment: " dd-env)]
|
|
[:div {:class "shrink-0"}
|
|
;; Full pill when there is room (md-lg and xl+); compact letter badge in the tight lg range.
|
|
[:span {:class "hidden md:inline-flex lg:hidden xl:inline-flex items-center ml-4 h-8 px-3 rounded-full bg-yellow-200 text-yellow-800 text-sm font-medium whitespace-nowrap"}
|
|
env-label]
|
|
[:span {:class "hidden lg:flex xl:hidden items-center justify-center ml-3 w-8 h-8 rounded-full bg-yellow-200 text-yellow-800 text-sm font-bold"
|
|
:title env-label}
|
|
(str/upper-case (subs dd-env 0 1))]]))]
|
|
|
|
;; Search: fills the middle, grows to a comfortable max and shrinks first when space is tight.
|
|
(when (is-admin? identity)
|
|
[:button.relative.hidden.lg:block.flex-1.min-w-0.max-w-md.mx-4 {:class "bg-gray-50 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 pl-10 h-10 pr-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
|
:hx-get (bidi/path-for ssr-routes/only-routes :search)}
|
|
[:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-gray-500"}
|
|
[:div.w-4.h-4 svg/search]
|
|
[:span.ml-2 "Search"]]])
|
|
|
|
;; Right cluster: mobile search, company selector, user menu. Stays pinned right and keeps its size.
|
|
[:div {:class "flex items-center gap-2 sm:gap-4 ml-auto shrink-0"}
|
|
(icon-button-
|
|
{:id "toggleSidebarMobileSearch", :type "button", :class "p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
|
:hx-get (bidi/path-for ssr-routes/only-routes
|
|
:search)
|
|
:hx-target "#modal-holder"
|
|
:hx-swap "outerHTML"}
|
|
svg/search)
|
|
(let [limited-clients (limited-clients identity)]
|
|
(when (or (nil? limited-clients)
|
|
(> (count limited-clients) 1))
|
|
(cd/dropdown {:client-selection client-selection :client client :identity identity
|
|
:clients clients})))
|
|
|
|
(user-dropdown/dropdown {:identity identity})]]]])
|