feature: add animated logo

.gitignore

@@ -67,4 +67,5 @@ npm-debug.log*
 # VS Code
 .vscode/
 
-storybook-static/
+storybook-static/
+.vercel

.prettierrc

@@ -1,5 +1,4 @@
 {
-    "singleQuote": true,
-    "tabWidth": 2,
-    "printWidth": 120
+  "singleQuote": true,
+  "tabWidth": 2
 }

src/lib/components/AnimatedLogo/AnimatedLogo.module.css

@@ -0,0 +1,146 @@
+.logo {
+  transform: scale(1);
+  transition: transform var(--transition-duration)
+    var(--transition-timing-function);
+  animation: scale var(--spin-time) ease-in-out infinite;
+}
+
+.logo svg {
+  width: 94%;
+  height: auto;
+  margin: 3%;
+  transform: scale(1);
+  transition: transform var(--transition-duration)
+    var(--transition-timing-function);
+}
+
+.circles {
+  height: var(--circle-size);
+  width: var(--circle-size);
+  position: absolute;
+  margin: 0 auto;
+  top: 50%;
+  left: 50%;
+  transform: translate3D(-50%, -50%, 0) scale(1);
+  transition: transform var(--transition-duration)
+    var(--transition-timing-function);
+  cursor: pointer;
+}
+
+.circles.circles_shadowed .circle.third {
+  box-shadow: 0 0 var(--shadow-size) 0 rgba(#00b400, 0.7),
+    0 0 var(--shadow-size) 0 rgba(0, 255, 0, 0.5) inset;
+}
+
+.circles.circles_shadowed .circles:active .circle.third {
+  box-shadow: 0 0 var(--shadow-size) 0 rgba(0, 180, 0, 1),
+    0 0 var(--shadow-size) 0 rgba(0, 255, 0, 0.6) inset;
+}
+
+.circles.circles_shadowed .circles:active .circle.third {
+  box-shadow: 0 0 var(--shadow-size) 0 rgba(255, 255, 255, 0.5) inset;
+}
+
+.circle {
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: solid transparent;
+  border-width: var(--circle-stroke);
+  border-radius: 115% 140% 145% 110%/125% 140% 110% 125%;
+  mix-blend-mode: overlay;
+  transition: all var(--transition-duration) var(--transition-timing-function);
+}
+
+.circle.first {
+  border-color: #00b400;
+  background-color: rgba(0, 187, 0, 0);
+  box-shadow: 0 0 0vmin 0 rgba(170, 255, 170, 0) inset;
+  transform-origin: 50% - var(--displacement) 50%;
+  animation: spin1 var(--spin-time) linear infinite;
+}
+.circle.second {
+  border-color: #ffd400;
+  box-shadow: 0 0 0 0vmin rgba(255, 212, 0, 0);
+  transform-origin: 50% 50% + var(--displacement);
+  animation: spin2 var(--spin-time) linear infinite;
+}
+.circle.third {
+  border-color: #00b4ff;
+  transform-origin: 50% + var(--displacement) 50%;
+  animation: spin3 var(--spin-time) linear infinite;
+}
+
+.circles:hover {
+  transform: translate3D(-50%, -50%, 0) scale(1.1);
+}
+
+.circles:hover .logo svg {
+  transform: scale(0.85);
+}
+.circles:hover .circle.first,
+.circles:hover .circle.second,
+.circles:hover .circle.third {
+  border-width: var(--circle-stroke-hover);
+}
+
+.circles.circles_active,
+.circles:active {
+  transform: translate3D(-50%, -50%, 0) scale(1.3);
+}
+
+.circles.circles_active .logo svg,
+.circles:active .logo svg {
+  transform: scale(1.15);
+}
+.circles.circles_active .circle.first,
+.circles:active .circle.first {
+  background-color: rgba(0, 180, 0, 1);
+  border-width: 0;
+}
+.circles.circles_active .circle.second,
+.circles.circles_active .circle.third,
+.circles:active .circle.second,
+.circles:active .circle.third {
+  border-width: var(--circle-stroke-active);
+}
+
+@keyframes spin1 {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin2 {
+  0% {
+    transform: rotate(72deg);
+  }
+  100% {
+    transform: rotate(-288deg);
+  }
+}
+
+@keyframes spin3 {
+  0% {
+    transform: rotate(-144deg);
+  }
+  100% {
+    transform: rotate(216deg);
+  }
+}
+
+@keyframes scale {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

src/lib/components/AnimatedLogo/AnimatedLogo.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory } from '@storybook/react';
+import { AnimatedLogo } from './AnimatedLogo';
+
+export default {
+  title: 'Organisms/AnimatedLogo',
+  component: AnimatedLogo,
+};
+
+const Template: ComponentStory<typeof AnimatedLogo> = (args) => (
+  <AnimatedLogo {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Shadowed = Template.bind({});
+Shadowed.args = {
+  shadowed: true,
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  radius: '60px',
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  active: true,
+};

src/lib/components/AnimatedLogo/AnimatedLogo.tsx

@@ -0,0 +1,63 @@
+import classNames from 'classnames';
+import styles from './AnimatedLogo.module.css';
+
+interface Props {
+  radius?: string;
+  time?: string;
+  displacement?: string;
+  shadow?: string;
+  shadowed?: boolean;
+  active?: boolean;
+}
+
+export function AnimatedLogo({
+  time = '10s',
+  radius = '50vmin',
+  displacement = '2%',
+  shadow = '10vh',
+  shadowed = false,
+  active = false,
+}: Props) {
+  return (
+    <>
+      <div
+        className={classNames(styles.circles, {
+          [styles.circles_shadowed]: shadowed,
+          [styles.circles_active]: active,
+        })}
+        style={
+          {
+            '--spin-time': time,
+            '--circle-size': radius,
+            '--circle-stroke': `calc(${radius} * 0.085)`,
+            '--circle-stroke-hover': `calc(${radius} * 0.105)`,
+            '--circle-stroke-active': `calc(${radius} * 0.5)`,
+            '--displacement': displacement,
+            '--shadow-size': shadow,
+            '--shadow-opacity': 0.35,
+            '--transition-duration': '0.15s',
+            '--transition-timing-function': 'ease-in-out',
+          } as React.CSSProperties
+        }
+      >
+        <div className={classNames(styles.circle, styles.first)}></div>
+        <div className={classNames(styles.circle, styles.second)}></div>
+        <div className={classNames(styles.circle, styles.third)}></div>
+        <div className={styles.logo}>
+          <svg
+            fill="none"
+            height="60"
+            viewBox="0 0 60 60"
+            width="60"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20.1001 40.7095c-.0019-.1029-.0242-.2045-.0654-.2989s-.1006-.1797-.1748-.2512c-.0741-.0714-.1617-.1275-.2576-.1651-.0958-.0376-.1982-.056-.3011-.054l-.0064.0001h-1.049v1.5038h1.0137c.5262 0 .8406-.385.8406-.7347zm-1.8552-2.3081h.5943c.4901 0 .7355-.3144.7355-.6641s-.2454-.6641-.7355-.6641h-.5951zm4.0591 2.4133c0 1.1532-.8405 2.3073-2.4813 2.3073h-4.6567v-1.6812h.8044v-4.3709h-.8044v-1.7097h4.1104c1.5853 0 2.3628 1.0137 2.3628 2.1013-.0048.5369-.2182 1.0509-.5951 1.4333.9111.4161 1.2608 1.1507 1.2608 1.9199zm16.2835-23.6376v2.536h1.6476v-.8448h.9347v4.36h-.8011v1.6904h3.9179v-1.6904h-.8456v-4.3601h.9347v.8449h1.6921v-2.5361zm-12.648 12.6622h1.0432c.6985 0 1.2709-.2521 1.2709-.9481 0-.7397-.5749-.9448-1.2734-.9448h-1.0407zm.6649 4.1961h-3.8489v-1.7173h.9103v-4.3709h-.9103v-1.6442h4.734c2.0712 0 3.1152 1.1298 3.1152 2.5663-.0082.4725-.1423.9342-.3885 1.3376-.2461.4034-.5955.7338-1.0119.9572.1395.8405.8691 1.154 1.7728 1.154h1.4457v-4.3709h-1.2272v-1.6442h4.6542v1.6442h-1.223v4.3709h1.2247v1.7131h-4.9711c-2.2536 0-3.3219-.8742-3.8456-2.5217h-1.0927v.8044h.6648v1.714zm7.7921-13.0725h1.3802l-.7145-1.8728zm-7.8122 3.9599h-3.8288v-1.6945h.9347v-4.3601h-.9347v-1.6912h3.9178v1.6912h-.7565v1.3349h.8019c1.0239 0 1.6476-.4901 1.6476-1.3349h-.6683v-1.6912h3.6985v1.6912h-.938c0 1.1567-.8019 2.1351-1.603 2.5806.2219 1.2011.9112 1.7795 2.4242 1.6912l1.6921-4.2718h-.5792v-1.6912h4.3634l2.3158 6.0521h.8011v1.6904h-3.9188v-1.6912h.6211l-.1782-.5784h-2.5805l-.1782.5784h.712v1.6903h-1.5383c-2.6714 0-3.021 0-4.0011-.4001-.9347-.4001-1.6476-1.3793-2.004-2.6251h-.8901v1.3349h.6675zm-4.4668 9.1194h-6.9507v-1.6879h.8456v-4.36h-.8456v-1.6913h6.9507v2.5814h-1.7408v-.8901h-2.1376v1.2902h2.0039v1.6904h-2.0039v1.3819h2.1376v-.8901h1.7358zm19.8895-7.7382h3.9876v1.6432h-.8405v6.0815h-2.4847l-3.0479-4.4012v2.6898h.9044v1.7131h-4.0213v-1.7131h.9112v-4.3709h-.9112v-1.6434h3.327l3.1177 4.4374v-2.7932h-.9423zm-19.8937-1.3812h-6.9465v-1.6945h.8456v-4.3601h-.8456v-1.6912h6.9507v2.5813h-1.7408v-.8901h-2.1376v1.2902h2.0039v1.6904h-2.0039v1.3794h2.1376v-.8893h1.7408zm20.1114 13.7058v1.6441h1.7761v.6481c-.4514.39-.9095.517-1.5046.517-1.1197-.0345-1.8552-.97-1.8552-2.2309 0-1.3752.6952-2.1998 1.8552-2.1998.3842-.0156.7649.0792 1.0969.2732l.0084.8095h1.9594v-1.814c-.7397-.6169-1.6669-1.0549-3.2059-1.0549-2.6604 0-3.9507 1.9459-3.9507 4.0205-.0142.628.1179 1.2508.3858 1.819-.5825.559-1.7887.3303-2.1855-.833.4198-.2223.7723-.553 1.0208-.9578s.3839-.8688.3922-1.3437c0-1.4366-1.044-2.5654-3.1143-2.5654h-8.2585v1.713h1.0179v3.0076c0 .9086-.596 1.3634-1.2247 1.3634s-1.2945-.4901-1.2945-1.3634v-3.0076h.8406v-1.713h-3.9162v1.713h.7346v2.9067c0 2.3074 1.7812 3.3564 3.5304 3.3564 1.9947 0 3.5346-1.1894 3.5346-3.3564v-2.9024h1.3785v4.3709h-.9582v1.6811h3.8498v-1.6811h-.6909v-.8405h1.0002c1.0414 2.8394 3.9835 3.0521 5.6697 2.0282.4539.3488 1.2936.6287 2.3435.6287 1.7845 0 2.9739-.7623 3.4993-1.7416v-2.8949zm-7.7618.3337h-1.0163v-1.8888h1.0146c.6985 0 1.2735.2051 1.2735.944 0 .6977-.5733.9448-1.2718.9448z"
+              fill="#fff"
+            />
+          </svg>
+        </div>
+      </div>
+    </>
+  );
+}

src/lib/components/AnimatedLogo/index.tsx

@@ -0,0 +1 @@
+export { AnimatedLogo } from './AnimatedLogo';

src/lib/components/ProjectsPanel/components/ProjectsPanel.tsx

@@ -1,30 +1,31 @@
-import styles from "./Toggle.module.css";
-import classNames from "classnames";
+import styles from './Toggle.module.css';
+import classNames from 'classnames';
 import {
   ALL_PROJECTS,
   CSS_PANEL_BG_KEY,
   CSS_PANEL_COLOR_KEY,
   CSS_PANEL_FOOTER_HEIGHT,
   CSS_PANEL_HOVER,
-  PROJECT_MAP
-} from "../constants";
-import { Styles, Project, Theme, ToggleStyles } from "../types";
-import { Projects } from "./Projects";
-import { Modal, useModal } from "./Modal";
+  PROJECT_MAP,
+} from '../constants';
+import { Styles, Project, Theme, ToggleStyles } from '../types';
+import { Projects } from './Projects';
+import { Modal, useModal } from './Modal';
+import { AnimatedLogo } from '../../AnimatedLogo';
 
 const defaultTheme = {
-  background: "black",
-  color: "white",
+  background: 'black',
+  color: 'white',
 };
 
 const defaultStyle = {
-  bottom: "16px",
-  left: "16px",
-  zIndex: 1000
+  bottom: '16px',
+  left: '16px',
+  zIndex: 1000,
 };
 
 export interface Props {
-  activeProjectId?: Project["id"];
+  activeProjectId?: Project['id'];
   projects?: Project[];
   theme?: Theme;
   isDarkIcons?: boolean;
@@ -50,8 +51,8 @@ export function ProjectsPanel({
     [CSS_PANEL_BG_KEY]: theme.background,
     [CSS_PANEL_COLOR_KEY]: theme.color,
     [CSS_PANEL_HOVER]: '155, 170, 190',
-    [CSS_PANEL_FOOTER_HEIGHT]: '80px'
-  } as React.CSSProperties
+    [CSS_PANEL_FOOTER_HEIGHT]: '80px',
+  } as React.CSSProperties;
 
   if (!activeProject) {
     return null;
@@ -62,7 +63,7 @@ export function ProjectsPanel({
       isOpen={isOpen}
       onClose={close}
       toggle={toggle}
-      style={{ ...cssVars, ...defaultStyle, ...style}}
+      style={{ ...cssVars, ...defaultStyle, ...style }}
       handler={
         <div className={styles.toggle}>
           <button
@@ -72,7 +73,7 @@ export function ProjectsPanel({
             })}
             onClick={toggle}
           >
-            Меню
+            <AnimatedLogo radius="60px" />
           </button>
           <a
             href={activeProject.link}
@@ -83,7 +84,9 @@ export function ProjectsPanel({
             style={toggleStyle}
           >
             <img
-              src={isDarkIcons ? activeProject.logoDark : activeProject.logoLight}
+              src={
+                isDarkIcons ? activeProject.logoDark : activeProject.logoLight
+              }
               className={styles.activeproject__logo}
               alt={activeProject.fullTitle}
             />

src/lib/components/ProjectsPanel/components/Toggle.module.css

@@ -28,50 +28,12 @@
   height: 60px;
   font-size: 0;
   position: relative;
-  background-image: url(../assets/logo_ekb.svg);
   transition: 0.3s all ease;
   background-repeat: no-repeat;
   background-position: center center;
-  background-size: 35% 35%;
   overflow: hidden;
 }
 
-.toggle__control:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: url(../assets/confetti.svg);
-  background-repeat: no-repeat;
-  background-position: 0 0;
-  background-size: 100% 100%;
-  transition: 0.3s all ease;
-}
-
-.toggle__control:focus-visible,
-.toggle__control_active,
-.toggle__control:hover {
-  background-size: 40% 40%;
-}
-
-.toggle__control:not(.toggle__control_active):hover:after {
-  transform: rotate(45deg);
-}
-
-.toggle__control:focus-visible,
-.toggle__control_active,
-.toggle__control:active {
-  transform: scale(1.27);
-}
-
-.toggle__control_active:after,
-.toggle__control:active:after {
-  transform: rotate(270deg);
-  transition: 0.5s all ease;
-}
-
 .toggle__activeproject {
   margin-left: 12px;
 }

src/lib/components/index.ts

@@ -1 +1,3 @@
 export * from './ProjectsPanel';
+
+export * from './AnimatedLogo';