mobile-friendly view and scss->sass

src/router/Route.tsx

@@ -1,31 +1,40 @@
 import React, {PropsWithChildren} from "react";
 import {useRouter} from "./RouterContext";
 import {Path} from "./router";
+import {ArticlesList} from "../articles/ArticlesList";
 
-const Canvas = React.lazy(() => import("../index/Canvas"));
-const About = React.lazy(() => import("../about/AboutPage"));
-
-export const ROUTES: [Path, string][] = [
+type Route = [Path, string];
+type Routes = [Route, Route, Route];
+export const ROUTES: Routes = [
   ["/", "Home"],
   ["/about", "About"],
   ["/articles", "Articles"]
 ];
 
-function Route(props: PropsWithChildren & {path: Path}) {
-  const {path, children} = props;
+function Route(props: PropsWithChildren & {route: Route}) {
+  const {route: [path], children} = props;
   const router = useRouter();
 
   return <>{router.current === path && children}</>
 }
 
 
+const Canvas = React.lazy(() => import("../index/Canvas"));
+const About = React.lazy(() => import("../about/AboutPage"));
+
+
 export function Routes() {
+  const [index, about, articles] = ROUTES;
+
   return <>
-    <Route path={ROUTES[0]![0]}>
+    <Route route={index}>
       <Canvas/>
     </Route>
-    <Route path={ROUTES[1]![0]}>
+    <Route route={about}>
       <About/>
     </Route>
+    <Route route={articles}>
+      <ArticlesList/>
+    </Route>
   </>
 }