Add & use HeadLayout

pages/awtis.js

@@ -3,23 +3,22 @@ import {Container, Grid} from '@material-ui/core'
 
 import {jwennAwtisKantite, jwennAwtisPajinasyon} from '../lib/oki-api'
 
-import Navigasyon from '../components/navigasyon'
 import AwtisKat from '../components/awtis/awtis-kat'
 import Pajinasyon from '../components/awtis/pajinasyon'
+import HeadLayout from '../components/head-layout'
 
 const AWTIS_POU_CHAK_PAJ = process.env.NEXT_PUBLIC_AWTIS_POU_CHAK_PAJ || 6
 
 export default function Awtis({pajTotal, awtisPouChakPaj, paj}) {
   return (
-    <>
-      <Navigasyon selectedTab={1} />
+    <HeadLayout title='Awtis' tab={1}>
       <Pajinasyon pajTotal={pajTotal} paj={paj} />
       <Container>
         <Grid container spacing={4}>
           {awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis._id} anAwtis={anAwtis} />)}
         </Grid>
       </Container>
-    </>
+    </HeadLayout>
   )
 }
 

pages/index.js

@@ -1,10 +1,13 @@
 import axios from 'axios'
-
-import Navigasyon from '../components/navigasyon'
+import HeadLayout from '../components/head-layout'
 
 export default function Home() {
   return (
-    <Navigasyon selectedTab={0} />
+    <HeadLayout tab={0}>
+      <div>
+        Kay-la
+      </div>
+    </HeadLayout>
   )
 }
 

pages/teks/[slug].js

@@ -2,15 +2,14 @@ import PropTypes from 'prop-types'
 
 import {jwennMizikEpiSlug, jwennTeks} from '../../lib/oki-api'
 
-import Navigasyon from '../../components/navigasyon'
 import TeksDrawer from '../../components/teks/teks-drawer'
+import HeadLayout from '../../components/head-layout'
 
 export default function Mizik({miziks, mizik}) {
   return (
-    <>
-      <Navigasyon selectedTab={2} />
+    <HeadLayout title={`Tèks | ${mizik[0].titre}`} tab={2}>
       <TeksDrawer miziks={miziks} mizik={mizik} />
-    </>
+    </HeadLayout>
   )
 }
 

pages/teks/index.js

@@ -2,15 +2,14 @@ import PropTypes from 'prop-types'
 
 import {jwennTeks} from '../../lib/oki-api'
 
-import Navigasyon from '../../components/navigasyon'
 import TeksDrawer from '../../components/teks/teks-drawer'
+import HeadLayout from '../../components/head-layout'
 
 export default function Teks({miziks}) {
   return (
-    <>
-      <Navigasyon selectedTab={2} />
+    <HeadLayout title='Tèks' tab={2}>
       <TeksDrawer miziks={miziks} />
-    </>
+    </HeadLayout>
   )
 }