Okay, let's start working on notifications. So I want to have a bell icon here in the top right, and whenever the user clicks that, I want to show them their notifications for the application. Now for this app, the notifications will be the comments for the ideas. So very similar to apps like YouTube, where we have this bell icon here in the top right, and then it shows the notifications for our videos. So let's go ahead and work on that. So we'll make use of Laravel's notifications feature, which has a database driver. But in this video, we'll just focus on the styling. So I don't have a set design for this, but we'll just copy what YouTube has with the

But in this video, we'll just focus on the styling. So I don't have a set design for this, but we'll just copy what YouTube has with the avatar on the left and some content next to it and the timestamp underneath. Okay. So let's put the bell icon next to the logout button. So that should be in our layout. So app.blade.php, and there should be a form here with the logout functionality. There it is. So let's put it right underneath that. So we want it within the @auth directive as well, because we only want to show notifications.

So let's put it right underneath that. So we want it within the auth directive as well, because we only want to show notifications if the user is logged in, and I'm logged in right now. So let's add it here. So let's just see if this is the right place. Bell icon. Okay. So I want it next to it. So how about we make it flex? So let's make this flex instead.

So how about we make it flex? So let's make this flex instead. Will that work? So let's put it on this container. Actually, no, we have to make a new container here. So let's put that back. And within the auth directive, we'll add a new div here. That's flex and items-center. See if this works. So we'll put that in here.

And let's see if this renders okay. Back to our app. Okay. So that looks decent. Let's just change the size of it. So I have it as height of 8 and width of 8, and let's also add a color to it. So text-gray. I don't know, 500 maybe. Let's see if that looks okay. Maybe a bit lighter.

So let's make it a div. Let's make it absolute. Round it full. So it's a circle. bg-red. text-white. I have it as extra-extra-small text. I have it as width-6, height-6, and let's just see how that looks for now. Say 8 or whatever. And I believe I have to make the div relative.

Say eight or whatever. And I believe I have to make the div relative. So let's say class equals relative, and let's see where that renders. Okay. Let's center the text within the circle before we position it. So let's say flex justify-center items-center. That should put it in the middle of the circle. Okay. And let's just see if it actually goes to the top right. If I do top-0, right-0.

And let's just see if it actually goes to the top right. If I do top: 0, right: 0. Okay. Actually, I want to put the relative class on the button instead of the div. So let's grab this. Let's put it on the button instead. Does that change anything? Okay. It doesn't. I think we have to nudge the badge over.

Now let's work on the actual pop-up. Let me click the button. So let's do that. So I'm going to make it an unordered list underneath the button here. Actually, let me just grab something from over here because it's going to be very similar to this. So that is an Idea show. Let's look for an unordered list. And let's just grab everything here. Okay.

And let's just grab everything here. Okay. Let's just see if it renders correctly or somewhat correctly. And I have some variables here, which I don't need. So let me just clean some of this up. I don't need this. Let's just do one here. So we'll remove that one. Remove this. Actually, that's the only one.

Does it render okay? And nothing is showing. I think because we do have x-cloak on it, which hides it by default. So we'll add the Alpine in a second. Okay. So there it is over there. So I think I have to put the relative on the actual div. So I had it on the div originally, but moved it here to the button. Let's put it back there. Okay.

So it does. So I'm going to make it a bit wider here. I'm going to add some custom width values instead of width 44, which we have for our dialogues. Let's say width 76, which I believe I don't have. Actually, there is one. So that should work. Okay. It's wider now, but I actually have it even wider for medium and above. So 96 is what I have.

And I think we don't need any of these. Does that still look okay? And it looks fine and it did move it down. So that's good. Okay. So now let's add the content for the notification. So it's just an avatar and content on the left. So let's do that in here. So it needs to be a flex container. So let's make it flex here.

So it needs to be a flex container. So let's make it flex here. And the first flex item is going to be the avatar image. So let's add that. Actually, let me just paste that in because I have a default avatar here. Okay. So I pasted this in. It's just a default gravatar. And we have rounded excel and a width of 10 and a height of 10. Okay.

Okay. So for the content, let's put span here and say font-semi-bold. This will be the username. So let's just put me in here and say commented on the Idea name. So again, this will be a span semi-bold. Okay. This is my Idea. And then we can say colon. And then this will be the actual comment. So let's just wrap that in a span as well.

And let's give it a margin top. Okay. So now if I duplicate this list item a few times. So let's say three times or three more times, that looks pretty good. Now I want to give this a max height. So it scrolls after it reaches a certain height. So that would be on the ul. So where's that? I have it as max height. I think I have 128.

I have it as max height. I think I have 128. So I believe I need to add this to my Tailwind config. Say width. Sorry. I meant spacing here. Let's go into our spacing. Let's add 128. And 128 divided by 4 is 32. So 128, 32 rems.

It doesn't work within quotes. Lorem 40. Okay. So this is too long. Actually, it's not bad. Let's try 100. Okay. Like I said, I just want to add a line-clamp here. So if it's too long, it doesn't show everything. So all we have to do is add class="line-clamp".

So I also want to add a mark all as red button on the bottom here. So let's do that. So after our last list item, so that would be this one, I believe. Let's add one more here, which is going to be that button. So let's give it a border-top. A border-gray-300 is what I have. And it's centered. Okay. And let's make it make it a button, actually, instead of an anchor link should be a button. Actually, let's make it an anchor link for now, because I want to copy what I have here.

Okay. Now let's make use of Alpine to show and hide this dialog like we've been doing for these other ones here. So let's just start with the div we have up here, or the ul. Actually let's put it on the div here. So we can say, actually let's put it on the front, x-data equals isOpen false. And then for the button, we can do @click equals isOpen is not isOpen. And for the unordered list, let's just grab what we have in here. So it's going to be all of this stuff. Let's grab that.

So as always, let's make a commit here. This is episode 59. git add, git commit, episode 59. Say notifications, styling.