[REF]: Adecuate for Types page

src/components/MainMenu/MainMenuSideBar.tsx

@@ -68,16 +68,16 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
 
       subMenu: [
         {
-          label: "Dropzone",
+          label: "Avatar",
           index: 31,
-          onClick: () => navigate("/api/dropzone"),
+          onClick: () => navigate("/api/avatar"),
         },
-
         {
-          label: "FileMosaic",
+          label: "Dropzone",
           index: 32,
-          onClick: () => navigate("/api/filemosaic"),
+          onClick: () => navigate("/api/dropzone"),
         },
+
         {
           label: "FileInputButton",
           index: 33,
@@ -89,25 +89,25 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
           onClick: () => navigate("/api/filecard"),
         },
         {
-          label: "FullScreenPreview",
-          index: 34,
+          label: "FileMosaic",
+          index: 35,
+          onClick: () => navigate("/api/filemosaic"),
+        },
+        {
+          label: "FullScreen",
+          index: 36,
           onClick: () => navigate("/api/fullscreen"),
         },
         {
           label: "ImagePreview",
-          index: 34,
+          index: 37,
           onClick: () => navigate("/api/imagepreview"),
         },
         {
           label: "VideoPreview",
-          index: 34,
+          index: 38,
           onClick: () => navigate("/api/videopreview"),
         },
-        {
-          label: "Avatar",
-          index: 35,
-          onClick: () => navigate("/api/avatar"),
-        },
       ],
     },
     {

src/components/RightMenu/RightMenu.scss

@@ -3,6 +3,7 @@
   text-decoration: none;
   padding-left: 5px;
   width: 100%;
+  //word-break: break-all;
   &.selected,
   &:hover {
     border-left: 2px #b2bac2 solid;

src/pages/demo/AvatarDemoPage.tsx

@@ -221,11 +221,11 @@ const AvatarDemoPage: React.FC<AvatarDemoPageProps> = (
                 not set.
               </li>
               <li>
-                <CodeHighlight>changeLabel</CodeHighlight>: when there i a valid
+                <CodeHighlight>changeLabel</CodeHighlight>: when there is a valid
                 source set.
               </li>
               <li>
-                <CodeHighlight>uploadingLabel</CodeHighlight>: when you want to
+                <CodeHighlight>loadingLabel</CodeHighlight>: when you want to
                 communicate that something is loading.
               </li>
             </ul>