added vue router, fixed layout of converter-container

package-lock.json

@@ -11,7 +11,8 @@
         "jspdf": "^3.0.1",
         "mermaid": "^11.9.0",
         "svg2pdf.js": "^2.5.0",
-        "vue": "^3.5.17"
+        "vue": "^3.5.17",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",
@@ -1195,6 +1196,12 @@
         "@vue/shared": "3.5.17"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.17.tgz",
@@ -2777,6 +2784,21 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   },
   "dependencies": {
@@ -3526,6 +3548,11 @@
         "@vue/shared": "3.5.17"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "@vue/reactivity": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.17.tgz",
@@ -4601,6 +4628,14 @@
         "@vue/server-renderer": "3.5.17",
         "@vue/shared": "3.5.17"
       }
+    },
+    "vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "requires": {
+        "@vue/devtools-api": "^6.6.4"
+      }
     }
   }
 }

package.json

@@ -12,7 +12,8 @@
     "jspdf": "^3.0.1",
     "mermaid": "^11.9.0",
     "svg2pdf.js": "^2.5.0",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",

src/App.vue

 <script setup>
-import TextToMermaid from './components/TextToMermaid.vue'
+import Sidebar from './components/Sidebar.vue'
 </script>
 
 <template>
   <div id="app">
-    <TextToMermaid />
+    <Sidebar />
+    <div class="main-content">
+      <router-view />
+    </div>
   </div>
 </template>
 
@@ -12,13 +15,17 @@ import TextToMermaid from './components/TextToMermaid.vue'
 #app {
   min-height: 100vh;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 0;
+  display: flex;
+}
+.main-content {
+  flex: 1;
+  /* margin-left: 220px; */
   padding: 20px;
 }
-
 * {
   box-sizing: border-box;
 }
