# Turbo Native 5. Conditional Rendering (only Web/only Mobile) #194

- URL: https://superails.com/posts/turbo-native-5-conditional-rendering-css
- Published: 2024-09-08
- Duration: 16:36
- Access: free
- Topics: iOS, outdated
- Playlists: Hotwire Native

use html title, conditional rendering with turbo_native_app? helper: https://github.com/corsego/tinder/commit/a5b88ae1d606008d851da2d7b633d9cfebae2862
display app name in title only for Web: https://github.com/corsego/tinder/commit/8e0d7a09b862d3eaf7347ff62de6687550350d6e
tailwind turbo-native variant:
https://github.com/corsego/tinder/commit/f7738d4efc16280f37a536dde49535f78ce8bbba

## Transcript

Hello friends. So in the previous episode, we made the log in logout, uh, and basic navigation flow feel, uh, quite nice in our application. And now let's do some more improvements. So, um, first of all, you see I go to the homepage. I go to the dashboard, and uh, I have the page title visible here, but uh, I just have the app name written on top. And what if we want to change the text, uh, based on what page we are on? So how can we do this? Uh, you see here in, uh, super Rails, I have the application name and the page title here on, uh, this application that we're building. I have just the application name on each, uh, tab. So you see on Superl I navigate to tags. I have, uh, tags in the title playlists. I have playlists in the title. And here in the application you have just the, the application name via. So, so if we go to our application, h, tm, LERB have have the meta, well, not just meta, but the title, uh, H TM L tag. And we have, uh, Tinder Rails, the name of the application written here. If I change it, let's say I put one in the end, I refresh here, we have a one in the end, I go to our mobile application. I refresh it, I have a one at the end. And we want to conditionally display different titles based on which page we are looking at. So, uh, to do this we can pass in the content for title. You see we already have this outta the box and they create a new application. So let's go to our homepage. Uh, it is static index and we are going to set our own title for this page. Let's, uh, say content four, title, coma, homepage. Okay, I will save, I will go to the web application. I refresh, I go to the homepage. You see we have the homepage in the title I go to dashboard. We have, uh, uh, just the basic application name in the title because we don't manually set the title. Let's go to our mobile application. I will refresh, go to the homepage, and here you see we have homepage instead of the application name in the title go into dashboard. We can have the application name. So let's say the title for our, uh, for our dashboard, go into dashboard. Title will be dashboard. Okay, refreshing you into dashboard. You see we have the dashboard in the title Looks good. Let's do something similar for some other pages. For example, here we have, uh, the edit my account page. It is edit User here. So let's uh, go to this, uh, registration edit. Here we have this edit. Let's ensure that it is it. I'll just put something. You see we have one to two. Okay. And, uh, here we can say, uh, content for title. And here I will just put, uh, the same kind of text edit. Okay. Refreshing. Okay. Edit user. You can better maybe say edit my account. You refreshing. Okay, we have Edit My Account. So now they are leveraging this, uh, uh, page titles that we get in Terminator applications out of, uh, the box looks. Uh, okay, we can do the same for sign in. Uh, sign up, let's try doing it. So log in, have, have login here. I will, uh, go to sessions new and I will add log in here. Okay. And for registration, I will do something similar. Registration new, and here I will have sign up. And uh, it's really good to do it not only for the mobile pages, you can also do it for the, uh, app pages itself. Uh, on the web it would be good to update the browser tab name based on what page you're looking at. Okay, looks, uh, fine. But uh, you see here in mobile we have sign up in the page title. Then we have sign up here. Same with the login. We have it in the page title and we have it here. And we don't want to like have this login text, render the device. It's just like a duplication. So, uh, we would want to hide this login text if we are looking at this page on mobile. Now, the simplest way to do it for be using the TUR native app helper that we demonstrate. So we have this check Turbo native app question mark. And if I refresh here, you see the same tool. And for our web application, it's same false. Where do we actually get this help from? So we go to GitHub, hot wired, durable rails, and we go to navigation helpers, navigation rp. Yeah, we have this help method terminate app, and basically it checks, uh, if the request user agent has the text terminate in its, uh, name. Let's actually try displaying the request user agent, uh, in our application. So, uh, let's have a look on the VAP used. We have Mozilla, uh, safari. I'm opening this page in this very browser. And if we have a look at the user agent on mobile here, you see, uh, we have, uh, tur native iOS text written here. So if I was opening an Android application, it would be Termin native Android. And actually we get this, uh, helper thanks to this Turbo navigator branch from, uh, uh, turbo iOS repository. So, uh, we know that we're open this application, uh, on mobile and we have this, uh, helper that is true or false based on whether we are opening it in mode in mobile. So using this, uh, termin native app helper, we can, uh, have conditional rendering logic and we can also have conditional logic, not just in rendering, but in controllers, for example. So, uh, let's go to our sessions new and let's say, uh, unless termin native app then render this, uh, login text. Okay, let's, uh, refresh. So see now we're not changing this, uh, login text here, and we can do the same for some other pages. So for registrations added here, I, uh, will display edit only if it's a web application. And for registrations new like this, so going to register, we don't have this signup text here. We have it only in the header, but if we open it in, uh, web application, we have the edit user or log in, sign up, text displayed in line here. So it is, uh, some basics of conditional rendering. Let's, uh, save our changes. Um, use title, use HTML title and, uh, conditional rendering with, uh, termin Native App Helper. Okay, let's just have another quick look at, uh, the code changes. Looks cool. Now, um, let's see, you see here in the f we have just signed up. We don't, uh, have like name of the application. I also like having the name of the application displayed the, like here I have the page title and here I have the name of the application. Let's try displaying the name of the application in the title, but only for the web application. 'cause you don't want to have like the name of the application just taking up space here. So, uh, it'll be quite simple using the BER native app helper. I will just have, uh, uh, content for, yeah, let's, uh, have, lemme think. Maybe we can have one for title slash Tinder rails like this. I will refresh here. Okay, we have Tinder rails displayed here. We also have Tinder rails displayed. Let me display this only conditionally if this is not a TUR native app app. So, uh, we can have another condition. So they will display this string, uh, unless turbine native app. Okay, let's, uh, refresh our web application. So in the web application we are showing the application name and, uh, here we are not showing the application name. So looks, uh, good. Uh, let's say we'll save our changes saying, uh, display app name in title only for web. Okay, it looks quite good. Now, uh, so far we are hiding or showing HTML based on this terminated app helper, but sometimes to make the flow look better, you would want to do it with CSS so you don't have conditional CSS and using CSS hide or show something only on termin native or only on the web application. So, uh, to do this, we can go to our tail vendor config js and add the separate variance. For example, here we would have like, uh, instead of hiding this edit button with, uh, this if else, we could have something like gloss tur, ball native hidden, uh, or non turbo native block. So how can we make this kind of synex work? Uh, first of all, we'll go here and I think we need to add the cons plugin, relevant plugin. And here inside plugins we will say plugin function, add variant. And here we will add add variant, uh, turbine native. And, uh, this variant will be added if, uh, in the HTML we have data TUR native. Uh, let's see if, uh, we can now apply this. So let's go to our application, H tml, ERB. We'll add the data TUR native to our HTML tag. Let's do it like this, for example. And here we can try rendering something conditionally. Let's say, uh, if, uh, we have TERMIN native set, then we will have, uh, another color of the background. So cloth, uh, turbo native background, whatever. Let's try on the web. Okay, it is broken. Uh, let's try here it is also broken. Uh, let's try, uh, setting this termin native to true or just setting this termin native only if, uh, we are actually opening a mobile application. Let's first try false and see if, uh, engine changes. Uh, let's try, um, like this, it is still here. Let's try removing data. tur native, and now it's not, uh, colored anymore. So let's say, uh, we'll add the data tur native only if, uh, we, if it is a termin native app. So, uh, uh, like we can say data and here it would be, uh, let's, uh, how can we name this condition? Let's name this, uh, data platform identifier. Okay? And let's set this, uh, platform identifier. So, uh, let's go to our application helper. And here we will, uh, say dev platform identifier. And here we will say turbo native. Uh, if this is a termin native app, okay, so, uh, it should be like just an empty data attribute, uh, on non-term native. And in terminate application, it should be data termin native. Let's refresh here. Let's, uh, refresh here. So you see, uh, in the termin native application, we have this style applied and in the non-term native application, if we don't have it, uh, applied looks, uh, quite good. Now let's try another helper, uh, for things that'll be available only on desktop applications. So let's say non-term native, non-term native. And here will have h TM L not data tur native. Let's try to see the folks. I'll just refresh this page. And, uh, let's go, let's say to our home index. And here I will say, so turbo native background green and, uh, non-term native background. Uh, yellow 500. Let's refresh, go into the homepage. So, uh, I might have made a mistake here, like if I got a coma, yes, if I forgot a coma, be refreshing. It doesn't seem to be applied. Let's see. It looks like I made a st syntax mistake here. So H TM L knot, and this should be in braces, something like this. Okay, yeah. So now it seems to be applied. So, uh, you see on the web, this has a yellow background. Let's go back to application HT ml. Here we have, uh, oh yeah, it was in our index. So in non-term native applications, we have this with a yellow background. And in Terminator applications we have it with a green background. Okay? So, uh, like this, you can have, uh, conditional, uh, conditional CSS with, uh, NT based on, uh, ti a mobile application or TI of application. Okay, I think that's it for this episode. So, uh, we worked on conditional, uh, rendering and conditional styles and, uh, page titles for the web and for mobile. Thanks for watching and see you in the next one.