feat(ui): add sidebar (wip)

Author: goshatch

resources/styles/main.css

@@ -35,43 +35,55 @@
     --noise: 0;
 }
 
-.system-view {
-    .node {
-        display: flex;
-        height: 100px;
-        width: 100px;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        background-position: center center;
-        padding: 1rem;
-        justify-content: center;
-        align-items: center;
-        font-size: 14px;
-        background-image: url("/images/nodes/unknown.svg");
+.system-container {
+    display: flex;
 
-        &.manager {
-            height: 108px;
+    .system-view {
+        height: 100vh;
+        flex: 1;
+        .node {
+            display: flex;
+            height: 100px;
             width: 100px;
-            background-image: url("/images/nodes/manager.svg");
-        }
-        &.exile {
-            background-image: url("/images/nodes/exile.svg");
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            background-position: center center;
+            padding: 1rem;
+            justify-content: center;
+            align-items: center;
+            font-size: 14px;
+            background-image: url("/images/nodes/unknown.svg");
+
+            &.manager {
+                height: 108px;
+                width: 100px;
+                background-image: url("/images/nodes/manager.svg");
+            }
+            &.exile {
+                background-image: url("/images/nodes/exile.svg");
+            }
+            &.firefighter {
+                height: 120px;
+                width: 120px;
+                background-image: url("/images/nodes/firefighter.svg");
+            }
         }
-        &.firefighter {
-            height: 120px;
-            width: 120px;
-            background-image: url("/images/nodes/firefighter.svg");
+
+        .logo {
+            margin-top: 1em;
         }
-    }
 
-    .logo {
-        margin-top: 1em;
+        .parts-toolbar {
+            background-color: var(--color-base-100);
+            border-radius: var(--radius-box);
+            padding: 0.2rem 0.5rem;
+            border: 1px solid #cccccc;
+        }
     }
 
-    .parts-toolbar {
-        background-color: var(--color-base-100);
-        border-radius: var(--radius-box);
-        padding: 0.2rem 0.5rem;
-        border: 1px solid #cccccc;
+    .sidebar {
+        width: 200px;
+        height: 100vh;
+        border-left: 1px solid var(--color-base-300);
     }
 }

src/main/parts/frontend/components/system.cljs

@@ -81,40 +81,41 @@
         on-connect (uix.core/use-callback
                     #(on-connect-callback setEdges %)
                     [setEdges])]
-
-    ($ :div {:style {:width "100vw" :height "100vh"} :class "system-view"}
-       ($ (.-Provider ctx/update-node-context) {:value update-node}
-          ($ ReactFlow {:nodes nodes
-                        :edges edges
-                        :onNodesChange onNodesChange
-                        :onEdgesChange onEdgesChange
-                        :onConnect on-connect
-                        :nodeTypes node-types}
-             ($ MiniMap)
-             ($ Controls)
-             ($ Panel {:position "top-left" :class "logo"}
-                ($ :img {:src "/images/parts-logo-horizontal.svg" :width 150}))
-             ($ Panel {:position "top-right" :class "toolbar"}
-                ($ parts-toolbar
-                   ($ auth-status-bar)
-                   ($ :span " Add part: ")
-                   ($ :div {:class "join"}
-                      ($ :button
-                         {:class "btn btn-xs join-item"
-                          :on-click (fn [] (setNodes (add-node "unknown")))}
-                         "Unknown")
-                      ($ :button
-                         {:class "btn btn-xs join-item"
-                          :on-click (fn [] (setNodes (add-node "exile")))}
-                         "Exile")
-                      ($ :button
-                         {:class "btn btn-xs join-item"
-                          :on-click (fn [] (setNodes (add-node "firefighter")))}
-                         "Firefighter")
-                      ($ :button
-                         {:class "btn btn-xs join-item"
-                          :on-click (fn [] (setNodes (add-node "manager")))}
-                         "Manager"))))
-             ($ Background {:variant "dots"
-                            :gap 12
-                            :size 1}))))))
+    ($ :div {:class "system-container"}
+       ($ :div {:class "system-view"}
+          ($ (.-Provider ctx/update-node-context) {:value update-node}
+             ($ ReactFlow {:nodes nodes
+                           :edges edges
+                           :onNodesChange onNodesChange
+                           :onEdgesChange onEdgesChange
+                           :onConnect on-connect
+                           :nodeTypes node-types}
+                ($ MiniMap)
+                ($ Controls)
+                ($ Panel {:position "top-left" :class "logo"}
+                   ($ :img {:src "/images/parts-logo-horizontal.svg" :width 150}))
+                ($ Panel {:position "top-right" :class "toolbar"}
+                   ($ parts-toolbar
+                      ($ :span " Add part: ")
+                      ($ :div {:class "join"}
+                         ($ :button
+                            {:class "btn btn-xs join-item"
+                             :on-click (fn [] (setNodes (add-node "unknown")))}
+                            "Unknown")
+                         ($ :button
+                            {:class "btn btn-xs join-item"
+                             :on-click (fn [] (setNodes (add-node "exile")))}
+                            "Exile")
+                         ($ :button
+                            {:class "btn btn-xs join-item"
+                             :on-click (fn [] (setNodes (add-node "firefighter")))}
+                            "Firefighter")
+                         ($ :button
+                            {:class "btn btn-xs join-item"
+                             :on-click (fn [] (setNodes (add-node "manager")))}
+                            "Manager"))))
+                ($ Background {:variant "dots"
+                               :gap 12
+                               :size 1}))))
+       ($ :div {:class "sidebar p-4"}
+          ($ auth-status-bar)))))