#633 typingsvg

src/App.tsx

@@ -22,6 +22,8 @@ import MarkdownEditor from "./pages/MarkdownEditor";
 import Cursortrail from "./Cursortrail";
 import { HistoryProvider } from "./contexts/HistoryContext";
 
+import TypingSvgGeneratorPage from "./pages/TypingSvgGeneratorPage";
+
 const queryClient = new QueryClient();
 
 // Placeholder components for missing routes to prevent app crash
@@ -59,7 +61,8 @@ export default function App() {
                 <Route path="/projects" element={<Layout><ProjectsSection /></Layout>} />
                 <Route path="/submit" element={<Layout><SubmitSection /></Layout>} />
                 <Route path="/drag-drop" element={<Layout><DragDropEditor /></Layout>} />
-
+
+                <Route path="/typing-svg" element={<Layout><TypingSvgGeneratorPage /></Layout>} /> 
 
                 <Route path="/about" element={<Layout><AboutUs /></Layout>} />
                 <Route path="/privacy" element={<Layout><PrivacyPolicy /></Layout>} />
@@ -77,4 +80,4 @@ export default function App() {
       </TooltipProvider>
     </QueryClientProvider>
   );
-};
+};

src/components/Sidebar.tsx

@@ -1,13 +1,33 @@
 import { cn } from '@/lib/utils';
 import { sidebarCategories } from "../data/sidebarCategories";
+import { useNavigate } from 'react-router-dom';
 
 interface SidebarProps {
   selectedCategory: string;
   onCategorySelect: (category: string) => void;
 }
 
+const categoryPaths: Record<string, string> = {
+  home: '/',
+  elements: '/elements',
+  templates: '/templates',
+  projects: '/projects',
+  about: '/about',
+  'readme-editor': '/readme-editor',
+  'markdown-editor': '/markdown-editor',
+  'ai-editor': '/ai-editor-intro',
+  'typing-svg': '/typing-svg', 
+};
+
+const Sidebar = ({ selectedCategory, onCategorySelect }: SidebarProps) => { 
+const navigate = useNavigate();
 
-const Sidebar = ({ selectedCategory, onCategorySelect }: SidebarProps) => {
+  const handleCategoryClick = (categoryId: string) => {
+    onCategorySelect(categoryId);
+    const path = categoryPaths[categoryId] || '/';
+    navigate(path);
+  };
+
   return (
     <aside className="w-64 bg-card border-r border-border h-full">
       <div className="p-4">
@@ -18,7 +38,7 @@ const Sidebar = ({ selectedCategory, onCategorySelect }: SidebarProps) => {
             return (
               <button
                 key={category.id}
-                onClick={() => onCategorySelect(category.id)}
+                onClick={() => handleCategoryClick(category.id)}
                 className={cn(
                   "w-full flex items-center gap-3 px-3 py-2 text-left rounded-lg transition-all duration-200",
                   "hover:bg-accent hover:text-accent-foreground",