Add Text Length Checker tool with comprehensive text analysis features

- Add new TextLengthTool.js with real-time text statistics
- Features: character/word/line/sentence/paragraph counting, reading time estimation
- Add Text Length Checker to navigation (ToolSidebar, Layout, App routing)
- Add Text Length Checker card to homepage
- Fix button styling with flex alignment for better UX
- Route: /text-length with Type icon from lucide-react

src/components/Layout.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Home, Hash, FileText, FileSpreadsheet, Wand2, GitCompare, Menu, X, Database, LinkIcon, Code2, ChevronDown } from 'lucide-react';
+import { Home, Hash, FileText, FileSpreadsheet, Wand2, GitCompare, Menu, X, Database, LinkIcon, Code2, ChevronDown, Type } from 'lucide-react';
 import ThemeToggle from './ThemeToggle';
+import ToolSidebar from './ToolSidebar';
 
 const Layout = ({ children }) => {
   const location = useLocation();
@@ -41,13 +42,16 @@ const Layout = ({ children }) => {
     { path: '/csv-json', name: 'CSV/JSON Tool', icon: FileSpreadsheet, description: 'Convert CSV ↔ JSON' },
     { path: '/beautifier', name: 'Beautifier Tool', icon: Wand2, description: 'Beautify/minify code' },
     { path: '/diff', name: 'Diff Tool', icon: GitCompare, description: 'Compare text differences' },
-
+    { path: '/text-length', name: 'Text Length Checker', icon: Type, description: 'Analyze text length & stats' },
   ];
 
+  // Check if we're on a tool page (not homepage)
+  const isToolPage = location.pathname !== '/';
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
       {/* Header */}
-      <header className="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+      <header className="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <Link to="/" className="flex items-center space-x-2">
@@ -58,60 +62,62 @@ const Layout = ({ children }) => {
             </Link>
             
             <div className="flex items-center space-x-4">
-              {/* Desktop Navigation */}
-              <nav className="hidden md:flex items-center space-x-6">
-                <Link
-                  to="/"
-                  className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                    isActive('/') 
-                      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300' 
-                      : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
-                  }`}
-                >
-                  <Home className="h-4 w-4" />
-                  <span>Home</span>
-                </Link>
-                
-                {/* Tools Dropdown */}
-                <div className="relative" ref={dropdownRef}>
-                  <button
-                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                    className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
+              {/* Desktop Navigation - only show on homepage */}
+              {!isToolPage && (
+                <nav className="hidden md:flex items-center space-x-6">
+                  <Link
+                    to="/"
+                    className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive('/') 
+                        ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300' 
+                        : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white'
+                    }`}
                   >
-                    <span>Tools</span>
-                    <ChevronDown className={`h-4 w-4 transition-transform ${
-                      isDropdownOpen ? 'rotate-180' : ''
-                    }`} />
-                  </button>
+                    <Home className="h-4 w-4" />
+                    <span>Home</span>
+                  </Link>
                   
