Добавлены стили emotion

src/container/main/components/layout/header.tsx

@@ -1,31 +1,33 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import { getNavigationsValue } from '@brojs/cli';
+import { getNavigationValue } from '@brojs/cli';
+import { HeaderContainer, NavContainer, NavItem, NavLink } from './index.style';
 
 const navigations: Array<{ name: string; href: string }> = [
   {
     name: 'Главная',
-    href: getNavigationsValue('kfu-24-teacher.main')
+    href: getNavigationValue('kfu-24-teacher.main')
   },
   {
     name: 'Детальная информация',
-    href: getNavigationsValue('kfu-24-teacher.detail')
+    href: getNavigationValue('kfu-24-teacher.detail')
   }
 ];
 
 const Header = (): React.ReactElement => {
   return (
-    <header>
-      <ul>
+    <HeaderContainer>
+      <NavContainer>
         {navigations.map((item) => {
           return (
-            <li key={item.name}>
-              <Link to={item.href}>{item.name}</Link>
-            </li>
+            <NavItem key={item.name}>
+              <NavLink to={item.href} end>
+                {item.name}
+              </NavLink>
+            </NavItem>
           );
         })}
-      </ul>
-    </header>
+      </NavContainer>
+    </HeaderContainer>
   );
 };
 

src/container/main/components/layout/index.style.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { NavLink as NavLinkBase } from 'react-router-dom';
+
+export const HeaderContainer = styled('header')``;
+
+export const NavContainer = styled.nav`
+  display: flex;
+  gap: 24px;
+  padding: 12px 0;
+`;
+
+export const NavItem = styled.div``;
+
+export const NavLink = styled(NavLinkBase)`
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+
+  &.active {
+    border-bottom: 2px solid black;
+  }
+`;