Add Header Nav Component to the Property Management Application
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi welcome back to the report operability. And this guy we're going to be styling the newsletter component containing components. So in the design you're going to navigate to our request or requests for our newsletter here and we'll get started. So first thing we need to do is add in a higher component hybrid component that will allow us to have some sort of navigation. So let's go ahead and get started on that. Let's head over to our out here and create a component each wifi directory and call it at header now dodgiest so this is going to give us our are now Gieschen kind of bottom that we're looking for here. So let's go ahead and this is going to obviously have a little bit of functionality is low and basically the end of this component is to click on this and then it changes around to each other when we click on and then whichever one in it's going to stifle that one. So let's knock out the functionality as quick as we can and then the next time stylize. So for newsletter to start you will start with the nephew. So it's going to be similar to our border. So let's just copy this component out had a and thrown out had an. And it's always seemed to thrive on Bonum here for export and we want to be seen as not props. Now we need a we need a div that will show each of our each of our to our newsletter and our whatever it's called the requests. [00:01:43][103.1]
[00:01:44] So let's go ahead and give this space and let's just call this now and then in here we want to say that while we can be that and then we just want to put our items in the tanks because we want to be able to click them and navigate to a new week. So let's go here and it's giving me time. And we say import me from react and just say you know it's here we closed off here and let's say two is equal to flash newsletter and let's copy this piece so we can say to record support requests or support request. Now what we want to do is an ancient text that we can see. So let's say spam is good to see. We quasi say newsletter and then copy and then try to piece it in the same request. OK. Now what we want to do is check out our browser while we have to import it somewhere near me. Yeah. So let's go to our US News component and let's actually use this agency here and explain that. You know it's good news or not. Yes. And it's imported so import it from Sosh hawk Slash. I did not have my bag. OK. I'm struggling. There we go. Now have access to it right now with you. So let's see down here. Let's just say forget about let's just say newsletter now has a newsletter you should be good to go. Let's check and see if it's in your view on the page. And we have requests News Notes know is the functionalities in there their requests and we have no way to get back because we don't have the staff in our city work us as well. [00:04:12][147.6]
[00:04:12] So it's going into our support request file. Let's go to some requests. Yes and important. So say pressing on the news just move this link right underneath connect and bed and then put it right here and then put in a box right here just to give us some structure here. Me say import now from flash it you'll see sunshine heroin. You know I just want to use it down here like we did in the last file Forsayth. First question is equal to license for quest. Make sure it's the support request and then we can just request that came here. I actually never needed to do it. That should be good. Let's go and check out the browser and see we have all right we have it and it's Firkins functional super simple since we have a router set up has been made real easily and we need to read this component once we can use it in two different places really needs to meet our code and then in the next Kaththi will silence its status. No it's not in the terminal here. It can be opened it up with that to get comment or see it to digest news like catching the next guy. We will throw understands the science Kanchan. [00:04:12][0.0]
[250.7]