Left Menu: Support switching between versions (#1143)

src/components/left/main/LeftMainHeader.tsx

@@ -52,6 +52,9 @@ type DispatchProps = Pick<GlobalActions, (
 
 const ANIMATION_LEVEL_OPTIONS = [0, 1, 2];
 
+const LEGACY_VERSION = 'https://web.telegram.org/';
+const WEBK_VERSION = 'https://web.telegram.org/k/';
+
 const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
   content,
   contactsFilter,
@@ -221,6 +224,18 @@ const LeftMainHeader: FC<OwnProps & StateProps & DispatchProps> = ({
           >
             Report Bug
           </MenuItem>
+          <MenuItem
+            icon="char-K"
+            href={WEBK_VERSION}
+          >
+            Switch to WebK
+          </MenuItem>
+          <MenuItem
+            icon="char-W"
+            href={LEGACY_VERSION}
+          >
+            Switch to Webogram
+          </MenuItem>
         </DropdownMenu>
         <SearchInput
           inputId="telegram-search-input"

src/components/ui/MenuItem.tsx

@@ -67,7 +67,7 @@ const MenuItem: FC<OwnProps> = (props) => {
   const content = (
     <>
       {icon && (
-        <i className={`icon-${icon}`} />
+        <i className={`icon-${icon}`} data-char={icon.startsWith('char-') ? icon.replace('char-', '') : undefined} />
       )}
       {children}
     </>

src/styles/icons.scss

@@ -22,6 +22,16 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+[class^="icon-char-"], [class*=" icon-char-"] {
+  &::before {
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+    content: attr(data-char);
+    width: 1.5rem;
+    text-align: center;
+    display: block;
+  }
+}
+
 .icon-bug:before {
   content: "\e97e";
 }