Let's start step by step.

1. What do I need?

   A sidebar that should consistently appear on the left side of all pages.

2. How can I do it?

   In CSS, there is a position property which lets you give any kind of position to any element in the DOM.

• Static: Elements are where they would normally appear on the page
• Relative: Elements can be shifted from their normal position
• Absolute: Elements are placed exactly where you tell them to, based on their closest "parent" element that's not static
• Fixed: Elements stay in one place on the screen, even when you scroll
• Sticky: Elements act like relative until you scroll to a certain point, then they become fixed
• Inherit: Elements inherit their position from their parent
• Initial: Elements go back to their default position behavior (usually static)

Try each of these (especially Relative Absolute, Fixed, and Sticky) one by one. Examine the results and effects of all these and choose the best one.

3. Displaying Content

   If we observe closely, we'll notice that the first six links are positioned at the top, while the remaining two are aligned at the bottom. Essentially, we have two groups placed in different positions.

4. How to do that?

   Time to flex! Yes, the CSS flexbox. It's a way in CSS to arrange things on a web page, so they fit nicely no matter how big or small the screen is.

   It has various properties:

• Flex direction: Sets the direction of items within the container (row, column, row-reverse, or column-reverse)
• Justify content: Positions items along the main axis (horizontally for rows, vertically for columns)
• Align items: Align items along the cross-axis (opposite to the main axis)
• Flex grow: Defines how items should grow proportionally within the container
• Flex shrink: Determines how items should shrink when there's not enough space
• Flex basis: Specifies the initial size of an item before it stretches or shrinks
• Flex: A shorthand property to set grow, shrink, and basis together
• Align self: Overrides alignment for a specific item within the container
• Order: Controls the order in which items appear within the container

5. Now think, in which direction these two groups are?

   Yes, column! So we should use the Flex Direction property here.

6. But how to keep them away? One at the start and the other at the bottom?

   We want to spread these items so they are aligned at the edges. Luckily, there is one flex box property that spreads the children in equal space.

   If you're new to CSS, these might seem a bit tricky at first but don't be discouraged.

   I didn't know this either until I looked it up

   This is the perfect time to do that. Check the resources section above and read the Flexbox guide to discover the property we need.

   Insight

   Remember - Nothing comes directly to mind. Either you know by someone or you do the hard part, i.e., Search.

7. How to display the Active State?

   Is there a way to find out the current URL in Next.js? GOOGLE IT!

   Absolutely, you can use the usePathname() hook. With this hook, you can easily retrieve the current URL of the page.

   There you go. Now you know what to do. Simply call the hook and check if the Link of a particular item is the same as the current URL we will get from the Next.js Hook!

8. What about styles?

   When it comes to styling, let's head over to Figma. Click on the element, and make a note of all the values we'll require. I will start,

• Background Color
• Border
• Link colors(active/nonactive)
• Shadow

... (you got this)

9. How to achieve Responsiveness?

   In CSS, we make websites work well on different screens using something called Media Queries. It's like giving instructions for how things should look on big and small screens.

   For example, we can say that when the screen is smaller than 640 pixels, make the text bigger or change its color.

   This way, we can make websites look good on all sorts of devices, like phones and computers.

   Go back to the Resouces section to see how we can use Media Queries in TailwindCSS.

   Right after that, ask yourself: To achieve responsiveness of LeftSidebar, which property do I have to change at a certain breakpoint?

   Solution

   Pro Tip: Hide and Seek

   ---

   Pro Pro Tip: If you have seen the "Threads", you may know how to do it :D