VEES-8 | Navbar

src/app/page.tsx

@@ -1,7 +1,7 @@
 import { Headers } from '@/widgets/Headers';
 import { InfoBlock } from '@/widgets/InfoBlock/client';
 import { mockInfoBlockExercisesItems } from '@/widgets/InfoBlock/model/mock-exercises';
-import { Navbar } from '@/widgets/Navbar';
+import { Navbar } from '@/widgets/Navbar/client';
 
 import { Layout } from '@/shared/ui';
 

src/app/settings/page.tsx

@@ -0,0 +1,13 @@
+import { Navbar } from '@/widgets/Navbar/client';
+
+const Home = () => (
+  <>
+    {/* <Headers.Settings /> */}
+    <main>
+      Настройки
+    </main>
+    <Navbar />
+  </>
+);
+
+export default Home;

src/shared/constants/routes.ts

@@ -1,6 +1,7 @@
 export enum AppRoutes {
   ALL_VEES = '/all-vees',
   VEES = '/vees',
+  SETTINGS = '/settings',
   // last
   NOT_FOUND = '/not-found',
 }

src/shared/icons/add-outline.tsx

@@ -8,7 +8,7 @@ export const AddOutlineIcon = ({
   strokeWidth = 1.5,
   width = 26,
 }: IIcon) => (
-  <Icon height={height} width={width}>
+  <Icon height={height} viewBox="0 0 26 26" width={width}>
     <rect
       height="21.5"
       rx="7.25"

src/shared/icons/index.ts

@@ -10,3 +10,4 @@ export * from './play';
 export * from './plus';
 export * from './setting-outline';
 export * from './stopwatch-outline';
+export * from './vees';

src/shared/icons/vees.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Icon, IIcon } from '@/shared/ui';
+
+export const VeesIcon = ({
+  fill = 'currentColor',
+  height = 32,
+  width = 32,
+}: IIcon) => (
+  <Icon height={height} viewBox="0 0 32 32" width={width}>
+    <path
+      d="M27.9999 16C28.0027 16.3518 27.8958 16.6957 27.6941 16.9839C27.4924 17.2721 27.206 17.4903 26.8746 17.6081L20.0754 20.0814L17.604 26.8816C17.4822 27.2099 17.2628 27.493 16.9754 27.6929C16.6881 27.8928 16.3464 28 15.9963 28C15.6463 28 15.3046 27.8928 15.0172 27.6929C14.7299 27.493 14.5105 27.2099 14.3887 26.8816L11.9173 20.0803L5.11808 17.6081C4.7899 17.4863 4.50687 17.2669 4.307 16.9794C4.10713 16.6919 4 16.3502 4 16C4 15.6498 4.10713 15.3081 4.307 15.0206C4.50687 14.7331 4.7899 14.5137 5.11808 14.3919L11.9173 11.9197L14.3887 5.11842C14.5105 4.79014 14.7299 4.50702 15.0172 4.30709C15.3046 4.10716 15.6463 4 15.9963 4C16.3464 4 16.6881 4.10716 16.9754 4.30709C17.2628 4.50702 17.4822 4.79014 17.604 5.11842L20.0765 11.9197L26.8746 14.3919C27.206 14.5097 27.4924 14.7279 27.6941 15.0161C27.8958 15.3043 28.0027 15.6482 27.9999 16Z"
+      fill={fill}
+    />
+  </Icon>
+);

src/shared/ui/Button/Button.tsx

@@ -15,7 +15,7 @@ interface IButton {
   isActiveAnimation?: boolean
   onClick?: () => void
   radius?: 'none' | 'medium' | 'full'
-  size?: 'medium' | 'large'
+  size?: 'none' | 'medium' | 'large'
   to?: string
   variant?: 'solid' | 'light' | 'flat' | 'none'
 }
