diff --git a/src/App.jsx b/src/App.jsx
index af31d6a1..7003faad 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1063,130 +1063,97 @@ const DnDFlow = () => {
       {/* Graph Editor Tab */}
       {activeTab === 'graph' && (
         <div style={{ display: 'flex', flex: 1, height: 'calc(100vh - 50px)', overflow: 'hidden' }}>
-          {/* Sidebar Toggle Button */}
-          <button
-            onClick={() => setSidebarVisible(!sidebarVisible)}
+          {/* Sidebar */}
+          <div
+            data-sidebar-state={sidebarVisible ? 'expanded' : 'collapsed'}
+            className="sidebar-container"
             style={{
-              position: 'absolute',
-              top: '60px',
-              left: sidebarVisible ? '240px' : '10px',
-              zIndex: 1000,
-              backgroundColor: '#2c2c54',
-              color: '#ffffff',
-              border: '1px solid #555',
-              borderRadius: '4px',
-              width: '32px',
-              height: '32px',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'left 0.3s ease',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
-              padding: '4px'
-            }}
-            onMouseEnter={(e) => {
-              e.target.style.backgroundColor = '#3c3c64';
-              e.target.style.borderColor = '#78A083';
-            }}
-            onMouseLeave={(e) => {
-              e.target.style.backgroundColor = '#2c2c54';
-              e.target.style.borderColor = '#555';
+              position: 'relative',
+              width: sidebarVisible ? '250px' : '0px',
+              height: '100%',
+              transition: 'width 0.5s ease',
+              overflow: 'hidden'
             }}
-            title={sidebarVisible ? 'Hide Sidebar' : 'Show Sidebar'}
           >
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              style={{
+                position: 'fixed',
+                left: sidebarVisible ? '0px' : '-250px',
+                top: '50px', // Account for top bar height
+                width: '250px',
+                height: 'calc(100vh - 50px)',
+                transition: 'left 0.5s ease',
+                zIndex: 10,
+                borderRight: '1px solid #ccc',
+                backgroundColor: '#1e1e2f'
+              }}
             >
-              {sidebarVisible ? (
-                // Hide sidebar icon (sidebar with left arrow)
-                <>
-                  <rect x="2" y="3" width="6" height="18" rx="1" fill="currentColor" opacity="0.3" />
-                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-                  <path d="M6 12L4 10M6 12L4 14M6 12H1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                </>
-              ) : (
-                // Show sidebar icon (sidebar with right arrow)
-                <>
-                  <rect x="2" y="3" width="6" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-                  <rect x="10" y="3" width="12" height="18" rx="1" stroke="currentColor" strokeWidth="1.5" fill="none" />
-                  <path d="M5 12L7 10M5 12L7 14M5 12H10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-                </>
-              )}
-            </svg>
-          </button>
-
-          {/* Sidebar */}
-          {sidebarVisible && (
-            <div style={{
-              width: 250,
-              height: '100%',
-              borderRight: '1px solid #ccc',
-              transition: 'width 0.3s ease'
-            }}>
               <Sidebar />
             </div>
-          )}
-
-          <GraphView
-            refEl={ref}
-            reactFlowWrapperRef={reactFlowWrapper}
-            nodes={nodes}
-            edges={edges}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            onConnect={onConnect}
-            onNodeClick={onNodeClick}
-            onEdgeClick={onEdgeClick}
-            onPaneClick={onPaneClick}
-            onNodeContextMenu={onNodeContextMenu}
-            nodeTypes={nodeTypes}
-            onDrop={onDrop}
-            onDragStart={onDragStart}
-            onDragOver={onDragOver}
-            menu={menu}
-            duplicateNode={duplicateNode}
-            copyFeedback={copyFeedback}
-            ui={{
-              selectedNode, selectedEdge,
-              deleteSelectedNode, deleteSelectedEdge,
-              saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
-              shareGraphURL,
-              dockOpen, setDockOpen, onToggleLogs,
-              showKeyboardShortcuts, setShowKeyboardShortcuts,
-            }}
-          />
-          {/* Log Dock */}
-          <LogDock
-            open={dockOpen}
-            onClose={() => setDockOpen(false)}
-            lines={logLines}
-            progress={null}
-          />
-          {/* Node Sidebar */}
-          <NodeSidebar
-            selectedNode={selectedNode}
-            defaultValues={defaultValues}
-            setNodes={setNodes}
-            setSelectedNode={setSelectedNode}
-            isEditingLabel={isEditingLabel}
-            setIsEditingLabel={setIsEditingLabel}
-            tempLabel={tempLabel}
-            setTempLabel={setTempLabel}
-            nodeDocumentation={nodeDocumentation}
-            isDocumentationExpanded={isDocumentationExpanded}
-            setIsDocumentationExpanded={setIsDocumentationExpanded}
-          />
-          {/* Edge Details */}
-          <EdgeDetails
-            selectedEdge={selectedEdge}
-            onClose={() => setSelectedEdge(null)}
-            onDelete={deleteSelectedEdge}
-          />
+          </div>
+
+          {/* Main content area that moves with sidebar */}
+          <div style={{ position: 'relative', flex: 1, height: '100%' }}>
+            <GraphView
+              refEl={ref}
+              reactFlowWrapperRef={reactFlowWrapper}
+              nodes={nodes}
+              edges={edges}
+              onNodesChange={onNodesChange}
+              onEdgesChange={onEdgesChange}
+              onConnect={onConnect}
+              onNodeClick={onNodeClick}
+              onEdgeClick={onEdgeClick}
+              onPaneClick={onPaneClick}
+              onNodeContextMenu={onNodeContextMenu}
+              nodeTypes={nodeTypes}
+              onDrop={onDrop}
+              onDragStart={onDragStart}
+              onDragOver={onDragOver}
+              menu={menu}
+              duplicateNode={duplicateNode}
+              copyFeedback={copyFeedback}
+              ui={{
+                selectedNode, selectedEdge,
+                deleteSelectedNode, deleteSelectedEdge,
+                saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
+                shareGraphURL,
+                dockOpen, setDockOpen, onToggleLogs,
+                showKeyboardShortcuts, setShowKeyboardShortcuts,
+                sidebarVisible, setSidebarVisible,
+              }}
+            />
+
+            {/* Log Dock */}
+            <LogDock
+              open={dockOpen}
+              onClose={() => setDockOpen(false)}
+              lines={logLines}
+              progress={null}
+            />
+
+            {/* Node Sidebar */}
+            <NodeSidebar
+              selectedNode={selectedNode}
+              defaultValues={defaultValues}
+              setNodes={setNodes}
+              setSelectedNode={setSelectedNode}
+              isEditingLabel={isEditingLabel}
+              setIsEditingLabel={setIsEditingLabel}
+              tempLabel={tempLabel}
+              setTempLabel={setTempLabel}
+              nodeDocumentation={nodeDocumentation}
+              isDocumentationExpanded={isDocumentationExpanded}
+              setIsDocumentationExpanded={setIsDocumentationExpanded}
+            />
+
+            {/* Edge Details */}
+            <EdgeDetails
+              selectedEdge={selectedEdge}
+              onClose={() => setSelectedEdge(null)}
+              onDelete={deleteSelectedEdge}
+            />
+          </div>
         </div>
       )}
 
@@ -1194,33 +1161,39 @@ const DnDFlow = () => {
       {activeTab === 'events' && <EventsTab events={events} setEvents={setEvents} />}
 
       {/* Solver Parameters Tab */}
-      {activeTab === 'solver' && (
-        <SolverPanel
-          solverParams={solverParams}
-          setSolverParams={setSolverParams}
-          setActiveTab={setActiveTab}
-        />
-      )}
+      {
+        activeTab === 'solver' && (
+          <SolverPanel
+            solverParams={solverParams}
+            setSolverParams={setSolverParams}
+            setActiveTab={setActiveTab}
+          />
+        )
+      }
 
       {/* Global Variables Tab */}
-      {activeTab === 'globals' && (
-        <GlobalVariablesTab
-          globalVariables={globalVariables}
-          setGlobalVariables={setGlobalVariables}
-          setActiveTab={setActiveTab}
-          pythonCode={pythonCode}
-          setPythonCode={setPythonCode}
-        />
-      )}
+      {
+        activeTab === 'globals' && (
+          <GlobalVariablesTab
+            globalVariables={globalVariables}
+            setGlobalVariables={setGlobalVariables}
+            setActiveTab={setActiveTab}
+            pythonCode={pythonCode}
+            setPythonCode={setPythonCode}
+          />
+        )
+      }
 
       {/* Results Tab */}
-      {activeTab === 'results' && (
-        <ResultsPanel
-          simulationResults={simulationResults}
-          downloadHtml={downloadHtml}
-          downloadCsv={downloadCsv}
-        />
-      )}
+      {
+        activeTab === 'results' && (
+          <ResultsPanel
+            simulationResults={simulationResults}
+            downloadHtml={downloadHtml}
+            downloadCsv={downloadCsv}
+          />
+        )
+      }
 
       {/* Share URL Modal */}
       <ShareModal
@@ -1230,7 +1203,7 @@ const DnDFlow = () => {
         urlMetadata={urlMetadata}
       />
 
-    </div>
+    </div >
   );
 }
 
diff --git a/src/components/GraphView.jsx b/src/components/GraphView.jsx
index a72f4846..db6cd831 100644
--- a/src/components/GraphView.jsx
+++ b/src/components/GraphView.jsx
@@ -50,7 +50,8 @@ function FloatingButtons({
     deleteSelectedNode, deleteSelectedEdge,
     saveGraph, loadGraph, resetGraph, saveToPython, runPathsim,
     shareGraphURL,
-    dockOpen, onToggleLogs
+    dockOpen, onToggleLogs,
+    sidebarVisible, setSidebarVisible
 }) {
     return (
         <>
@@ -142,6 +143,51 @@ function FloatingButtons({
             >
                 New graph
             </button>
+
+            {/* Sidebar Toggle Button - strudel-flow style */}
+            <button
+                onClick={() => setSidebarVisible(!sidebarVisible)}
+                className="sidebar-trigger"
+                style={{
+                    position: 'absolute',
+                    left: 15,
+                    top: 20,
+                    zIndex: 1000,
+                    width: '20px',
+                    height: '20px',
+                    backgroundColor: 'transparent',
+                    color: '#ffffff',
+                    border: 'none',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    // transition: 'all 0.2s ease',
+                    padding: '0'
+                }}
+                title="Toggle Sidebar"
+            >
+                {/* PanelLeft icon - similar to lucide-react */}
+                <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    style={{
+                        color: '#ffffff',
+                        transition: 'color 0.2s ease'
+                    }}
+                >
+                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                    <line x1="9" y1="3" x2="9" y2="21" />
+                </svg>
+            </button>
+
             <button
                 style={{
                     position: 'absolute',
diff --git a/src/components/ShareModal.jsx b/src/components/ShareModal.jsx
index f1f34221..f46b38ce 100644
--- a/src/components/ShareModal.jsx
+++ b/src/components/ShareModal.jsx
@@ -94,7 +94,7 @@ const ShareModal = ({ isOpen, onClose, shareableURL, urlMetadata }) => {
                     <p style={{ margin: 0, color: '#666', fontSize: 14 }}>
                         Copy this URL to share your workflow with others.
                     </p>
-                    
+
                     {/* URL Length Warning */}
                     {isLongURL && (
                         <div style={{
diff --git a/src/styles/App.css b/src/styles/App.css
index def03a59..11c0f67f 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -431,4 +431,49 @@ aside::-webkit-scrollbar-thumb {
 
 aside::-webkit-scrollbar-thumb:hover {
   background: #666;
+}
+
+/* Sidebar transition styles - inspired by strudel-flow */
+.sidebar-container {
+  transition: width 0.8s ease;
+}
+
+.sidebar-container[data-sidebar-state="collapsed"] {
+  width: 0 !important;
+}
+
+.sidebar-container[data-sidebar-state="expanded"] {
+  width: 250px !important;
+}
+
+/* Sidebar trigger button - strudel-flow style */
+.sidebar-trigger {
+  /* Ghost button variant */
+  background-color: transparent !important;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  position: relative;
+}
+
+.sidebar-trigger:hover {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.sidebar-trigger svg {
+  color: #ffffff;
+  transition: color 0.2s ease;
+}
+
+.sidebar-trigger:hover svg {
+  color: #ffffff !important;
+}
+
+.sidebar-trigger:focus {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.sidebar-trigger:active {
+  scale: 0.95;
 }
\ No newline at end of file
diff --git a/src/utils/urlSharing.js b/src/utils/urlSharing.js
index 9fc4c4bd..cc1d9454 100644
--- a/src/utils/urlSharing.js
+++ b/src/utils/urlSharing.js
@@ -13,14 +13,14 @@ const MAX_SAFE_URL_LENGTH = 4000;
  * @returns {string} - Compressed base64 encoded string
  */
 export function encodeGraphData(graphData) {
-  try {
-    const jsonString = JSON.stringify(graphData);
-    // Use lz-string for much better compression than manual whitespace removal
-    return compressToBase64(jsonString);
-  } catch (error) {
-    console.error('Error encoding graph data:', error);
-    return null;
-  }
+    try {
+        const jsonString = JSON.stringify(graphData);
+        // Use lz-string for much better compression than manual whitespace removal
+        return compressToBase64(jsonString);
+    } catch (error) {
+        console.error('Error encoding graph data:', error);
+        return null;
+    }
 }/**
  * Decode graph data from a compressed base64 URL parameter
  * @param {string} encodedData - Compressed base64 encoded graph data
@@ -33,7 +33,7 @@ export function decodeGraphData(encodedData) {
         if (jsonString) {
             return JSON.parse(jsonString);
         }
-        
+
         // Fallback for old format (manual base64 encoding)
         try {
             const binaryString = atob(encodedData);
@@ -46,7 +46,7 @@ export function decodeGraphData(encodedData) {
         } catch (oldFormatError) {
             console.warn('Could not decode with old format either:', oldFormatError);
         }
-        
+
         return null;
     } catch (error) {
         console.error('Error decoding graph data:', error);
@@ -60,28 +60,28 @@ export function decodeGraphData(encodedData) {
  * @returns {Object} - Object with url and metadata about the URL
  */
 export function generateShareableURL(graphData) {
-  try {
-    const encodedData = encodeGraphData(graphData);
-    if (!encodedData) {
-      throw new Error('Failed to encode graph data');
+    try {
+        const encodedData = encodeGraphData(graphData);
+        if (!encodedData) {
+            throw new Error('Failed to encode graph data');
+        }
+
+        const baseURL = window.location.origin + window.location.pathname;
+        const url = new URL(baseURL);
+        url.searchParams.set('graph', encodedData);
+
+        const finalURL = url.toString();
+
+        return {
+            url: finalURL,
+            length: finalURL.length,
+            isSafe: finalURL.length <= MAX_SAFE_URL_LENGTH,
+            maxLength: MAX_SAFE_URL_LENGTH
+        };
+    } catch (error) {
+        console.error('Error generating shareable URL:', error);
+        return null;
     }
-    
-    const baseURL = window.location.origin + window.location.pathname;
-    const url = new URL(baseURL);
-    url.searchParams.set('graph', encodedData);
-    
-    const finalURL = url.toString();
-    
-    return {
-      url: finalURL,
-      length: finalURL.length,
-      isSafe: finalURL.length <= MAX_SAFE_URL_LENGTH,
-      maxLength: MAX_SAFE_URL_LENGTH
-    };
-  } catch (error) {
-    console.error('Error generating shareable URL:', error);
-    return null;
-  }
 }/**
  * Extract graph data from current URL parameters
  * @returns {Object|null} - Graph data object or null if not found/error
@@ -108,20 +108,20 @@ export function getGraphDataFromURL() {
  * @param {boolean} replaceState - Whether to replace current history state (default: false)
  */
 export function updateURLWithGraphData(graphData, replaceState = false) {
-  try {
-    const urlResult = generateShareableURL(graphData);
-    if (urlResult && urlResult.isSafe) {
-      if (replaceState) {
-        window.history.replaceState({}, '', urlResult.url);
-      } else {
-        window.history.pushState({}, '', urlResult.url);
-      }
-    } else if (urlResult) {
-      console.warn(`URL too long (${urlResult.length} chars), not updating browser URL`);
+    try {
+        const urlResult = generateShareableURL(graphData);
+        if (urlResult && urlResult.isSafe) {
+            if (replaceState) {
+                window.history.replaceState({}, '', urlResult.url);
+            } else {
+                window.history.pushState({}, '', urlResult.url);
+            }
+        } else if (urlResult) {
+            console.warn(`URL too long (${urlResult.length} chars), not updating browser URL`);
+        }
+    } catch (error) {
+        console.error('Error updating URL with graph data:', error);
     }
-  } catch (error) {
-    console.error('Error updating URL with graph data:', error);
-  }
 }/**
  * Clear graph data from URL without page reload
  */
@@ -140,47 +140,47 @@ export function clearGraphDataFromURL() {
  * @returns {Promise<Object>} - Result object with success status and metadata
  */
 export async function copyShareableURLToClipboard(graphData) {
-  try {
-    const urlResult = generateShareableURL(graphData);
-    if (!urlResult) {
-      throw new Error('Failed to generate shareable URL');
-    }
-    
-    await navigator.clipboard.writeText(urlResult.url);
-    return {
-      success: true,
-      isSafe: urlResult.isSafe,
-      length: urlResult.length,
-      maxLength: urlResult.maxLength,
-      url: urlResult.url
-    };
-  } catch (error) {
-    console.error('Error copying to clipboard:', error);
-    // Fallback for older browsers
     try {
-      const urlResult = generateShareableURL(graphData);
-      const textArea = document.createElement('textarea');
-      textArea.value = urlResult.url;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-      return {
-        success: true,
-        isSafe: urlResult.isSafe,
-        length: urlResult.length,
-        maxLength: urlResult.maxLength,
-        url: urlResult.url
-      };
-    } catch (fallbackError) {
-      console.error('Clipboard fallback failed:', fallbackError);
-      return {
-        success: false,
-        isSafe: false,
-        length: 0,
-        maxLength: MAX_SAFE_URL_LENGTH,
-        url: null
-      };
+        const urlResult = generateShareableURL(graphData);
+        if (!urlResult) {
+            throw new Error('Failed to generate shareable URL');
+        }
+
+        await navigator.clipboard.writeText(urlResult.url);
+        return {
+            success: true,
+            isSafe: urlResult.isSafe,
+            length: urlResult.length,
+            maxLength: urlResult.maxLength,
+            url: urlResult.url
+        };
+    } catch (error) {
+        console.error('Error copying to clipboard:', error);
+        // Fallback for older browsers
+        try {
+            const urlResult = generateShareableURL(graphData);
+            const textArea = document.createElement('textarea');
+            textArea.value = urlResult.url;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            return {
+                success: true,
+                isSafe: urlResult.isSafe,
+                length: urlResult.length,
+                maxLength: urlResult.maxLength,
+                url: urlResult.url
+            };
+        } catch (fallbackError) {
+            console.error('Clipboard fallback failed:', fallbackError);
+            return {
+                success: false,
+                isSafe: false,
+                length: 0,
+                maxLength: MAX_SAFE_URL_LENGTH,
+                url: null
+            };
+        }
     }
-  }
 }