The left vertically and if you want to learn how to create this design from scratch i have a video on that you can go ahead and check that out i will leave the link in the description of this.
Video and i will also leave the link of the source code of this design so let's get started all right so this is the source code of.
Our design and the first thing we will do is we will make all these stories one below the other so we have to change the flex direction if we go to the index.html file.
Here we can see we have this uh division with the class of stories container and in that we are adding this division with the class of content in.
The javascript so here we can see we are creating this division with the class of content and we are adding that to the stories container division.
Set it to column and now you can see all these stories are one below the other now the next thing we need to do is we need to decrease the width of this stories.
Container element so let's right click over here and click on inspect and let's try a bit so let's select storage container let's decrease the width a little bit.
And let's see what is the correct width and i think a width of 162 pixels looks good and we'll also add a fixed height so let's type height.
And let's try 600 pixels and i think that looks alright so let's copy this styles from here and let's add it to our css.
So let's add it over here and now we can delete this width from here so now we can see we have these stories displayed over here now the next thing.
We need to do is we need to scroll Wesdigital
Vertically in the beginning we had set it to scroll horizontally so let's go back to the css and we have to set the overflow y instead of overflow x so.Let's change this to overflow y and now we can scroll down all right now the next thing we need to do is position this storage container.
Division to the left so let's go back to the css and let's set the position to fixed and let's set the left position to let's try.
16 pixels and i think that looks alright let's also bring this element to the center vertically so let's type top and set it to 50.
And now it starts from the center so we have to type transform translate y and we have to type negative 50 now it will be exactly in the center.
So now we can see we have the storage container positioned correctly and if i click on any of these stories we have the story displayed in full screen mode and everything else is working all right.
So that's how you can position this element to the left now if you want to position this to the right you can just change left to right so here you can just type right.
And now we can see it is on the right side let's change it back to left now the next thing we will do is we will fix the mobile version so if i decrease the width of this browser here we can.
See this is how it looks so if we scroll down in our css we can see we had added a media query and here we have set the width of the storage container to 90 percent.
So let's change this to something less
Let's try 130 pixels i think 132 pixels looks alright so that's it with the mobile version.Now what you can do is you can hide this stories container by default and you can add an icon and if i click on the icon this storage container should be displayed so let's try and do that first.
Of all let's get an icon so for that i'll use heroicons.com and let's search for an icon i'll just type right and let's scroll down and let's use this.
Icon right here called chevron double write let's copy the svg and let's go to the html file and here in the stories container let's create.
A division and let's give it a class of toggle story so if i click on this icon once it will display the story and if i click on it again it will hide the story let's just.
Change this to stories right now in this division let's copy the svg and now we can see in our design we have this arrow displayed over here now what.
We will do is we will position this arrow on the right over here so let's go to our style.css file and let's access the toggle stories division so let's.
Type stories container toggle stories and let's set the position to absolute now let's set a width of let's try 20 pixels and let's set a height of 20 pixels and.
Let's set the top position to 50 and we'll also type transform translate y and set it to negative 50 now it is exactly in the center and let's add a right position.
And let's try negative 10 pixels and let's bring it down a little bit let's try zero pixels and i think that looks alright and we'll also set the cursor to pointer.
And now when we hover over this we have this pointer and now the next thing we will do is by default we will position this storage container to the left so let's go to the.
Storage container and here we will set the left position and we'll set it to let's try negative 100 pixels or let's try negative 1 10 pixels.
I think that looks alright now what we will do is when we click on this button we will bring this stories container to the right so for that we will add a class of active.
So here we will type stories container dot active and we'll set the left position to i think it was 16 pixels and we'll also add a smooth transition.
So let's add a transition we'll just add it over here in the storage container for the desktop version so here's the start transition and set it to all 400 milliseconds is.
Right now let's add and remove the active class using javascript so let's go to the javascript file and let's first of all access the toggle storage division so let's tap.
Const toggle stories equals document dot query selector stories container.
Toggle stories and let's add an image listener so here i'll just type toggle stories dot ad event listener and we will listen for the click event and.
Let's create an error function over here and what we need to do is add the active class to the storage container so let's tap stories container dot class list dot add.
Or we can just type toggle so that once we click on it it will add the class and if you click on it again it will remove the class so let's type active over here.
Right now let's test it out so let's click on this button and we can see that the stories are displayed over here and if i click on these stories everything is working all.
Right and if i click on this button once again the stories disappear so that's it with the mobile version now let's fix the desktop version.
So let's go back to the css and here let's type storage container dot active and let's try left of.
Let's say 150 pixels i think 40 pixels and that looks alright so now if i click on this button we have the stories.
Displayed we don't have the transition yet so let's go back and here we don't have the left value so.
Let's tap left 16 pixels right now let's test it out and everything is working all right so that's basically how you can position any of the elements to the left or the.
Right of your website alright so that's basically it for this video and i will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if.
You like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day.