feat(map): Introduce CSS Grid sidebar layout and integrated navigation + draw panels, add directions view and step-to-map interaction

ts_web/elements/00group-map/dees-geo-map/dees-geo-map.ts

@@ -141,6 +141,9 @@ export class DeesGeoMap extends DeesElement {
   @state()
   private accessor isNavigationOpen: boolean = true;
 
+  @state()
+  private accessor isDrawPanelOpen: boolean = true;
+
   // Controllers
   private searchController: SearchController | null = null;
   private navigationController: NavigationController | null = null;
@@ -836,6 +839,10 @@ export class DeesGeoMap extends DeesElement {
     this.isNavigationOpen = !this.isNavigationOpen;
   }
 
+  private toggleDrawPanel(): void {
+    this.isDrawPanelOpen = !this.isDrawPanelOpen;
+  }
+
   // ─── Render ─────────────────────────────────────────────────────────────────
 
   public render(): TemplateResult {
@@ -843,24 +850,31 @@ export class DeesGeoMap extends DeesElement {
     const hasTrafficProvider = this.trafficController?.provider?.isConfigured ?? false;
     const showTrafficControls = Boolean(hasTrafficProvider || this.trafficApiKey || this.trafficProvider);
 
+    // Calculate panel widths for CSS Grid
+    const leftPanelWidth = this.showNavigation && this.isNavigationOpen ? '300px' : '0px';
+    const rightPanelWidth = this.showToolbar && this.isDrawPanelOpen ? '180px' : '0px';
+
     return html`
-      <div class="geo-component">
+      <div class="geo-component" style="--left-panel-width: ${leftPanelWidth}; --right-panel-width: ${rightPanelWidth};">
         <!-- Header Toolbar Above Map -->
         ${this.renderHeaderToolbar(showTrafficControls)}
 
+        <!-- Left Sidebar: Navigation Panel -->
+        <div class="left-sidebar ${!this.showNavigation || !this.isNavigationOpen ? 'collapsed' : ''}">
+          ${this.showNavigation && this.isNavigationOpen && this.navigationController
+            ? this.navigationController.render()
+            : ''}
+        </div>
+
         <!-- Map Container -->
         <div class="map-container" @contextmenu=${(e: MouseEvent) => this.handleMapContextMenu(e)}>
           <div class="map-wrapper"></div>
 
           <div class="map-overlay">
-            <!-- Top Left: Navigation Panel (toggleable) -->
-            <div class="overlay-top-left">
-              ${this.showNavigation && this.isNavigationOpen && this.navigationController
-                ? this.navigationController.render()
-                : ''}
-            </div>
+            <!-- Top Left: Empty (navigation moved to sidebar) -->
+            <div class="overlay-top-left"></div>
 
-            <!-- Top Right: Empty now (controls moved to header) -->
+            <!-- Top Right: Empty (controls in header) -->
             <div class="overlay-top-right"></div>
 
             <!-- Bottom Left: Traffic Legend + Feature Count -->
@@ -873,10 +887,15 @@ export class DeesGeoMap extends DeesElement {
               ` : ''}
             </div>
 
-            <!-- Bottom Right: Empty now (zoom moved to header) -->
+            <!-- Bottom Right: Empty (zoom in header) -->
             <div class="overlay-bottom-right"></div>
           </div>
         </div>
+
+        <!-- Right Sidebar: Draw Panel -->
+        <div class="right-sidebar ${!this.showToolbar || !this.isDrawPanelOpen ? 'collapsed' : ''}">
+          ${this.showToolbar && this.isDrawPanelOpen ? this.renderDrawPanel() : ''}
+        </div>
       </div>
     `;
   }
@@ -884,11 +903,16 @@ export class DeesGeoMap extends DeesElement {
   private renderHeaderToolbar(showTrafficControls: boolean): TemplateResult {
     return html`
       <div class="header-toolbar">
-        <!-- Left: Draw Tools -->
+        <!-- Left: Navigation Panel Toggle -->
         <div class="toolbar-left">
-          ${this.showToolbar ? html`
-            ${this.renderDrawTools()}
-            <div class="toolbar-divider"></div>
+          ${this.showNavigation ? html`
+            <button
+              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
+              title="Toggle Navigation Panel"
+              @click=${() => this.toggleNavigation()}
+            >
+              ${renderIcon('navigation')}
+            </button>
           ` : ''}
         </div>
 
@@ -899,15 +923,15 @@ export class DeesGeoMap extends DeesElement {
             : ''}
         </div>
 
-        <!-- Right: Navigation Toggle + Traffic Toggle + Zoom Controls -->
+        <!-- Right: Draw Panel Toggle + Traffic Toggle + Zoom Controls -->
         <div class="toolbar-right">
-          ${this.showNavigation ? html`
+          ${this.showToolbar ? html`
             <button
-              class="tool-button ${this.isNavigationOpen ? 'active' : ''}"
-              title="Navigation"
-              @click=${() => this.toggleNavigation()}
+              class="tool-button ${this.isDrawPanelOpen ? 'active' : ''}"
+              title="Toggle Draw Tools"
+              @click=${() => this.toggleDrawPanel()}
             >
-              ${renderIcon('navigation')}
+              ${renderIcon('polygon')}
             </button>
           ` : ''}
           ${showTrafficControls && this.trafficController
@@ -933,7 +957,7 @@ export class DeesGeoMap extends DeesElement {
     `;
   }
 
-  private renderDrawTools(): TemplateResult {
+  private renderDrawPanel(): TemplateResult {
     const tools: { id: TDrawTool; icon: string; label: string }[] = [
       { id: 'point', icon: 'point', label: 'Point' },
       { id: 'linestring', icon: 'line', label: 'Line' },
@@ -944,33 +968,51 @@ export class DeesGeoMap extends DeesElement {
     ];
 
     return html`
-      ${tools.map(tool => html`
-        <button
-          class="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
-          title="${tool.label}"
-          @click=${() => this.handleToolClick(tool.id)}
-          ?disabled=${!this.isMapReady}
-        >
-          ${renderIcon(tool.icon)}
-        </button>
-      `)}
-      <div class="toolbar-divider"></div>
-      <button
-        class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
-        title="Select & Edit"
-        @click=${() => this.handleToolClick('select')}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('select')}
-      </button>
-      <button
-        class="tool-button"
-        title="Clear All"
-        @click=${this.handleClearClick}
-        ?disabled=${!this.isMapReady}
-      >
-        ${renderIcon('trash')}
-      </button>
+      <div class="draw-panel">
+        <div class="draw-panel-header">
+          <div class="draw-panel-header-icon">
+            ${renderIcon('polygon')}
+          </div>
+          <div class="draw-panel-header-title">Draw Tools</div>
+        </div>
+
+        <div class="draw-tools-grid">
+          ${tools.map(tool => html`
+            <button
+              class="draw-tool-button ${this.activeTool === tool.id ? 'active' : ''}"
+              title="${tool.label}"
+              @click=${() => this.handleToolClick(tool.id)}
+              ?disabled=${!this.isMapReady}
+            >
+              ${renderIcon(tool.icon)}
+              <span class="draw-tool-button-label">${tool.label}</span>
+            </button>
+          `)}
+        </div>
+
+        <div class="draw-panel-divider"></div>
+
+        <div class="draw-panel-actions">
+          <button
+            class="draw-action-button ${this.activeTool === 'select' ? 'active' : ''}"
+            title="Select & Edit"
+            @click=${() => this.handleToolClick('select')}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('select')}
+            <span>Select & Edit</span>
+          </button>
+          <button
+            class="draw-action-button danger"
+            title="Clear All"
+            @click=${this.handleClearClick}
+            ?disabled=${!this.isMapReady}
+          >
+            ${renderIcon('trash')}
+            <span>Clear All</span>
+          </button>
+        </div>
+      </div>
     `;
   }