timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
7.36k stars 1.84k forks source link

feat: Add hover highlight classes to nav links, MobileNav #939

Closed Spiteless closed 2 weeks ago

Spiteless commented 3 weeks ago

Enhancement

Added hover highlight color classes to Header links/SVGS, ThemeSwitch menu

Other links in the blog also have highlight on hover, it seemed like the nav links should have highlighting as well.

Visuals

Screenshots #### No hover image #### Blog hovered image #### ThemeSwitch icon hovered image #### ThemeSwitch icon clicked, still hovered image #### Menu Item hovered image
vercel[bot] commented 3 weeks ago

@Spiteless is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwind-nextjs-starter-blog ❌ Failed (Inspect) Jun 17, 2024 9:13am
timlrx commented 3 weeks ago

Hi, could you run prettier on the code and push the changes back? I am good with the hover over style change update.

Spiteless commented 2 weeks ago

Just got husky and prettier working and then force pushed the changes

Spiteless commented 2 weeks ago

Turns out this isn't the right highlighting, will edit the PR to incorperate classes based on active so that highlighting works properly eg https://headlessui.com/v1/react/menu

image

@headlessui/react menu has the ability to navigate with arrow keys upon menu expansion, but it needs highlighting classes to show what is active. Will reopen PR when I've got it working properly.