-
 body {
   margin: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

src/components/Sidebar.vue

+<template>
+  <nav :class="['sidebar', { collapsed }]">
+    <div class="sidebar-header">
+      <span class="logo">🛠️</span>
+      <span v-if="!collapsed" class="title">Utilities</span>
+      <button class="toggle-btn" @click="collapsed = !collapsed" :aria-label="collapsed ? 'Expand sidebar' : 'Collapse sidebar'">
+        <span v-if="collapsed">▶</span>
+        <span v-else>◀</span>
+      </button>
+    </div>
+    <ul>
+      <li>
+        <router-link to="/text-to-mermaid" active-class="active-link">
+          <span class="nav-icon">TM</span>
+          <span v-if="!collapsed">Text to Mermaid</span>
+        </router-link>
+      </li>
+      <li>
+        <router-link to="/text-to-markdown" active-class="active-link">
+          <span class="nav-icon">MD</span>
+          <span v-if="!collapsed">Text to Markdown</span>
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const collapsed = ref(false)
+</script>
+
+<style scoped>
+.sidebar {
+  width: 220px;
+  min-width: 220px;
+  min-height: 100vh;
+  background: #fff;
+  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
+  padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.2s cubic-bezier(.4,2,.6,1), min-width 0.2s cubic-bezier(.4,2,.6,1);
+  z-index: 10;
+}
+.sidebar.collapsed {
+  width: 60px;
+  min-width: 60px;
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5em 1em 1em 1em;
+  border-bottom: 1px solid #eee;
+}
+.logo {
+  font-size: 1.6em;
+  margin-right: 0.5em;
+}
+.title {
+  font-weight: bold;
+  font-size: 1.1em;
+  letter-spacing: 1px;
+}
+.toggle-btn {
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  cursor: pointer;
+  outline: none;
+  margin-left: 0.5em;
+  color: #764ba2;
+  transition: color 0.2s;
+}
+.toggle-btn:hover {
+  color: #667eea;
+}
+ul {
+  list-style: none;
+  padding: 1.5em 0 0 0;
+  margin: 0;
+  flex: 1;
+}
+li {
+  margin-bottom: 1.5em;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.router-link-exact-active,
+.active-link {
+  font-weight: bold;
+  color: #667eea;
+  text-decoration: underline;
+}
+.router-link-exact-active .nav-icon,
+.active-link .nav-icon {
+  color: #667eea;
+}
+.router-link {
+  display: flex;
+  align-items: center;
+  padding: 0.7em 1.2em;
+  border-radius: 8px;
+  color: #333;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s;
+}
+.router-link:hover {
+  background: #f0f4ff;
+  color: #764ba2;
+}
+.nav-icon {
+  font-size: 1.2em;
+  margin-right: 1em;
+  transition: margin 0.2s;
+  font-family: monospace;
+  font-weight: bold;
+}
+.sidebar.collapsed .nav-icon {
+  margin-right: 0;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.sidebar.collapsed .title,
+.sidebar.collapsed .router-link span:not(.nav-icon) {
+  display: none;
+}
+</style> 
\ No newline at end of file

src/components/TextToMarkdown.vue

+<template>
+  <div>
+    <h2>Text to Markdown Converter</h2>
+    <!-- Add your converter UI here -->
+    <textarea v-model="input" placeholder="Enter text here"></textarea>
+    <div>
+      <h3>Markdown Output:</h3>
+      <pre>{{ output }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const input = ref('')
+const output = computed(() => {
+  // For now, just echo input. Replace with real conversion logic later.
+  return input.value
+})
+</script>
+
+<style scoped>
+textarea {
+  width: 100%;
+  min-height: 100px;
+  margin-bottom: 1em;
+}
+pre {
+  background: #f4f4f4;
+  padding: 1em;
+}
+</style> 
\ No newline at end of file

src/components/TextToMermaid.vue

@@ -523,17 +523,20 @@
   
   <style scoped>
   .text-to-mermaid {
-    max-width: 2400px;  /* Increased from 1200px/1600px */
-    width: 95%;         /* Use most of screen width */
-    margin: 0 auto;
-    padding: 20px;
+    max-width: 2400px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .converter-container {
     display: grid;
-    grid-template-columns: 1fr 1.5fr;  /* Make right panel 1.5x wider */
-    gap: 60px;          /* Increased from 30px/40px */
-    margin-bottom: 30px;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 40px;
+    /* margin-bottom: 30px; */
+    /* justify-content: start; */
+    /* max-width: 1200px; */
+    /* margin-left: 0; */
   }
   .input-section, .output-section {
     background: #f8f9fa;
@@ -546,7 +549,7 @@
     padding: 20px;
     border-radius: 8px;
     border: 1px solid #e9ecef;
-    overflow: hidden;        /* Prevent container overflow */
+    max-width: 100%;
   }
   .text-input {
     width: 100%;
@@ -601,7 +604,6 @@
     background: #f8f9fa;
     border-radius: 8px;
     border: 1px solid #e9ecef;
-    overflow: hidden;
     margin-bottom: 20px;  /* Add space between diagram and code */
   }
 
@@ -643,9 +645,12 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 15px 20px;
+    padding: 15px 32px; /* Increased right/left padding */
     background: #e9ecef;
     border-bottom: 1px solid #dee2e6;
+    min-width: 480px; /* Ensure enough width for controls */
+    max-width: 100%;
+    overflow-x: auto;
   }
 
   .diagram-header h4 {
@@ -658,6 +663,11 @@
     display: flex;
     align-items: center;
     gap: 15px;
+    flex-shrink: 0;
+    min-width: 320px; /* Ensure enough width for controls */
+    flex-wrap: nowrap; /* Prevent wrapping */
+    max-width: 100%;
+    overflow-x: auto;
   }
 
   /* Zoom Controls with Slider */
@@ -1275,7 +1285,7 @@
     background: #545b62;
   }
 
-  @media (max-width: 768px) {
+  /* @media (max-width: 768px) {
     .converter-container {
       grid-template-columns: 1fr;
     }
@@ -1291,5 +1301,5 @@
     .converter-container {
       gap: 80px;
     }
-  }
+  } */
   </style>
\ No newline at end of file

src/main.js

 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

src/router/index.js

+import { createRouter, createWebHistory } from 'vue-router'
+import TextToMermaidView from '../views/TextToMermaidView.vue'
+import TextToMarkdownView from '../views/TextToMarkdownView.vue'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/text-to-mermaid'
+  },
+  {
+    path: '/text-to-mermaid',
+    name: 'TextToMermaid',
+    component: TextToMermaidView
+  },
+  {
+    path: '/text-to-markdown',
+    name: 'TextToMarkdown',
+    component: TextToMarkdownView
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router 
\ No newline at end of file

src/views/TextToMarkdownView.vue

+<template>
+  <TextToMarkdown />
+</template>
+
+<script setup>
+import TextToMarkdown from '../components/TextToMarkdown.vue'
+</script> 
\ No newline at end of file

src/views/TextToMermaidView.vue

+<template>
+  <TextToMermaid />
+</template>
+
+<script setup>
+import TextToMermaid from '../components/TextToMermaid.vue'
+</script> 
\ No newline at end of file