feat: whiteboards create button

src/main/frontend/components/header.css

@@ -317,7 +317,7 @@ html.is-native-iphone {
   --ls-headbar-inner-top-padding: 36px;
 
   .left-sidebar-inner {
-    .new-page {
+    .create {
       padding-bottom: 32px;
     }
   }

src/main/frontend/components/sidebar.cljs

@@ -36,6 +36,7 @@
             [frontend.ui :as ui]
             [frontend.util :as util]
             [frontend.util.cursor :as cursor]
+            [frontend.components.whiteboard :as whiteboard]
             [goog.dom :as gdom]
             [goog.object :as gobj]
             [react-draggable]
@@ -307,15 +308,32 @@
        (when (and left-sidebar-open? (not config/publishing?))
          (recent-pages t))]
 
-      [:footer.px-2 {:class "new-page"}
+      [:footer.px-2 {:class "create"}
        (when-not config/publishing?
-         [:a.item.group.flex.items-center.px-2.py-2.text-sm.font-medium.rounded-md.new-page-link
-          {:on-click (fn []
-                       (and (util/sm-breakpoint?)
-                            (state/toggle-left-sidebar!))
-                       (state/pub-event! [:go/search]))}
-          (ui/icon "circle-plus mr-3" {:style {:font-size 20}})
-          [:span.flex-1 (t :right-side-bar/new-page)]])]]]))
+         (ui/dropdown-with-links
+          (fn [{:keys [toggle-fn]}]
+            [:button#create-button
+             {:on-click toggle-fn}
+            [:<> 
+             (ui/icon "plus") 
+             [:span.mx-1 (t :left-side-bar/create)]]])
+          (->>
+           [{:title (t :left-side-bar/new-page)
+             :class "new-page-link"
+             :options {:on-click (fn []
+                                   (and (util/sm-breakpoint?)
+                                        (state/toggle-left-sidebar!))
+                                   (state/pub-event! [:go/search]))}
+             :icon (ui/icon "page" {:extension? "tie"})}
+            {:title (t :left-side-bar/new-whiteboard)
+             :class "new-whiteboard-link"
+             :options {:on-click (fn []
+                                   (and (util/sm-breakpoint?)
+                                        (state/toggle-left-sidebar!))
+                                   (whiteboard/create-new-whiteboard!))}
+             
+             :icon (ui/icon "whiteboard" {:extension? "tie"})}])
+          {}))]]]))
 
 (rum/defc left-sidebar < rum/reactive
   [{:keys [left-sidebar-open? route-match]}]

src/main/frontend/components/sidebar.css

@@ -268,7 +268,7 @@
     }
   }
 
-  .new-page {
+  .create {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -279,6 +279,32 @@
       background-color: var(--ls-primary-background-color);
       box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
     }
+
+    .dropdown-wrapper {
+      top: initial;
+      right: initial;
+      bottom: calc(100% + 6px);
+      left: 0;
+      width: 100%;
+
+      @screen sm {
+        bottom: 0;
+        left: calc(100% + 6px);
+      }
+
+      i {
+        @apply text-xs rounded border mr-2 w-5 h-5 text-center;
+      }
+    }
+
+    #create-button {
+      @apply p-2 text-sm font-medium rounded-md w-full;
+      background-color: var(--ls-secondary-background-color) !important;
+
+      @screen sm {
+        background-color: var(--ls-primary-background-color) !important;
+      }
+    }
   }
 
   @screen sm {
@@ -290,7 +316,7 @@
       margin-top: 52px;
     }
 
-    .new-page {
+    .create {
       &-link {
         background-color: var(--ls-primary-background-color);
       }

src/main/frontend/components/whiteboard.cljs

@@ -119,15 +119,19 @@
    [:div.p-4.h-64.flex.justify-center
     (tldraw-preview page-name)]])
 
+(defn create-new-whiteboard!
+  []
+  (let [name (str (d/squuid))]
+    (whiteboard-handler/create-new-whiteboard-page! name)
+    (route-handler/redirect-to-whiteboard! name)))
+
 (rum/defc dashboard-create-card
   []
   [:div.dashboard-card.dashboard-create-card.cursor-pointer#tl-create-whiteboard
    {:on-click
     (fn [e]
       (util/stop e)
-      (let [name (str (d/squuid))]
-        (whiteboard-handler/create-new-whiteboard-page! name)
-        (route-handler/redirect-to-whiteboard! name)))}
+      (create-new-whiteboard!))}
    (ui/icon "plus")
    [:span.dashboard-create-card-caption.select-none
     "New whiteboard"]])

src/main/frontend/dicts.cljc

@@ -72,7 +72,9 @@
         :right-side-bar/show-journals "Show Journals"
         :right-side-bar/separator "Right sidebar resize handler"
         :left-side-bar/journals "Journals"
+        :left-side-bar/create "Create"
         :left-side-bar/new-page "New page"
+        :left-side-bar/new-whiteboard "New whiteboard"
         :left-side-bar/nav-favorites "Favorites"
         :left-side-bar/nav-shortcuts "Shortcuts"
         :left-side-bar/nav-recent-pages "Recent"