-                  {/* Dropdown Menu */}
-                  {isDropdownOpen && (
-                    <div className="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
-                      {tools.map((tool) => {
-                        const IconComponent = tool.icon;
-                        return (
-                          <Link
-                            key={tool.path}
-                            to={tool.path}
-                            onClick={() => setIsDropdownOpen(false)}
-                            className={`flex items-center space-x-3 px-4 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
-                              isActive(tool.path)
-                                ? 'bg-primary-50 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
-                                : 'text-gray-700 dark:text-gray-300'
-                            }`}
-                          >
-                            <IconComponent className="h-4 w-4" />
-                            <div>
-                              <div className="font-medium">{tool.name}</div>
-                              <div className="text-xs text-gray-500 dark:text-gray-400">{tool.description}</div>
-                            </div>
-                          </Link>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </nav>
+                  {/* Tools Dropdown */}
+                  <div className="relative" ref={dropdownRef}>
+                    <button
+                      onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                      className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors"
+                    >
+                      <span>Tools</span>
+                      <ChevronDown className={`h-4 w-4 transition-transform ${
+                        isDropdownOpen ? 'rotate-180' : ''
+                      }`} />
+                    </button>
+                    
+                    {/* Dropdown Menu */}
+                    {isDropdownOpen && (
+                      <div className="absolute top-full left-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
+                        {tools.map((tool) => {
+                          const IconComponent = tool.icon;
+                          return (
+                            <Link
+                              key={tool.path}
+                              to={tool.path}
+                              onClick={() => setIsDropdownOpen(false)}
+                              className={`flex items-center space-x-3 px-4 py-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
+                                isActive(tool.path)
+                                  ? 'bg-primary-50 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
+                                  : 'text-gray-700 dark:text-gray-300'
+                              }`}
+                            >
+                              <IconComponent className="h-4 w-4" />
+                              <div>
+                                <div className="font-medium">{tool.name}</div>
+                                <div className="text-xs text-gray-500 dark:text-gray-400">{tool.description}</div>
+                              </div>
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                </nav>
+              )}
               
               <ThemeToggle />
               
@@ -147,7 +153,7 @@ const Layout = ({ children }) => {
               
               <div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2">
                 <div className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-3 py-1">
-                  Tools
+                  {isToolPage ? 'Switch Tools' : 'Tools'}
                 </div>
                 {tools.map((tool) => {
                   const IconComponent = tool.icon;
@@ -177,18 +183,47 @@ const Layout = ({ children }) => {
       )}
 
       {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {children}
-      </main>
-
-      {/* Footer */}
-      <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <div className="text-center text-gray-600 dark:text-gray-400">
-            <p>© {new Date().getFullYear()} Dewe Toolsites - Developer Tools.</p>
+      <div className="flex flex-1">
+        {/* Tool Sidebar - only show on tool pages */}
+        {isToolPage && (
+          <div className="hidden lg:block flex-shrink-0">
+            <ToolSidebar />
           </div>
-        </div>
-      </footer>
+        )}
+        
+        {/* Main Content Area */}
+        <main className={`flex-1 flex flex-col ${isToolPage ? 'overflow-hidden' : ''}`}>
+          {isToolPage ? (
+            <div className="flex-1 overflow-auto">
+              <div className="px-4 sm:px-6 lg:px-8 py-8">
+                {children}
+              </div>
+              {/* Footer for tool pages - inside scrollable content */}
+              <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                  <div className="text-center text-gray-600 dark:text-gray-400">
+                    <p>© {new Date().getFullYear()} Dewe Toolsites - Developer Tools.</p>
+                  </div>
+                </div>
+              </footer>
+            </div>
+          ) : (
+            <div className="flex-1">
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                {children}
+              </div>
+              {/* Footer for homepage */}
+              <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                  <div className="text-center text-gray-600 dark:text-gray-400">
+                    <p>© {new Date().getFullYear()} Dewe Toolsites - Developer Tools.</p>
+                  </div>
+                </div>
+              </footer>
+            </div>
+          )}
+        </main>
+      </div>
     </div>
   );
 };

src/components/ToolLayout.js

@@ -1,20 +1,10 @@
 import React from 'react';
-import { ArrowLeft } from 'lucide-react';
-import { Link } from 'react-router-dom';
 
 const ToolLayout = ({ title, description, children, icon: Icon }) => {
   return (
     <div className="max-w-6xl mx-auto">
       {/* Header */}
       <div className="mb-8">
-        <Link
-          to="/"
-          className="inline-flex items-center text-primary-600 hover:text-primary-700 mb-4"
-        >
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          Back to Tools
-        </Link>
-        
         <div className="flex items-center space-x-3 mb-2">
           {Icon && <Icon className="h-8 w-8 text-primary-600" />}
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">

src/components/ToolSidebar.js

@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Search, FileText, Database, LinkIcon, Hash, FileSpreadsheet, Wand2, GitCompare, Home, ChevronLeft, ChevronRight, Type } from 'lucide-react';
+
+const ToolSidebar = () => {
+  const location = useLocation();
+  const [isCollapsed, setIsCollapsed] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const tools = [
+    { path: '/', name: 'Home', icon: Home, description: 'Back to homepage' },
+    { path: '/json', name: 'JSON Tool', icon: FileText, description: 'Format & validate JSON' },
+    { path: '/serialize', name: 'Serialize Tool', icon: Database, description: 'PHP serialize/unserialize' },
+    { path: '/url', name: 'URL Tool', icon: LinkIcon, description: 'URL encode/decode' },
+    { path: '/base64', name: 'Base64 Tool', icon: Hash, description: 'Base64 encode/decode' },
+    { path: '/csv-json', name: 'CSV/JSON Tool', icon: FileSpreadsheet, description: 'Convert CSV ↔ JSON' },
+    { path: '/beautifier', name: 'Beautifier Tool', icon: Wand2, description: 'Beautify/minify code' },
+    { path: '/diff', name: 'Diff Tool', icon: GitCompare, description: 'Compare text differences' },
+    { path: '/text-length', name: 'Text Length Checker', icon: Type, description: 'Analyze text length & stats' },
+  ];
+
+  const filteredTools = tools.filter(tool =>
+    tool.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    tool.description.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const isActive = (path) => location.pathname === path;
+
+  return (
+    <div className={`bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transition-all duration-300 sticky top-16 ${
+      isCollapsed ? 'w-16' : 'w-64'
+    }`} style={{ height: 'calc(100vh - 4rem)' }}>
+      <div className="h-full flex flex-col">
+        {/* Sidebar Header */}
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between">
+            {!isCollapsed && (
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Tools
+              </h2>
+            )}
+            <button
+              onClick={() => setIsCollapsed(!isCollapsed)}
+              className="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            >
+              {isCollapsed ? (
+                <ChevronRight className="h-4 w-4 text-gray-500" />
+              ) : (
+                <ChevronLeft className="h-4 w-4 text-gray-500" />
+              )}
+            </button>
+          </div>
+          
+          {/* Search - only show when not collapsed */}
+          {!isCollapsed && (
+            <div className="relative mt-3">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <input
+                type="text"
+                placeholder="Search tools..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Tools List */}
+        <div className="flex-1 overflow-y-auto py-2">
+          <nav className="space-y-1 px-2">
+            {filteredTools.map((tool) => {
+              const IconComponent = tool.icon;
+              return (
+                <Link
+                  key={tool.path}
+                  to={tool.path}
+                  className={`group flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors ${
+                    isActive(tool.path)
+                      ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-300'
+                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700'
+                  }`}
+                  title={isCollapsed ? tool.name : ''}
+                >
+                  <IconComponent className={`h-5 w-5 ${isCollapsed ? '' : 'mr-3'} flex-shrink-0`} />
+                  {!isCollapsed && (
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{tool.name}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
+                        {tool.description}
+                      </div>
+                    </div>
+                  )}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+
+        {/* Footer */}
+        {!isCollapsed && (
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+            <div className="text-xs text-gray-500 dark:text-gray-400 text-center">
+              Quick access to all tools
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ToolSidebar;