feat(component/header): extract some css into seperate file

src/main/frontend/components/header.cljs

@@ -18,139 +18,148 @@
 
 (rum/defc logo < rum/reactive
   [{:keys [white?]}]
-  [:a.opacity-70.hover:opacity-100.absolute.hidden.md:block
+  [:a.cp__header-logo
    {:href "/"
     :on-click (fn []
                 (util/scroll-to-top)
-                (state/set-journals-length! 1))
-    :style {:position "absolute"
-            :top 12
-            :left 16
-            :z-index 111}}
+                (state/set-journals-length! 1))}
    (if-let [logo (and config/publishing?
                       (get-in (state/get-config) [:project :logo]))]
-     [:img {:src logo
-            :width 24
-            :height 24}]
+     [:img.cp__header-logo-img {:src logo}]
      (svg/logo (not white?)))])
 
+(rum/defc left-menu-button < rum/reactive
+  [{:keys [on-click]}]
+  [:button#left-menu.cp__header-left-menu
+   {:on-click on-click}
+   [:svg.h-6.w-6
+    {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
+    [:path
+     {:d "M4 6h16M4 12h16M4 18h7"
+      :stroke-width "2"
+      :stroke-linejoin "round"
+      :stroke-linecap "round"}]]])
+
+(rum/defc dropdown-menu < rum/reactive
+  [{:keys [me current-repo t default-home]}]
+  (ui/dropdown-with-links
+   (fn [{:keys [toggle-fn]}]
+     [:button.max-w-xs.flex.items-center.text-sm.rounded-full.focus:outline-none.focus:shadow-outline.h-7.w-7.ml-2
+      {:on-click toggle-fn}
+      (if-let [avatar (:avatar me)]
+        [:img.h-7.w-7.rounded-full
+         {:src avatar}]
+        [:div.h-7.w-7.rounded-full.bg-base-2.opacity-70.hover:opacity-100 {:style {:padding 1.5}}
+         [:a svg/user]])])
+   (let [logged? (:name me)]
+     (->>
+      [(when current-repo
+         {:title (t :graph)
+          :options {:href (rfe/href :graph)}
+          :icon svg/graph-sm})
+       (when (and logged? current-repo)
+         {:title (t :publishing)
+          :options {:on-click (fn []
+                                (export/export-repo-as-html! current-repo))}
+          :icon nil})
+       (when logged?
+         {:title (t :all-repos)
+          :options {:href (rfe/href :repos)}
+          :icon svg/repos-sm})
+       (when current-repo
+         {:title (t :all-pages)
+          :options {:href (rfe/href :all-pages)}
+          :icon svg/pages-sm})
+       (when current-repo
+         {:title (t :all-files)
+          :options {:href (rfe/href :all-files)}
+          :icon svg/folder-sm})
+       (when (and default-home current-repo)
+         {:title (t :all-journals)
+          :options {:href (rfe/href :all-journals)}
+          :icon svg/calendar-sm})
+       {:title (t :excalidraw-title)
+        :options {:href (rfe/href :draw)}
+        :icon (svg/excalidraw-logo)}
+       {:title (t :settings)
+        :options {:href (rfe/href :settings)}
+        :icon svg/settings-sm}
+       (when current-repo
+         {:title (t :import)
+          :options {:href (rfe/href :import)}
+          :icon svg/import-sm})
+       {:title [:div.flex-row.flex.justify-between.items-center
+                [:span (t :join-community)]]
+        :options {:href "https://discord.gg/KpN4eHY"
+                  :title (t :discord-title)
+                  :target "_blank"}
+        :icon svg/discord}
+       (when logged?
+         {:title (t :sign-out)
+          :options {:on-click user-handler/sign-out!}
+          :icon svg/logout-sm})]
+      (remove nil?)))
+   {}))
+
+(rum/defc right-menu-button < rum/reactive
+  []
+  [:a.cp__right-menu-button
+   {:on-click state/toggle-sidebar-open?!}
+   (svg/menu)])
+
 (rum/defc header
   [{:keys [open-fn current-repo white? logged? page? route-match me default-home new-block-mode]}]
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div.relative.z-10.flex-shrink-0.flex.sm:bg-transparent.shadow.sm:shadow-none.h-16.sm:h-12#head
-     [:button#left-menu.px-4.focus:outline-none.md:hidden.menu
-      {:on-click (fn []
-                   (open-fn)
-                   (state/set-left-sidebar-open! true))}
-      [:svg.h-6.w-6
-       {:viewBox "0 0 24 24", :fill "none", :stroke "currentColor"}
-       [:path
-        {:d "M4 6h16M4 12h16M4 18h7"
-         :stroke-width "2"
-         :stroke-linejoin "round"
-         :stroke-linecap "round"}]]]
+    [:div.cp__header#head
+     (left-menu-button {:on-click (fn []
+                               (open-fn)
+                               (state/set-left-sidebar-open! true))})
+
      (logo {:white? white?})
-     [:div.flex-1.px-4.flex.justify-between
-      (if current-repo
-        (search/search)
-        [:div.flex.md:ml-0])
-      [:div.ml-4.flex.items-center.md:ml-6
-       (new-block-mode)
-
-       (when (and (not logged?)
-                  (not config/publishing?))
-         [:a.text-sm.font-medium.login.opacity-70.hover:opacity-100
-          {:href "/login/github"
-           :on-click (fn []
-                       (storage/remove :git/current-repo))}
-          (t :login-github)])
-
-       (repo/sync-status)
-
-       [:div.repos.hidden.md:block
-        (repo/repos-dropdown true)]
-
-       (when-let [project (and current-repo (state/get-current-project))]
-         [:a.opacity-70.hover:opacity-100.ml-4
-          {:title (str (t :go-to) "/" project)
-           :href (str config/website "/" project)
-           :target "_blank"}
-          svg/external-link])
-
-       (when (and page? current-repo (not config/mobile?))
-         (let [page (get-in route-match [:path-params :name])
-               page (string/lower-case (util/url-decode page))
-               page (db/entity [:page/name page])]
-           (page/presentation current-repo page (:journal? page))))
-
-       (if config/publishing?
-         [:a.text-sm.font-medium.ml-3 {:href (rfe/href :graph)}
-          (t :graph)]
-
-         (ui/dropdown-with-links
-          (fn [{:keys [toggle-fn]}]
-            [:button.max-w-xs.flex.items-center.text-sm.rounded-full.focus:outline-none.focus:shadow-outline.h-7.w-7.ml-2
-             {:on-click toggle-fn}
-             (if-let [avatar (:avatar me)]
-               [:img.h-7.w-7.rounded-full
-                {:src avatar}]
-               [:div.h-7.w-7.rounded-full.bg-base-2.opacity-70.hover:opacity-100 {:style {:padding 1.5}}
-                [:a svg/user]])])
-          (let [logged? (:name me)]
-            (->>
-             [(when current-repo
-                {:title (t :graph)
-                 :options {:href (rfe/href :graph)}
-                 :icon svg/graph-sm})
-              (when (and logged? current-repo)
-                {:title (t :publishing)
-                 :options {:on-click (fn []
-                                       (export/export-repo-as-html! current-repo))}
-                 :icon nil})
-              (when logged?
-                {:title (t :all-repos)
-                 :options {:href (rfe/href :repos)}
-                 :icon svg/repos-sm})
-              (when current-repo
-                {:title (t :all-pages)
-                 :options {:href (rfe/href :all-pages)}
-                 :icon svg/pages-sm})
-              (when current-repo
-                {:title (t :all-files)
-                 :options {:href (rfe/href :all-files)}
-                 :icon svg/folder-sm})
-              (when (and default-home current-repo)
-                {:title (t :all-journals)
-                 :options {:href (rfe/href :all-journals)}
-                 :icon svg/calendar-sm})
-              {:title (t :excalidraw-title)
-               :options {:href (rfe/href :draw)}
-               :icon (svg/excalidraw-logo)}
-              {:title (t :settings)
-               :options {:href (rfe/href :settings)}
-               :icon svg/settings-sm}
-              (when current-repo
-                {:title (t :import)
-                 :options {:href (rfe/href :import)}
-                 :icon svg/import-sm})
-              {:title [:div.flex-row.flex.justify-between.items-center
-                       [:span (t :join-community)]]
-               :options {:href "https://discord.gg/KpN4eHY"
-                         :title (t :discord-title)
-                         :target "_blank"}
-               :icon svg/discord}
-              (when logged?
-                {:title (t :sign-out)
-                 :options {:on-click user-handler/sign-out!}
-                 :icon svg/logout-sm})]
-             (remove nil?)))
-          {}))
-
-       [:a#download-as-html.hidden]
-
-       [:a.opacity-70.hover:opacity-100.ml-3.hidden.md:block
-        {:on-click (fn []
-                     (state/toggle-sidebar-open?!))}
-        (svg/menu)]]]]))
+
+     (if current-repo
+       (search/search)
+       [:div.flex-1])
+
+     (new-block-mode)
+
+     (when (and (not logged?)
+                (not config/publishing?))
+       [:a.text-sm.font-medium.login.opacity-70.hover:opacity-100
+        {:href "/login/github"
+         :on-click (fn []
+                     (storage/remove :git/current-repo))}
+        (t :login-github)])
+
+     (repo/sync-status)
+
+     [:div.repos.hidden.md:block
+      (repo/repos-dropdown true)]
+
+     (when-let [project (and current-repo (state/get-current-project))]
+       [:a.opacity-70.hover:opacity-100.ml-4
+        {:title (str (t :go-to) "/" project)
+         :href (str config/website "/" project)
+         :target "_blank"}
+        svg/external-link])
+
+     (when (and page? current-repo (not config/mobile?))
+       (let [page (get-in route-match [:path-params :name])
+             page (string/lower-case (util/url-decode page))
+             page (db/entity [:page/name page])]
+         (page/presentation current-repo page (:journal? page))))
+
+     (if config/publishing?
+       [:a.text-sm.font-medium.ml-3 {:href (rfe/href :graph)}
+        (t :graph)]
+
+       (dropdown-menu {:me me
+                       :t t
+                       :current-repo current-repo
+                       :default-home default-home}))
+
+     [:a#download-as-html.hidden]
+
+     (right-menu-button)]))
 
 

