...

1 files changed, 107 insertions, 107 deletions

diff --git a/Timeline/ClientApp/src/app/common/AppBar.tsx b/Timeline/ClientApp/src/app/common/AppBar.tsx
index 8349aef7..59239696 100644
--- a/Timeline/ClientApp/src/app/common/AppBar.tsx
+++ b/Timeline/ClientApp/src/app/common/AppBar.tsx
@@ -1,107 +1,107 @@
-import React from 'react';

-import { useHistory, matchPath } from 'react-router';

-import { Link, NavLink } from 'react-router-dom';

-import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from 'reactstrap';

-import { useMediaQuery } from 'react-responsive';

-import { useTranslation } from 'react-i18next';

-

-import { useUser, useAvatar } from '../data/user';

-

-import TimelineLogo from './TimelineLogo';

-import BlobImage from './BlobImage';

-

-const AppBar: React.FC = (_) => {

-  const history = useHistory();

-  const user = useUser();

-  const avatar = useAvatar(user?.username);

-

-  const { t } = useTranslation();

-

-  const isUpMd = useMediaQuery({

-    minWidth: getComputedStyle(document.documentElement).getPropertyValue(

-      '--breakpoint-md'

-    ),

-  });

-

-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);

-

-  const toggleMenu = React.useCallback((): void => {

-    setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);

-  }, []);

-

-  const isAdministrator = user && user.administrator;

-

-  const rightArea = (

-    <div className="ml-auto mr-2">

-      {user != null ? (

-        <NavLink to={`/users/${user.username}`}>

-          <BlobImage

-            className="avatar small rounded-circle bg-white"

-            blob={avatar}

-          />

-        </NavLink>

-      ) : (

-        <NavLink className="text-light" to="/login">

-          {t('nav.login')}

-        </NavLink>

-      )}

-    </div>

-  );

-

-  return (

-    <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">

-      <Link to="/" className="navbar-brand d-flex align-items-center">

-        <TimelineLogo style={{ height: '1em' }} />

-        Timeline

-      </Link>

-

-      {isUpMd ? null : rightArea}

-

-      <NavbarToggler onClick={toggleMenu} />

-      <Collapse isOpen={isMenuOpen} navbar>

-        <Nav className="mr-auto" navbar>

-          <NavItem

-            className={

-              matchPath(history.location.pathname, '/settings')

-                ? 'active'

-                : undefined

-            }

-          >

-            <NavLink className="nav-link" to="/settings">

-              {t('nav.settings')}

-            </NavLink>

-          </NavItem>

-

-          <NavItem

-            className={

-              matchPath(history.location.pathname, '/about')

-                ? 'active'

-                : undefined

-            }

-          >

-            <NavLink className="nav-link" to="/about">

-              {t('nav.about')}

-            </NavLink>

-          </NavItem>

-

-          {isAdministrator && (

-            <NavItem

-              className={

-                matchPath(history.location.pathname, '/admin')

-                  ? 'active'

-                  : undefined

-              }

-            >

-              <NavLink className="nav-link" to="/admin">

-                Administration

-              </NavLink>

-            </NavItem>

-          )}

-        </Nav>

-        {isUpMd ? rightArea : null}

-      </Collapse>

-    </Navbar>

-  );

-};

-

-export default AppBar;

+import React from "react";
+import { useHistory, matchPath } from "react-router";
+import { Link, NavLink } from "react-router-dom";
+import { Navbar, NavbarToggler, Collapse, Nav, NavItem } from "reactstrap";
+import { useMediaQuery } from "react-responsive";
+import { useTranslation } from "react-i18next";
+
+import { useUser, useAvatar } from "../data/user";
+
+import TimelineLogo from "./TimelineLogo";
+import BlobImage from "./BlobImage";
+
+const AppBar: React.FC = (_) => {
+  const history = useHistory();
+  const user = useUser();
+  const avatar = useAvatar(user?.username);
+
+  const { t } = useTranslation();
+
+  const isUpMd = useMediaQuery({
+    minWidth: getComputedStyle(document.documentElement).getPropertyValue(
+      "--breakpoint-md"
+    ),
+  });
+
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const toggleMenu = React.useCallback((): void => {
+    setIsMenuOpen((oldIsMenuOpen) => !oldIsMenuOpen);
+  }, []);
+
+  const isAdministrator = user && user.administrator;
+
+  const rightArea = (
+    <div className="ml-auto mr-2">
+      {user != null ? (
+        <NavLink to={`/users/${user.username}`}>
+          <BlobImage
+            className="avatar small rounded-circle bg-white"
+            blob={avatar}
+          />
+        </NavLink>
+      ) : (
+        <NavLink className="text-light" to="/login">
+          {t("nav.login")}
+        </NavLink>
+      )}
+    </div>
+  );
+
+  return (
+    <Navbar dark className="fixed-top w-100 bg-primary app-bar" expand="md">
+      <Link to="/" className="navbar-brand d-flex align-items-center">
+        <TimelineLogo style={{ height: "1em" }} />
+        Timeline
+      </Link>
+
+      {isUpMd ? null : rightArea}
+
+      <NavbarToggler onClick={toggleMenu} />
+      <Collapse isOpen={isMenuOpen} navbar>
+        <Nav className="mr-auto" navbar>
+          <NavItem
+            className={
+              matchPath(history.location.pathname, "/settings")
+                ? "active"
+                : undefined
+            }
+          >
+            <NavLink className="nav-link" to="/settings">
+              {t("nav.settings")}
+            </NavLink>
+          </NavItem>
+
+          <NavItem
+            className={
+              matchPath(history.location.pathname, "/about")
+                ? "active"
+                : undefined
+            }
+          >
+            <NavLink className="nav-link" to="/about">
+              {t("nav.about")}
+            </NavLink>
+          </NavItem>
+
+          {isAdministrator && (
+            <NavItem
+              className={
+                matchPath(history.location.pathname, "/admin")
+                  ? "active"
+                  : undefined
+              }
+            >
+              <NavLink className="nav-link" to="/admin">
+                Administration
+              </NavLink>
+            </NavItem>
+          )}
+        </Nav>
+        {isUpMd ? rightArea : null}
+      </Collapse>
+    </Navbar>
+  );
+};
+
+export default AppBar;