Language selector

src/components/Controls.module.css

@@ -7,7 +7,13 @@
   padding: 18px;
   border-radius: 12px;
   width: 64px;
-  height: 200px;
+}
+
+.chapters {
+  position: relative;
+  height: calc(64px * 3);
+  width: 100%;
+  margin-bottom: 32px;
 }
 
 .controlsWrapper, .gooWrapper {
@@ -16,8 +22,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  padding: 18px;
-  box-sizing: border-box;
 }
 
 .gooWrapper {
@@ -27,7 +31,7 @@
 .control, .blob {
   position: absolute;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   cursor: pointer;
 }
 
@@ -35,7 +39,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: calc(100% - 36px);
+  width: 100%;
   height: auto;
   padding: 18px;
   box-sizing: border-box;
@@ -47,9 +51,9 @@
 
 .blob {
   background: var(--clr-bg);
-  border-radius: 16px;
+  border-radius: 20px;
   aspect-ratio: 1/1;
-  transition: all .5s;
+  transition: width .6s, height .6s;
   width: 0;
   height: 0;
 }
@@ -60,13 +64,13 @@
 }
 
 .control:nth-child(1), .blob:nth-child(1) {
-  top: 60px;
+  
 }
 
 .control:nth-child(2), .blob:nth-child(2) {
-  top: 120px;
+  top: 70px;
 }
 
 .control:nth-child(3), .blob:nth-child(3) {
-  top: 180px;
+  top: calc(70px * 2);
 }

src/components/Controls.tsx

@@ -3,6 +3,7 @@ import { createEffect } from 'solid-js';
 
 import { useStore } from '../store/index';
 import styles from './Controls.module.css';
+import LanguageSelector from './LanguageSelector';
 import homeIcon from '../assets/icons/home.svg'
 import gridIcon from '../assets/icons/grid.svg'
 
@@ -10,7 +11,7 @@ export default () => {
   const [store] = useStore();
   const [selected, setSelected] = createSignal('home');
   const [blobby, setBlobby] = createSignal(['home']);
-  const controls = [
+  const chapters = [
     { name: 'home', icon: homeIcon },
     { name: 'projects', icon: gridIcon },
     { name: 'whatever', icon: homeIcon },
@@ -36,30 +37,34 @@ export default () => {
   return (
     <>
       <div class={styles.Controls}>
-        <div class={styles.gooWrapper}>
+        <div class={styles.chapters}>
-          <For each={controls}>{(control) =>
+          <div class={styles.gooWrapper}>
-            <div 
+            <For each={chapters}>{(chapter) =>
-              class={styles.blob}
+              <div 
-              classList={{
+                class={styles.blob}
-                [styles.selected]: blobby().includes(control.name)
+                classList={{
-              }}
+                  [styles.selected]: blobby().includes(chapter.name)
-            ></div>
+                }}
-          }</For>
+              ></div>
-        </div>
+            }</For>
-        <div class={styles.controlsWrapper}>
+          </div>
-          <For each={controls}>{(control) =>
+          <div class={styles.controlsWrapper}>
-            <div 
+            <For each={chapters}>{(chapter) =>
-              onClick={() => {
+              <div 
-                selectChapter(control.name)
+                onClick={() => {
-              }}
+                  selectChapter(chapter.name)
-              class={styles.control}
+                }}
-            >
+                class={styles.control}
-              <img 
+              >
-                src={control.icon}
+                <img 
-              />
+                  src={chapter.icon}
-            </div>
+                />
-          }</For>
+              </div>
+            }</For>
+          </div>
         </div>
+
+        <LanguageSelector />
       </div>
 
       <svg style="display: none;" xmlns="http://www.w3.org/2000/svg" version="1.1">

src/components/LanguageSelector.module.css

@@ -0,0 +1,4 @@
+.LanguageSelector {
+  cursor: pointer;
+  user-select: none;
+}

src/components/LanguageSelector.tsx

@@ -0,0 +1,25 @@
+import { useI18n } from "@solid-primitives/i18n";
+
+import styles from './LanguageSelector.module.css';
+
+export default () => {
+  const [t, { locale }] = useI18n();
+
+  return (
+    <div
+      onClick={() => {
+        switch (locale()) {
+          case 'ru':
+            locale('en')
+            break;
+          case 'en':
+            locale('ru')
+            break;
+        }
+      }}
+      class={styles.LanguageSelector}
+    >
+      {t('lang')}
+    </div>
+  )
+}

src/localization/en.json

@@ -1,4 +1,5 @@
 {
+  "lang": "en",
   "my_name": "Anatoly Kopyl",
   "tagline": "Professional fullstack developer with standards"
 }

src/localization/ru.json

@@ -1,4 +1,5 @@
 {
+  "lang": "ru",
   "my_name": "Анатолий Копыл",
   "tagline": "Профессиональный fullstack разработчик со стандартами"
 }