@@ -36,7 +36,7 @@ export const Button = ({
   to,
   variant = 'light',
 }: IButton) => {
-  const Component = to ? Link : 'button';
+  const Component = !disabled && to ? Link : 'button';
 
   return (
     <Component

src/shared/ui/Button/button.module.scss

@@ -9,10 +9,15 @@
   text-wrap: nowrap;
 }
 
-.activeAnimation:active {
+.activeAnimation:not(.disabled):active {
   transform: scale(0.98);
 }
 
+.disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
 @mixin variant-solid($color) {
   background: theme('colors.#{$color}.500');
 

src/widgets/InfoBlock/ui/infoBlock.module.scss

@@ -10,7 +10,7 @@
 }
 
 .wrapper {
-  --info-block-height: 122px;
+  --info-block-height: 125px;
   height: var(--info-block-height);
 
   overflow: clip;
@@ -46,12 +46,13 @@
   &::after {
     position: absolute;
     top: -10px;
-    right: 50px;
     width: 190px;
     height: 190px;
 
     background: theme('colors.primary.600 / 10%');
     border-radius: 100%;
+
+    transform: translateX(50px);
     content: '';
     filter: blur(64px);
     filter: theme('blur.3xl');

src/widgets/Navbar/Navbar.tsx

@@ -1,3 +1,72 @@
-export const Navbar = () => (
-  <></>
-);
+'use client';
+
+import { clsx } from 'clsx';
+import { usePathname } from 'next/navigation';
+
+import { AppRoutes } from '@/shared/constants';
+import { AddOutlineIcon, SettingsOutlineIcon, VeesIcon } from '@/shared/icons';
+import { Background, Button, Flex, Layout } from '@/shared/ui';
+
+import styles from './navbar.module.scss';
+
+interface IBaseNavbarItem {
+  disabled?: boolean
+  icon: React.ReactNode
+  title: string
+}
+
+type TNavbarItems =
+  | (IBaseNavbarItem & { href: AppRoutes, onClick?: never })
+  | (IBaseNavbarItem & { href?: never, onClick: () => void });
+
+const navbarItems: TNavbarItems[] = [
+  {
+    href: AppRoutes.VEES,
+    icon: <VeesIcon />,
+    title: 'Тренировки',
+  },
+  {
+    icon: <AddOutlineIcon height={28} width={28} />,
+    onClick: () => {},
+    title: 'Добавить',
+  },
+  {
+    href: AppRoutes.SETTINGS,
+    icon: <SettingsOutlineIcon />,
+    title: 'Настройки',
+  },
+];
+
+export const Navbar = () => {
+  const pathname = usePathname();
+
+  return (
+    <Flex className={styles.wrapper} gap={16} vertical={true}>
+      <Background
+        as="nav"
+        border="top"
+        opacity={true}
+        radius="none"
+      >
+        <Layout className={styles.layout}>
+          {navbarItems.map(({ disabled, href, icon, onClick, title }) => (
+            <Button
+              className={clsx(styles.item, { [styles.active]: href === pathname })}
+              disabled={disabled}
+              key={title}
+              onClick={onClick}
+              size="none"
+              to={href}
+              variant="none"
+            >
+              <div className={styles.icon}>
+                {icon}
+              </div>
+              {title}
+            </Button>
+          ))}
+        </Layout>
+      </Background>
+    </Flex>
+  );
+};

src/widgets/Navbar/navbar.module.scss

@@ -0,0 +1,43 @@
+.wrapper {
+  position: fixed;
+  bottom: 0;
+  z-index: theme('zIndex.hud');
+  backdrop-filter: blur(theme('backdropBlur.3xl'));
+}
+
+.layout {
+  display: flex;
+  align-items: center;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-wrap: nowrap;
+}
+
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  width: 100%;
+
+  font-size: 0.625rem;
+
+  color: theme('colors.base.500');
+
+  &:hover {
+    color: theme('colors.base.300');
+  }
+
+  &.active {
+    color: theme('colors.primary.500');
+  }
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+}
+