diff --git a/src/App.tsx b/src/App.tsx
index 0f4b850..6b98162 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,7 +20,7 @@ const App = () => {
} />
- } />
+ } />
diff --git a/src/components/aside/AsideItem.tsx b/src/components/aside/AsideItem.tsx
index 87dc20c..9253035 100644
--- a/src/components/aside/AsideItem.tsx
+++ b/src/components/aside/AsideItem.tsx
@@ -1,3 +1,6 @@
+// Modules
+import { Link } from 'react-router-dom';
+
interface Props {
title: string;
category: string;
@@ -5,10 +8,10 @@ interface Props {
const AsideItem = ({ title, category }: Props) => {
return (
-
+
{category}
{title}
-
+
);
};
diff --git a/src/pages/News.tsx b/src/pages/News.tsx
index 6d8431f..94468a9 100644
--- a/src/pages/News.tsx
+++ b/src/pages/News.tsx
@@ -1,8 +1,13 @@
+// Modules
+import { useParams } from 'react-router-dom';
+
// Components
import NewsItem from '../components/news/NewsItem';
import Aside from '../components/global/Aside';
const News = () => {
+ const { id } = useParams();
+ console.log(`News id: ${id}`);
return (
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss
index cf3906a..956e54f 100644
--- a/src/styles/_aside.scss
+++ b/src/styles/_aside.scss
@@ -10,6 +10,10 @@
display: flex;
flex-direction: column;
gap: 1.6rem;
+ position: sticky;
+ top: 2rem;
+ left: 0;
+ height: fit-content;
}
.aside-scroll {
@@ -32,6 +36,6 @@
}
.aside-item-category {
- font-weight: 700;
+ font-weight: bold;
font-size: 1rem;
}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index 82b06a6..0f472e0 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -42,6 +42,7 @@
display: flex;
flex-direction: column;
gap: 1.6rem;
- font-size: 1.8rem;
+ font-size: 1.6rem;
line-height: 2.2rem;
+ color: $black;
}