From 77e3bed6c4e8681dc760e27202151600e20b07af Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Thu, 26 Jan 2023 14:23:39 +0500
Subject: [PATCH] most read

---
 src/App.tsx                        | 2 +-
 src/components/aside/AsideItem.tsx | 7 +++++--
 src/pages/News.tsx                 | 5 +++++
 src/styles/_aside.scss             | 6 +++++-
 src/styles/_news.scss              | 3 ++-
 5 files changed, 18 insertions(+), 5 deletions(-)

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 = () => {
       <Header />
       <Routes>
         <Route path="/" element={<Main />} />
-        <Route path="/news" element={<News />} />
+        <Route path="/news/:id" element={<News />} />
       </Routes>
       <Video />
       <Footer />
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 (
-    <div className="aside-item">
+    <Link to="/news/1" className="aside-item">
       <h3 className="aside-item-category">{category}</h3>
       <h2 className="aside-item-title">{title}</h2>
-    </div>
+    </Link>
   );
 };
 
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<string>();
+  console.log(`News id: ${id}`);
   return (
     <main className="news">
       <div className="container">
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;
 }