2.6 Using Conditions to Dynamically Show or Hide Content

In this lesson, we are going to focus on conditions, and conditionally showing or hiding content inside of our components. And we're going to simulate a navbar. So the idea is that we are writing a single-page application. And we are going to show different links in the navbar, based upon whether or not the user is authenticated. So let's go ahead and create that file, Navbar.svelte, but let's not do anything here yet. Let's go to our app component, and let's go ahead and import that. And then we will talk about how we are going to determine whether or not the user is logged in. I know that that's kind of backwards, well, it's backwards based upon how you would write this. But I consider it to be backwards, because I tend to start with the code that I want to write, and then I implement all of that code. And I find that for me, I end up with cleaner code. Because if I start with what I think I need, I end up with a lot of extra code that I actually don't need. So as far as our navbar is concerned, the navbar really doesn't care where the data comes from, that determines whether or not the user is authenticated. It just wants that data, so that it could then render the appropriate links. So we are going to supply the navbar with the user information. And of course, this user object does not exist, so let's go ahead and create that. Now, of course, this would normally come from the server, so we would make an HTTP request. It would respond back with a JSON structure, which we would then convert into an object, which we would then pass to the navbar. But in this case, let's just be lazy, [LAUGH], and let's create one here. So we'll have a property called isAuth, and we will check that to see if the user is authenticated. So inside of the browser, we don't see anything, which is expected, because we did not type anything inside of our navbar. And as far as the markup is concerned, I'm not going to use CSS classes, because the style that we define inside of a component is scoped to this component. So if we have a rule for a div element, it's only going to work for this component, so that's a nice thing. All right, so we'll have a div, a ul, an li, and then let's start with a link for logging in. So the default is going to be logging in, so the user is not authenticated. And since we have that prop, let's go ahead and define that, so that I don't forget to do that later. So we want to export let user, and we can initialize this as just an empty object. I mean, yeah, we could define isAuth and things like that, but I don't want to do that. Primarily because, what if the data that comes from the server changes, as far as the JSON structure is concerned? Well, then we have to come in here, we have to make whatever change we need to this default user. And if we just have an empty object, that makes things a little bit easier. So now that we have this user object, we need to use it to determine whether or not we want to show the login link. And of course, we only want to do that if the user is not authenticated, so we need an if statement. And just like the each loop, we can say #if, and then we would have our conditions. So in this case, if we don't have an authenticated user, then we want to show the login link. And then we want to close the if statement with /if. So as far as the syntax is concerned, it's a mix between the templating syntax for switching into an if statement. But then we have a normal JavaScript condition. So if we wanted to also check to see if another property was something, then we could do that. So with this in place, we should be able to go to the browser, and we see our login. Although, let's make this look a little pretty. I do have some CSS here, so I'm going to paste this in, because it is rather simple. But you don't wanna see me type and talk about this, you can look at this and know what's going on. So if we go back to the browser, there we have our navbar. But if we change the isAuth to true, well, then that link should go away, because the user is authenticated. We should be seeing another set of links here. So we need an else here, and we do that, not with a #else. I mean, that's what I went to at first, instead it's :else. And then, of course, anything that is in between the else and the closing if is the else block. So let's copy what we have for the login, and let's have three links. The first will be the Dashboard, the second will be, let's have Profile, and then we will have the Logout. So of course, if we go back to the browser, we see our three links, because we are authenticated. But if we are not authenticated, then we have just the Login link. And so, there we have conditions inside of our component, it's very straightforward. In fact, it took longer to set everything up than it did to actually make the decision and display the individual links. But at least we are set up for the next lesson, where we will talk about binding styles to our elements.