Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5

frontend/src/webparts/approvalAdmin/components/app/TopNav.module.scss

@@ -0,0 +1,87 @@
+@import '../../../../styles/design-tokens';
+
+.topnav {
+  background: $grad-header;
+  padding: 0 22px;
+  display: flex;
+  align-items: center;
+  height: 54px;
+  box-shadow: 0 1px 0 rgba(212,160,30,.35);
+  border-radius: $r-md $r-md 0 0;
+  // Без переноса: высота шапки фиксирована (54px), поэтому перенесённая
+  // строка вкладок вылезала бы за её пределы вместе с подчёркиванием.
+  // Вместо переноса вкладки скроллятся по горизонтали.
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-right: 28px;
+  flex-shrink: 0;
+}
+
+.mark {
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+  background: $grad-gold-v;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $navy-950;
+  font-weight: 800;
+  font-size: 13px;
+  font-family: $font-serif;
+}
+
+.brandText {
+  color: #fff;
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: .4px;
+  white-space: nowrap;
+}
+
+.tabs {
+  display: flex;
+  height: 100%;
+  flex-wrap: nowrap;
+  // min-width: 0 обязателен — иначе flex-элемент не сожмётся уже своего
+  // содержимого и overflow-x никогда не сработает.
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Делает контейнер offsetParent'ом для вкладок: автопрокрутка в TopNav.tsx
+  // считает offsetLeft относительно него. Без этого offsetLeft отсчитывался
+  // бы от body и прокрутка уезжала бы не туда.
+  position: relative;
+
+  // Полоса прокрутки на тёмной шапке выглядит инородно, скрываем её —
+  // вкладки остаются доступны свайпом/колесом.
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.tab {
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding: 0 16px;
+  border: none;
+  background: 0;
+  color: rgba(255,255,255,.5);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  transition: .18s;
+  height: 54px;
+  border-bottom: 2px solid transparent;
+  letter-spacing: .2px;
+
+  &:hover { color: rgba(255,255,255,.85); }
+  &.on { color: $gold-300; border-bottom-color: $gold-400; }
+}