Ajout style

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "discord.enabled": false
+}

components/Categories/Categories.js

@@ -2,30 +2,36 @@ import styles from '../../styles/categories.module.scss';
 
 export default function Categories({ categories, favorites, handleSelectCategory, categoryActive }) {
     return (<div className={styles['categories-wrapper']}>
-        <div className={styles['block-wrapper']}>
+        <div className={`${styles['block-wrapper']} ${styles['favorites']}`}>
             <h4>Favoris</h4>
-            <ul className={styles['favorites']}>
-                {favorites.map(({ name, category }, key) => {
+            <ul className={styles['items']}>
+                {favorites.map(({ name, link, category }, key) => {
                     const catName = categories.find(c => c.id === category).name;
                     return <li key={key} className={styles['item']}>
+                        <a href={link} target={'_blank'} rel={'noreferrer'}>
                             {name} <span className={styles['category']}>- {catName}</span>
+                        </a>
                     </li>;
                 })}
             </ul>
         </div>
-        <div className={styles['block-wrapper']}>
+        <div className={`${styles['block-wrapper']} ${styles['categories']}`}>
             <h4>Catégories</h4>
-            <ul className={styles['categories']}>
-                {categories.map(({ id, name }, key) => (
-                    <li 
-                        key={key} 
-                        className={id === categoryActive ? styles['active'] : null} 
-                        onClick={() => handleSelectCategory(id)}
-                    >
-                        {name} {id === categoryActive ? '(active)' : ''}
+            <ul className={styles['items']}>
+                {categories.map(({ id, name }, key) => {
+                    const className = `${styles['item']} ${id === categoryActive ? styles['active'] : ''}`;
+                    const onClick = () => handleSelectCategory(id);
+
+                    return (
+                        <li key={key} className={className} onClick={onClick}>
+                            {name}
                         </li>
-                ))}
+                    )
+                })}
             </ul>
         </div>
+        <div className={`${styles['block-wrapper']} ${styles['controls']}`}>
+            <button>Se connecter</button>
+        </div>
     </div>);
 }

components/Links/Link.js

@@ -1,28 +1,11 @@
-import { useEffect, useCallback } from 'react';
-import { useInView } from 'react-intersection-observer';
-
 import styles from '../../styles/links.module.scss';
 
-export default function Link({ category,  setCategoryActive, refCategoryActive }) {
-    const { ref, inView } = useInView({ threshold: .5 });
-    const { id, name, links, ref: refCategory } = category;
-
-    useEffect(() => inView ? setCategoryActive(id) : null, [id, inView, setCategoryActive]);
-
-    const setRefs = useCallback((node) => {
-        refCategory.current = node;
-        refCategoryActive.current = node;
-        ref(node);
-    }, [ref, refCategoryActive, refCategory]);
-
+export default function Link({ link }) {
     return (
-        <div className={styles['link-block']} ref={setRefs}>
-            <h2>{name}</h2>
-            <ul className={styles['links']}>
-                {links.map(({ name }, key2) => (
-                    <li key={key2} className={styles['item']}>{name}</li>
-                ))}
-            </ul>
-        </div>
+        <li className={styles['link']}>
+            <a href={link?.link} target={'_blank'} rel={'noreferrer'}>
+                <span className={styles['link-name']}>{link?.name}</span> <span className={styles['link-url']}>{link?.link}</span>
+            </a>
+        </li>
     );
 }

components/Links/LinkBlock.js

@@ -0,0 +1,30 @@
+import { useEffect, useCallback } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+import Link from './Link';
+
+import styles from '../../styles/links.module.scss';
+
+export default function LinkBlock({ category,  setCategoryActive, refCategoryActive }) {
+    const { ref, inView } = useInView({ threshold: .5 });
+    const { id, name, links, ref: refCategory } = category;
+
+    useEffect(() => inView ? setCategoryActive(id) : null, [id, inView, setCategoryActive]);
+
+    const setRefs = useCallback((node) => {
+        refCategory.current = node;
+        refCategoryActive.current = node;
+        ref(node);
+    }, [ref, refCategoryActive, refCategory]);
+
+    return (
+        <div className={styles['link-block']} ref={setRefs}>
+            <h2>{name}</h2>
+            <ul className={styles['links']}>
+                {links.map((link, key2) => (
+                    <Link key={key2} link={link} />
+                ))}
+            </ul>
+        </div>
+    );
+}

components/Links/Links.js

@@ -1,11 +1,11 @@
-import Link from './Link';
+import LinkBlock from './LinkBlock';
 
 import styles from '../../styles/links.module.scss';
 
 export default function Links({ categories, setCategoryActive, refCategoryActive }) {
     return (<div className={styles['links-wrapper']}>
         {categories.map((category, key) => (
-            <Link 
+            <LinkBlock 
                 key={key} 
                 category={category} 
                 setCategoryActive={setCategoryActive}

pages/index.js

@@ -43,7 +43,8 @@ export async function getStaticProps(context) {
 			links.push({
 				id: y,
 				name: 'Lien #' + (y + 1),
-				category: i
+				category: i,
+				link: `https://google.com/search?q=${y}`
 			});
 		}
 

styles/categories.module.scss

@@ -1,14 +1,13 @@
 .categories-wrapper {
-    border: 1px solid red;
-    
     height: 100%;
     width: 300px;
-    padding: 10px;
+    padding: 0 25px 0 10px;
+    border-right: 1px solid #dadce0;
     margin-right: 15px;
     display: flex;
     align-items: center;
     flex-direction: column;
-    overflow-x: auto;
+    overflow-x: none;
 
     & .block-wrapper {
         height: auto;
@@ -16,17 +15,72 @@
         margin-bottom: 15px;
 
         & h4 {
+            user-select: none;
             text-transform: uppercase;
             font-size: .85em;
-            color: #dadce0;
+            color: #bbb;
+            margin-bottom: 5px;
         }
 
-        & .favorites .item .category {
-            color: #dadce0;
+        // List items
+        & .items .item {
+            user-select: none;
+            cursor: pointer;
+            padding: 10px;
+            border: 1px solid #dadce0;
+            border-bottom: 2px solid #dadce0;
+            border-radius: 3px;
+            margin-bottom: 5px;
+            transition: .15s;
+    
+            &.active {
+                color: #fff;
+                background: #3f88c5;
+                border-color: #3f88c5;
             }
 
-        & .categories .active {
-            color: red;
+            &:hover:not(.active) {
+                color: #3f88c5;
+                border-bottom: 2px solid #3f88c5;
             }
         }
     }
+
+    // Favorites
+    & .block-wrapper.favorites {
+        & .items .item a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        & .items .item .category {
+            color: #bbb;
+            font-size: .85em;
+        }
+    }
+
+    // Categories
+    & .block-wrapper.categories {
+        min-height: 0;
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        
+        & .items {
+            overflow: auto;
+
+            & .item {
+                margin-right: 5px;
+            }
+        }
+    }
+
+    // Controls
+    & .block-wrapper.controls {
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+}

styles/globals.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,600;1,300;1,600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 * {
 	box-sizing: border-box;
@@ -11,7 +11,8 @@ html,
 body {
 	height: 100%;
 	width: 100%;
-	font-family: Poppins, sans-serif;
+	color: #111;
+	font-family: "Poppins", sans-serif;
 	padding: 0;
 	margin: 0;
 	overflow: hidden;
@@ -26,6 +27,28 @@ body {
 	flex-direction: column;
 }
 
-ul, li {
+ul,
+li {
 	list-style: none;
 }
+
+/* width */
+::-webkit-scrollbar {
+	width: 7px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: #eee;
+	border-radius: 2px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: #3f88c5;
+	border-radius: 2px;
+
+	&:hover {
+		background: #1e5c8f;
+	}
+}

styles/links.module.scss

@@ -1,6 +1,4 @@
 .links-wrapper {
-    border: 1px solid red;
-
     height: 100%;
     padding: 10px;
     flex: 1;
@@ -16,10 +14,43 @@
         flex-direction: column;
         scroll-snap-align: center;
 
+        & h2 {
+            color: #3f88c5;
+            margin-bottom: 15px;
+        }
+
         & .links {
             width: 100%;
             display: flex;
             flex-direction: column;
         }
+
+        & .links .link {
+            user-select: none;
+            cursor: pointer;
+
+            & > a {
+                color: #3f88c5;
+                text-decoration: none;
+                padding: 10px 15px;
+                border: 1px solid #dadce0;
+                border-bottom: 2px solid #dadce0;
+                border-radius: 3px;
+                margin-bottom: 10px;
+                display: flex;
+                flex-direction: column;
+                transition: .15s;
+
+                &:hover {
+                    border-bottom-color: #3f88c5;
+                    transform: scale(1.01);
+                }
+
+                & .link-url {
+                    color: #bbb;
+                    font-size: .80em;
+                }
+            }
+        }
     }
 }