Header fixes

astro.config.ts

@@ -16,7 +16,7 @@ const getDevCssClassPrefix = (filename: string): string => {
   return filename
     .slice(filename.indexOf(PATH_PREFIX) + PATH_PREFIX.length)
     .replace('.module.scss', '')
-    .replace(/[/?\\]/, '-')
+    .replace(/[/?\\]/g, '-')
     .replace('?', '-')
 }
 

src/components/Nav/Header.module.scss

@@ -27,6 +27,7 @@
 }
 
 .headerInner {
+  align-items: center;
   background: #fff;
   border-bottom: 4px solid #000;
   flex-wrap: nowrap;
@@ -85,10 +86,6 @@
   }
 }
 
-nav {
-  align-items: center;
-}
-
 .usernav {
   display: inline-flex;
   padding-right: 0;
@@ -166,7 +163,7 @@ nav {
   }
 }
 
-.burger-container {
+.burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
   float: right;
@@ -243,7 +240,7 @@ nav {
   }
 }
 
-.article-header {
+.articleHeader {
   @include font-size(1.4rem);
 
   left: 0;

src/components/Nav/Header.tsx

@@ -103,9 +103,12 @@ export const Header = (props: Props) => {
             </a>
           </div>
           <div class={clsx(styles.mainNavigation, 'col')}>
-            <div class="article-header">{props.title}</div>
+            <div class={styles.articleHeader}>{props.title}</div>
 
-            <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+            <ul
+              class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
+              classList={{ fixed: fixed() }}
+            >
               <For each={resources}>
                 {(r) => (
                   <li classList={{ selected: r.route === getPage().route }}>
@@ -123,7 +126,7 @@ export const Header = (props: Props) => {
               </li>
             </ul>
           </div>
-          <div class="usernav">
+          <div class={styles.usernav}>
             <div class="usercontrol col">
               <div class="usercontrol__item">
                 <a href="#auth" onClick={handleBellIconClick}>
@@ -153,8 +156,8 @@ export const Header = (props: Props) => {
               </Show>
             </div>
           </div>
-          <div class="burger-container">
-            <div class="burger" classList={{ fixed: fixed() }} onClick={toggleFixed}>
+          <div class={styles.burgerContainer}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
               <div />
             </div>
           </div>