1  //
  2  //  EnhancedSidebarView.swift
  3  //  RacerTracer
  4  //
  5  //  Created by Alexander Kunau on 29.09.25.
  6  //
  7  
  8  import SwiftUI
  9  
 10  struct EnhancedSidebarView: View {
 11      @Binding var selectedView: SidebarItem
 12      
 13      var body: some View {
 14          VStack(spacing: 0) {
 15              // Header with App Title
 16              VStack(spacing: 8) {
 17                  Image(systemName: "magnifyingglass.circle.fill")
 18                      .font(.system(size: 32))
 19                      .foregroundStyle(.blue.gradient)
 20                  
 21                  Text("SEO Tracker")
 22                      .font(.title2)
 23                      .fontWeight(.semibold)
 24                      .foregroundColor(.primary)
 25              }
 26              .padding(.top, 20)
 27              .padding(.bottom, 24)
 28              
 29              // Navigation Items
 30              List(SidebarItem.allCases, selection: $selectedView) { item in
 31                  NavigationLink(value: item) {
 32                      HStack(spacing: 12) {
 33                          Image(systemName: item.icon)
 34                              .font(.system(size: 16, weight: .medium))
 35                              .foregroundColor(.primary)
 36                              .frame(width: 20, alignment: .center)
 37                          
 38                          Text(item.rawValue)
 39                              .font(.system(size: 14, weight: .medium))
 40                              .foregroundColor(.primary)
 41                          
 42                          Spacer()
 43                      }
 44                      .contentShape(Rectangle())
 45                  }
 46                  .listRowInsets(EdgeInsets(top: 6, leading: 16, bottom: 6, trailing: 16))
 47                  .listRowSeparator(.hidden)
 48              }
 49              .listStyle(.sidebar)
 50              .scrollContentBackground(.hidden)
 51              
 52              Spacer()
 53              
 54              // Footer Info
 55              VStack(spacing: 4) {
 56                  Divider()
 57                      .padding(.horizontal)
 58                  
 59                  Text("Version 1.0.0")
 60                      .font(.caption2)
 61                      .foregroundColor(.secondary)
 62                      .padding(.vertical, 8)
 63              }
 64          }
 65          .background(.regularMaterial, in: Rectangle())
 66          .navigationSplitViewColumnWidth(min: 180, ideal: 200, max: 220)
 67      }
 68  }
 69  
 70  // Alternative: Noch minimalistischere Version
 71  struct MinimalSidebarView: View {
 72      @Binding var selectedView: SidebarItem
 73      
 74      var body: some View {
 75          List(SidebarItem.allCases, selection: $selectedView) { item in
 76              NavigationLink(value: item) {
 77                  Label {
 78                      Text(item.rawValue)
 79                          .font(.system(size: 13, weight: .medium))
 80                  } icon: {
 81                      Image(systemName: item.icon)
 82                          .font(.system(size: 15))
 83                          .frame(width: 18, height: 18)
 84                  }
 85              }
 86              .listRowInsets(EdgeInsets(top: 4, leading: 12, bottom: 4, trailing: 12))
 87          }
 88          .listStyle(.sidebar)
 89          .navigationSplitViewColumnWidth(min: 160, ideal: 180, max: 200)
 90          .navigationTitle("SEO Tracker")
 91      }
 92  }
 93  
 94  #Preview("Enhanced Sidebar") {
 95      NavigationSplitView {
 96          EnhancedSidebarView(selectedView: .constant(.dashboard))
 97      } detail: {
 98          Text("Detail View")
 99              .frame(maxWidth: .infinity, maxHeight: .infinity)
100              .background(.quaternary)
101      }
102      .frame(width: 1000, height: 700)
103  }
104  
105  #Preview("Minimal Sidebar") {
106      NavigationSplitView {
107          MinimalSidebarView(selectedView: .constant(.dashboard))
108      } detail: {
109          Text("Detail View")
110              .frame(maxWidth: .infinity, maxHeight: .infinity)
111              .background(.quaternary)
112      }
113      .frame(width: 1000, height: 700)
114  }