src/main/frontend/components/header.css

@@ -0,0 +1,64 @@
+.cp__header {
+    @apply shadow z-10 h-16 pr-4;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.cp__header-left-menu {
+    @apply px-4 mr-4;
+    border-right: 1px solid var(--ls-secondary-background-color);
+    color: var(--ls-link-text-color);
+    display: block;
+    height: 100%;
+}
+.cp__header-left-menu:focus {
+    @apply outline-none;
+    background: var(--ls-menu-hover-color);
+}
+
+.cp__header-logo {
+    @apply px-4 mr-3;
+    height: 100%;
+}
+
+.cp__header-logo,
+.cp__right-menu-button {
+    opacity: 0.7;
+    display: none;
+}
+
+.cp__header-logo:hover,
+.cp__right-menu-button:hover {
+    opacity: 1;
+}
+
+.cp__header-logo-img {
+    width: 24px;
+    height: 24px;
+}
+
+.cp__right-menu-button {
+    @apply ml-3;
+}
+
+@screen sm {
+    .cp__header {
+        @apply h-12 shadow-none;
+    }
+
+    .cp__header-left-menu {
+        display: none;
+    }
+
+    .cp__header-logo {
+        display: flex;
+        align-items: center;
+    }
+
+    .cp__right-menu-button {
+        display: block;
+    }
+}

src/main/frontend/components/search.cljs

@@ -150,7 +150,7 @@
         search-q (state/sub :search/q)
         show-result? (boolean (seq search-result))]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#search.flex-1.flex.ml-0.md:ml-12
+      [:div#search.flex-1.flex
        [:div.flex.md:ml-0
         [:label.sr-only {:for "search_field"} (t :search)]
         [:div#search-wrapper.relative.w-full.text-gray-400.focus-within:text-gray-600

src/main/frontend/components/sidebar.cljs

@@ -6,7 +6,6 @@
             [frontend.db :as db]
             [frontend.components.widgets :as widgets]
             [frontend.components.journal :as journal]
-            [frontend.components.search :as search]
             [frontend.components.page :as page]
             [frontend.components.settings :as settings]
             [frontend.components.svg :as svg]