renred upd

src/components/Articles/Categories/Categories.js

@@ -1,18 +1,13 @@
 import React from 'react';
 import { Link } from 'gatsby'
-import slugify from '../../../helpers/slugify'
-import useCategoriesQuery from '../../../hooks/useCategoriesQuery'
 
-const Categories = () => {
+const Categories = ({ children }) => {
-  const { edges } = useCategoriesQuery()
   return (
     <div className="articles-categories">
       <div className="tag-item">
         <Link to='/articles'>Все</Link>
       </div>
-      {edges.map(({ node }, i) => <div key={i} className="tag-item">
+      {children}
-        <Link to={`/category/${slugify(node.frontmatter.title)}`}>{node.frontmatter.title}</Link>
-      </div>)}
     </div>
   )
 }

src/components/Articles/Categories/CategoryItem.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useLocation } from '@reach/router'
+import { Link } from 'gatsby'
+import slugify from '../../../helpers/slugify'
+
+const CategoryItem = ({ title }) => {
+  const { pathname } = useLocation()
+  return (
+    <div className={pathname === `/category/${slugify(title)}` ? 'tag-item active' : 'tag-item'}>
+      <Link to={`/category/${slugify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+export default CategoryItem
+

src/components/Offers/Offers.js

@@ -51,7 +51,7 @@ const Offers = () => {
           <p>
             В нашем канале telegram вы не пропустите новые статьи, присоединяйтесь к другим разработчикам
           </p>
-          <a href="/" target="_blank" className="btn-primary">Подписаться</a>
+          <a href="https://t.me/devthread" rel='noreferrer' target="_blank" className="btn-primary">Подписаться</a>
         </div>
       </div>
     </div>

src/hooks/useCategoriesQuery.js

@@ -14,7 +14,7 @@ const useCategoriesQuery = () => {
       }
     }
   `)
-  return { edges }
+  return { categories: edges }
 }
 
 export default useCategoriesQuery

src/pages/articles.js

@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Categories from '../components/Articles/Categories/Categories'
+import CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Search from '../components/Articles/Search/Search'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title='Статьи' />
@@ -20,7 +23,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
               </div>
             </div>

src/styles/global.scss

@@ -39,6 +39,10 @@
       color: #3972f4;
     }
   }
+  &.active a {
+    background: #d8e3fd;
+    color: #3972f4;
+  }
 }
 
 .inner {
@@ -114,6 +118,10 @@
         color: #99c9f7;
       }
     }
+    &.active a {
+      color: #5183F5;
+      background: #111;
+    }
   }
   & .inner {
     border-bottom: 1px solid rgba(153, 153, 153, 0.2);

src/templates/categoryTemplate.js

@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Search from '../components/Articles/Search/Search'
 import Categories from '../components/Articles/Categories/Categories'
+import CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title={title} />
@@ -20,7 +23,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
                 <div className="articles-info">
                   <p>Показано {edges.edges.length} из категории "{title}"</p>

src/templates/tagTemplate.js

@@ -1,14 +1,17 @@
 import React from "react"
 import { graphql } from 'gatsby'
+import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Search from '../components/Articles/Search/Search'
 import Categories from '../components/Articles/Categories/Categories'
+import CategoryItem from '../components/Articles/Categories/CategoryItem'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
 const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
+  const { categories } = useCategoriesQuery()
   return (
     <Layout>
       <SEO title={title} />
@@ -20,7 +23,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories />
+                <Categories>
+                  {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
+                </Categories>
                 <Search articlesLength={edges.edges.length} />
                 <div className="articles-info">
                   <p>Показано {edges.edges.length} по тегу "{title}"</p>