From ac49c3df72f1d311a19abcad2aa3c1e72bec5567 Mon Sep 17 00:00:00 2001
From: Alex Hernandez <hola@puercito.net>
Date: Tue, 3 Mar 2026 20:17:01 +1000
Subject: [PATCH] :lipstick: slide-in animation for the header nav

---
 src/renderer/App.tsx                               |  4 ++--
 src/renderer/components/Editor/DocumentOutline.css | 12 +++++++++---
 src/renderer/components/Editor/DocumentOutline.tsx |  3 ++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 88e85e3..df69038 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -11,7 +11,7 @@ import './styles/app.css'
 export default function App(): JSX.Element {
   const {
     setFileTree, activeFilePath, isDirty, markSaved, activeFileContent, theme, toggleTheme,
-    loadSession, revisionPanelOpen, toggleRevisionPanel, outlineOpen
+    loadSession, revisionPanelOpen, toggleRevisionPanel
   } = useEditorStore()
   const [sidebarOpen, setSidebarOpen] = useState(
     () => localStorage.getItem('sidebarOpen') !== 'false'
@@ -89,7 +89,7 @@ export default function App(): JSX.Element {
       <main className="editor-area" style={{ position: 'relative' }}>
         <AnalysisToolbar />
         <div className="editor-body">
-          {outlineOpen && <DocumentOutline />}
+          <DocumentOutline />
           <MarkdownEditor />
         </div>
         {revisionPanelOpen && <RevisionPanel />}
diff --git a/src/renderer/components/Editor/DocumentOutline.css b/src/renderer/components/Editor/DocumentOutline.css
index b19e51c..4ec39f9 100644
--- a/src/renderer/components/Editor/DocumentOutline.css
+++ b/src/renderer/components/Editor/DocumentOutline.css
@@ -1,12 +1,18 @@
 .outline-panel {
-  width: 160px;
-  min-width: 160px;
+  width: 0;
+  min-width: 0;
   flex-shrink: 0;
   background: var(--sidebar-bg);
-  border-right: 1px solid var(--border);
+  border-right: 0px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width 0.2s ease, border-right-width 0.2s ease;
+}
+
+.outline-panel--open {
+  width: 160px;
+  border-right-width: 1px;
 }
 
 .outline-header {
diff --git a/src/renderer/components/Editor/DocumentOutline.tsx b/src/renderer/components/Editor/DocumentOutline.tsx
index 5fac506..84aca17 100644
--- a/src/renderer/components/Editor/DocumentOutline.tsx
+++ b/src/renderer/components/Editor/DocumentOutline.tsx
@@ -42,10 +42,11 @@ function navigateTo(offset: number): void {
 
 export function DocumentOutline(): JSX.Element {
   const activeFileContent = useEditorStore((s) => s.activeFileContent)
+  const outlineOpen = useEditorStore((s) => s.outlineOpen)
   const items = useMemo(() => parseOutline(activeFileContent), [activeFileContent])
 
   return (
-    <div className="outline-panel">
+    <div className={`outline-panel${outlineOpen ? ' outline-panel--open' : ''}`}>
       <div className="outline-header">OUTLINE</div>
       <div className="outline-list">
         {items.length === 0 ? (