Drag and drop nodes

src/App.css

@@ -280,3 +280,152 @@
 .sidebar-scrollable {
   scroll-behavior: smooth;
 }
+/* Sidebar and drag-and-drop styles */
+.dndflow {
+  display: flex;
+  height: 100%;
+}
+
+.reactflow-wrapper {
+  flex: 1;
+  height: 100%;
+}
+
+aside {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+aside .description {
+  margin-bottom: 20px;
+  padding: 10px;
+  background-color: #2c2c2c;
+  border-radius: 5px;
+  color: #ffffff;
+  text-align: center;
+  font-size: 12px;
+}
+
+.dndnode {
+  height: 50px;
+  padding: 10px;
+  border: 1px solid #78A083;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: grab;
+  background-color: #444;
+  color: #ffffff;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+
+.dndnode:hover {
+  background-color: #78A083;
+}
+
+.dndnode.input {
+  background-color: #3498db;
+}
+
+.dndnode.input:hover {
+  background-color: #2980b9;
+}
+
+.dndnode.output {
+  background-color: #e74c3c;
+}
+
+.dndnode.output:hover {
+  background-color: #c0392b;
+}
+
+/* Ensure draggable node text is always visible */
+.dndnode {
+  color: #ffffff !important;
+  font-weight: 500 !important;
+  text-align: left !important;
+  line-height: 1.4 !important;
+  background-color: #2a2a3e !important;
+  border: 1px solid #555 !important;
+}
+
+/* Override any inherited styles that might hide text */
+.dndnode * {
+  color: inherit !important;
+}
+
+/* Improve readability */
+.dndnode:hover {
+  color: #ffffff !important;
+  background-color: #3a3a4e !important;
+}
+
+.dndnode:active {
+  color: #ffffff !important;
+}
+
+/* Ensure category descriptions are readable */
+.sidebar-description {
+  color: #aaaaaa !important;
+  font-size: 11px !important;
+  margin-bottom: 8px !important;
+  font-style: italic !important;
+}
+
+/* Sidebar node category styles */
+.dndnode.math {
+  border-left: 4px solid #17a2b8 !important;
+  background-color: #1a2a3a !important;
+}
+
+.dndnode.control {
+  border-left: 4px solid #6f42c1 !important;
+  background-color: #2a1f3d !important;
+}
+
+.dndnode.fuel-cycle {
+  border-left: 4px solid #fd7e14 !important;
+  background-color: #3a2a1a !important;
+}
+
+.dndnode.input {
+  border-left: 4px solid #28a745 !important;
+  background-color: #1a2f1a !important;
+}
+
+.dndnode.output {
+  border-left: 4px solid #dc3545 !important;
+  background-color: #3a1a1a !important;
+}
+
+.dndnode.processing {
+  border-left: 4px solid #007bff !important;
+  background-color: #1a1a3a !important;
+}
+
+/* Hover effects for category headers */
+.category-header:hover {
+  background-color: #3c3c64 !important;
+}
+
+/* Scrollbar styling for sidebar */
+aside::-webkit-scrollbar {
+  width: 6px;
+}
+
+aside::-webkit-scrollbar-track {
+  background: #2c2c54;
+  border-radius: 3px;
+}
+
+aside::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 3px;
+}
+
+aside::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}