How to Add Text and Bar Animation in MenuBarExtra Similar to Little Snitch?

Little snitch has a menu bar status as so:

We're trying to do something similar where we have our own text and then vertical bars rather than horizontal. The main issue right now is figuring out how to add text to our status icon in a VStack as so. When I try using Text, the font does not go this small and regardless of if I use VStack, only one Text element shows up.

This is similar question is 75659816.

Open to using NSStatusItem. I have some resources to read and I'll add them for everyone else.

This is my current code:

struct BandwidthImageOverlay: View {
    var body: some View {
            HStack {
                Text("300 MB/s")
                    .font(.system(size: 1))
                    .padding(6)
                    .foregroundColor(.white)
                Text("200 MB/s")
                    .font(.system(size: 1))
                    .padding(6)
                    .foregroundColor(.white)
            }.background(Color.black)
            .opacity(0.8)
            .cornerRadius(10.0)
            .padding(6)
        }
}

struct ClientApp: App {
    var body: some Scene {
        MenuBarExtra {
        } label: {
            Image(CUSTOM_IMG)
                .renderingMode(.template)
                .overlay(BandwidthImageOverlay())
        }
    }
}

I ended up using NSStatueItem like in https://multi.app/blog/pushing-the-limits-nsstatusitem combined with the submitted answer.

I attempted to recreate the Little Snitch menu bar. I hope this is useful for you.

struct ContentView: View {
    var body: some View {
        ZStack {
            HStack {
                VStack(spacing: 2) {
                    HStack(spacing: 5) {
                        Text("0.2 KB/s")
                            .foregroundStyle(.pink)
                        ForEach(1..<6) { i in
                            if i==1 {
                                Rectangle().fill(Color.pink)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            } else {
                                Rectangle().fill(Color.gray)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            }
                        }
                     }
                    HStack(spacing: 5) {
                        Text("0.1 KB/s")
                            .foregroundStyle(.blue)
                        ForEach(1..<6) { i in
                            if i==1 {
                                Rectangle().fill(Color.blue)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            } else {
                                Rectangle().fill(Color.gray)
                                    .cornerRadius(5.0)
                                    .frame(width: 4, height: 10, alignment: .center)
                            }
                        }
                    }
                }
                
                Image(systemName: "checkmark.circle")
                    .resizable()
                    .scaledToFit()
                    .frame(width: 20,height: 20)
            }.padding(5)
            .overlay {
                Rectangle()
                    .fill(.gray).opacity(0.4)
                             .cornerRadius(5)
            }
        }

    }
}

Preview: