Module css in the header component

src/components/Nav/Header.module.scss

@@ -1,4 +1,4 @@
-header {
+.mainHeader {
   background: #fff;
   margin-bottom: 2.2rem;
   width: 100%;
@@ -13,7 +13,7 @@ header {
   }
 }
 
-.header--fixed {
+.headerFixed {
   position: fixed;
   top: 0;
 
@@ -26,7 +26,7 @@ header {
   }
 }
 
-.header__inner {
+.headerInner {
   background: #fff;
   border-bottom: 4px solid #000;
   flex-wrap: nowrap;
@@ -48,7 +48,7 @@ header {
   }
 }
 
-.main-logo {
+.mainLogo {
   align-items: center;
   display: inline-flex;
   height: 70px;
@@ -101,7 +101,7 @@ nav {
   }
 }
 
-.main-navigation {
+.mainNavigation {
   position: relative;
   @include font-size(1.7rem);
 
@@ -264,7 +264,7 @@ nav {
   }
 }
 
-.header__search {
+.headerSearch {
   text-transform: lowercase;
 
   .icon {

src/components/Nav/Header.tsx

@@ -9,9 +9,10 @@ import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
 import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
-import './Header.scss'
+import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { getLogger } from '../../utils/logger'
+import { clsx } from 'clsx'
 
 const log = getLogger('header')
 
@@ -84,9 +85,9 @@ export const Header = (props: Props) => {
 
   return (
     <header
-      class="main-header"
+      class={styles.mainHeader}
       classList={{
-        ['header--fixed']: props.isHeaderFixed,
+        [styles.headerFixed]: props.isHeaderFixed,
         ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
         ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
       }}
@@ -95,13 +96,13 @@ export const Header = (props: Props) => {
         <AuthModal />
       </Modal>
       <div class="wide-container">
-        <nav class="row header__inner" classList={{ fixed: fixed() }}>
+        <nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
-          <div class="main-logo col-auto">
+          <div class={clsx(styles.mainLogo, 'col-auto')}>
             <a href={getPagePath(router, 'home')} onClick={handleClientRouteLinkClick}>
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class="col main-navigation">
+          <div class={clsx(styles.mainNavigation, 'col')}>
             <div class="article-header">{props.title}</div>
 
             <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
@@ -114,7 +115,7 @@ export const Header = (props: Props) => {
                   </li>
                 )}
               </For>
-              <li class="header__search">
+              <li class={styles.headerSearch}>
                 <a href="#">
                   <Icon name="search" />
                   {t('Search')}

src/styles/FourOuFour.module.scss

@@ -1,4 +1,4 @@
-header {
+.main-header {
   position: absolute;
 }