Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below:
.navbar {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 1rem;
background-color: #ffffed;
border-bottom: 0.25rem solid #eaeaea;
color: #333;
font-size: 1.3rem;
}
.navbar h1 {
font-size: 2rem;
font-weight: bold;
text-decoration: none;
}
.navbar ul {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.5rem;
list-style: none;
}
.navbar li {
margin-left: 1rem;
}
.navbar a {
text-decoration: none;
}
.navbar a:hover {
color: aqua;
text-shadow: 5px 5px 10px #333;
transition: all 0.3s ease-in;
}
.navbar a:visited {
color: inherit;
}
.icon {
width: 2rem;
height: 2rem;
margin-left: auto;
}
Here is the associated component code:
'use client';
import Link from 'next/link';
import styles from './navbar.module.css';
import { useThemeSelector } from '@/redux/theme/store';
import { MoonIcon, SunIcon } from '@heroicons/react/16/solid';
export default function Navbar() {
const isDark = useThemeSelector((state) => state.themeReducer.isDarkMode);
return (
<>
<nav className={styles.navbar}>
<h1><Link href={'/'}>Home</Link></h1>
<ul>
<li><Link href={'/'}>Create a task</Link></li>
{isDark ? <SunIcon className={styles.icon}></SunIcon> : <MoonIcon className={styles.icon}></MoonIcon>}
</ul>
</nav>
</>
);
}
A couple of issues were encountered within this single component:
- Despite attempting to apply a hover effect on the anchor tags to change their color, the effect was not taking place as expected.
- An effort to make the icon scroll to the end of the navbar using flexbox and the margin-left attribute proved unsuccessful, leaving the desired outcome unattainable. Additional style functionalities may also be problematic, though unnoticed by you. To address these issues, two questions arise – How do I resolve the aforementioned problems? And secondly, is there a broader issue at play here?! Is there a need for specific configurations to effectively utilize CSS modules?! This uncertainty leaves me pondering if more challenges lie ahead in future implementations.
Efforts to find resolutions through thorough research have proven futile, as Next.JS documentation does not offer much guidance beyond stating that CSS modules are supported by default, leaving little room for further troubleshooting options.