List with NavigationLink

struct RNode: Hashable, Identifiable {
    let id = UUID()
    let title: String
    let icon: String
    var nodes: [RNode]?


    //DART Meadow

    //Jounal

    //Research
    static let elements = RNode(title: "Elements", icon: "flame")
    static let sigcothian = RNode(title: "Sigcothian", icon: "star")
    static let dartedge = RNode(title: "DART Edge", icon: "star")
    static let orbit = RNode(title: "Orbit", icon: "star")
    static let mass = RNode(title: "Mass", icon: "star")
    static let volume = RNode(title: "Volume", icon: "star")
    static let weight = RNode(title: "Weight", icon: "star")
    static let density = RNode(title: "Density", icon: "star")
    static let atm26 = RNode(title: "ATM 26", icon: "star")
    static let breakvelocity = RNode(title: "Break | Velocity", icon: "star")
    static let gas = RNode(title: "Gas", icon: "star")
    static let liquid = RNode(title: "Liquid", icon: "star")
    static let solid = RNode(title: "Solid", icon: "star")
    static let crystalline = RNode(title: "Crystalline", icon: "star")
    static let solartalatm = RNode(title: "Solartal ATM", icon: "star")
    static let nozzle = RNode(title: "Nozzle", icon: "star")
    static let decibel = RNode(title: "Decibel", icon: "star")
    static let catalyst = RNode(title: "Catalyst", icon: "star")
    static let phedge = RNode(title: "PH Edge", icon: "star")
    static let bioedge = RNode(title: "BioEdge", icon: "star")
    static let stealthedge = RNode(title: "StealthEdge", icon: "star")

    //Navagation

    //Logistics

    //Simulations
    /*
        .init(id: 1, title: "DART Meadow", imageName: "sun.max.fill"),
        .init(id: 2, title: "Journal", imageName: "note.text"),
        .init(id: 3, title: "Research", imageName: "flame"),
        .init(id: 4, title: "Navigation", imageName: "moon.stars.fill"),
        .init(id: 5, title: "Logistics", imageName: "cube.transparent.fill"),
        .init(id: 6, title: "Simulations", imageName: "chart.pie.fill"),
     */
    // subcontent
    static let dartmeadow = RNode(title: "DART Meadow", icon: "star")
    static let research = RNode(title: "Research", icon: "star", nodes: [RNode.elements, RNode.sigcothian, RNode.dartedge, RNode.orbit, RNode.mass, RNode.volume, RNode.weight, RNode.density, RNode.atm26, RNode.breakvelocity, RNode.gas, RNode.liquid, RNode.solid, RNode.crystalline, RNode.solartalatm, RNode.nozzle, RNode.decibel, RNode.catalyst, RNode.phedge, RNode.bioedge, RNode.stealthedge])

}
enum DraggableState {
    case inactive
    case pressing
    case dragging(translation: CGSize)

    var translation: CGSize {
        switch self {
        case .inactive, .pressing:
            return .zero
        case .dragging(let translation):
            return translation
        }
    }

    var isPressing: Bool {
        switch self {
        case .pressing, .dragging:
            return true
        case .inactive:
            return false
        }
    }
}




struct ContentMenu: View {
    @GestureState private var dragState = DraggableState.inactive
    @State private var position = CGSize.zero
    let nodes: [RNode] = [.dartmeadow,.research]
    /*#-code-walkthrough(2.columnLayout)*/
    let columnLayout = Array(repeating: GridItem(), count: 1)

    /*
    let allColors: [Color] = [
        .pink,
        .red,
        .orange,
        .yellow,
        .green,
        .mint,
        .teal,
        .cyan,
        .blue,
        .indigo,
        .purple,
        .brown,
        .gray
    ]
     */


    var body: some View {
        VStack(alignment: .leading) {
        HStack(alignment: .top) {
        VStack(alignment: .center) {
            Image("Cotharticren60")
            .font(.system(size: 28))
            //.bold()
            .opacity(dragState.isPressing ? 0.5 : 1.0)
            .offset(x: position.width + dragState.translation.width, y: position.height + dragState.translation.height)
            .animation(.easeInOut, value: dragState.translation)
            .foregroundColor(.blue)
            .gesture(
                LongPressGesture(minimumDuration: 0.5)
                    .sequenced(before: DragGesture())
                    .updating($dragState, body: { (value, state, transaction) in

                        switch value {
                        case .first(true):
                            state = .pressing
                        case .second(true, let drag):
                            state = .dragging(translation: drag?.translation ?? .zero)
                        default:
                            break
                        }

                    })
                    .onEnded({ (value) in

                        guard case .second(true, let drag?) = value else {
                            return
                        }

                        self.position.height += drag.translation.height
                        self.position.width += drag.translation.width
                    })
            )
        }
        }.frame(
            maxWidth: .infinity,
            maxHeight: 100, alignment: .center).background(.red)

            VStack(alignment: .center) {
                    List(nodes, children: \.nodes) { row in
                        ZStack(alignment: .leading){
                            RoundedRectangle(cornerRadius: 4.0)
                                .aspectRatio(4.5, contentMode: ContentMode.fit)
                                .foregroundColor(.blue)
                                .shadow(radius: 3)
                            HStack(alignment: .center){
                                Image(systemName: row.icon).padding(.leading, 8).padding(.trailing, 8)
                                Text(row.title)

                                NavigationLink(destination: DETEView()) {
                                    Text(RNode.elements)
                                }
                                NavigationLink(destination: SigcothianView()) {
                                    Text(RNode.sigcothian)
                                }
                                NavigationLink(destination: DARTEdge()) {
                                    Text(RNode.dartedge)
                                }


                            }
                        }
                /*
                    .onTapGesture {
                        //self.selectedItem = RNode.node
                    }
                 */

            }.onAppear {
                // Set the default to clear
                UITableView.appearance().backgroundColor = .clear
            }
            }
        }.frame(
            maxWidth: .infinity,
            maxHeight: .infinity, alignment: .leading)
        .background(.gray)




    }

}