Dropdown Component (iOS UIMenu) | Hotwire Native Bridge | SupeRails #215

Hello friends. In the previous episode, we added action sheets to our Hot Via native application. Basically, uh, action sheets are, uh, native, uh, uh, models. Hello friends. In the previous episode, we added action sheets to our Hot Via native application. Basically, uh, models with different, uh, action links and, uh, buttons that you can click and, uh, that would, uh, be able to perform the default behaviors that you would want. For example, you'll be able to hide the edit and destroy action buttons from your show pages in the application and render them in a native model. So one way to open this native model we had with the the H TM L link to open the menu, and another one was with the having a native, uh, button inside the UI navigation bar to open the menu. Now again, uh, this native element in the top is called a UI navigation bar. Now, another way to add the, uh, native actions, uh, dropdown would be to use the UI menu element. So the Google UI menu, it'll give us this example. You see, it would be able to have not, uh, screen blocking, uh, uh, action sheet on the bottom, but, uh, drop down with the actions on the top. So for some use cases, you would want to use, uh, uh, action sheets. For other use cases you would want to use. Uh, UI menu. Now let's try to introduce your menu into our existing application. And going back here, I have just a basic rails application running where I have already installed native, uh, with input maps. And, uh, the native application I'm running here in the Xcode is, uh, from native iOS GitHub repository. I'm just running the demo application, uh, with the, uh, demo Xcode project, uh, run file. So, uh, here I opened the app, I just clicked the run, and here I have the native application running and, uh, it is serving my local host, uh, inside the native wrapper. So anyway, in the default, uh, example application, we have this, uh, folder with bridge components. We have a form component, many component and overflow, many component, and we're going to add another component. Let's name it enough component. Let's, uh, go to our bridge folder file on you, uh, nav component. And now I'm not going to kind of create this component from Xero. The cool thing about, uh, native is that you don't really need to know a lot of swift to be able to, uh, run your web application in the, uh, native wrapper. So we are just going to copy an existing the nav component, and I have it here. So here's my article. I will leave a link in the description to this video where you can copy it from. So I'm just going to copy this nav component. Okay. And I need to also say in the scene controller that I'm using this n component. So here where I have defined register bridge components, I will also say nav component itself. Okay? Now I will, uh, restart the application and, uh, in the web app, we can, uh, check if, uh, uh, the web app sees that the n new bridge component was registered in the iOS side. So to see it, you could, uh, go to application h TM L and, uh, say equals request dot referrer. Let's load the page. Um, something isn't loading correctly. Let's see. I will just type something else. Okay, yeah, I don't want to request referral. I want to request that user agent. Okay, let's, uh, try again. Yes. So here you see we have bridge components and uh, we have also our new registered nav component. So our web app sees the nav component. Now on the web app side, I need to add the stimulus controller that is going to communicate with the native nav component. So inside the geos scripts controller bridge, I will create a nav controller Gs. And again, I'm going to copy the controller and paste it here. And finally, we need to, uh, use this, uh, n controller Sunday in our H TM L. So again, let's try using it for our, uh, visit profile page and uh, uh, lookout button. So, uh, here again, I have an example with, uh, applying this stimulus controller. Let's, uh, just see if it works. And then it will go through the H TM L code. So I will, uh, refresh the page and you see, voila, we have this native button. And, uh, when I click the button, we have, uh, a dropdown top on either profile or sign out page. Now, let's have a look here. So, uh, on, uh, a wrapper on a DV initialize, the stimulus controller, you see the synex is a bridge slash slash nav, not just bridge nav, uh, because, uh, nav controller is nested inside the bridge folder. Then we have the bridge sides, right? So, uh, it can be either left or right. Uh, we have the bridge image. It is personal circle, but, uh, if you go to SF Symbols app, you have a collection of all available, uh, icons in the iOS that you can use outta the box. So, uh, here we're using Person Circle, and then we have two links to profile and to sign out again, on the links, we have, uh, the breach nav target. We have, uh, targets item inside our stimulus controller. So we apply them on the actual links and to the links. We also give, um, unique images. Uh, let's, uh, try another syntax. So you can type it like bridge, uh, dash nav target. So here are two different syn to solving the same, uh, problem. Both are valid. And you see we have link to sign out through method delete. Now if it make it button two, let's try making button two. Uh, just method delete, and we don't need Toru. Let's just make an A button. I will refresh. I will even try to restart the app and see if, uh, the button works. So see now the component isn't trended and the component isn't trended because it, uh, accepts on the links not, uh, buttons. Let me refresh without the button. And you see it works. So this is a scenario where you would want to have link to turbo method. Uh, that is not get, uh, and button will not work. Uh, let's comment out the button. And, uh, finally, we would want to have this links available only if, uh, the user is signed in, only assigned in user should have a link to sign out, right? So let's say, uh, if a user signed in, then display these links. Okay, now let's try signing out. And, uh, yeah, we still have this icon visible. Uh, maybe it was sketched somewhere. Let's try starting the application once scan. Okay, so now I'm not signed in. I will, uh, sign in. Okay, here we have that native, uh, uh, button. Folks, let's click around. Let's now, uh, uh, sign out. And you see we don't have the native button because it isn't trended in the H TM L markup. So yes, that's basically it. That's how you can add, uh, uh, native UI menu. Thanks for watching and see you in the next one.