From a9d24d0ebc2d82009887b0b61aff3a5e7d827a78 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 28 Sep 2020 22:42:03 +0300
Subject: [PATCH] closes #111

---
 .../public/locales/en/translation.json        |  2 +-
 .../src/components/root/FooterWaves.tsx       |  2 +-
 frontend-react/src/components/root/TopNav.tsx | 49 ++++++++++++++-----
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/frontend-react/public/locales/en/translation.json b/frontend-react/public/locales/en/translation.json
index e42b7b1e9..c536560d9 100644
--- a/frontend-react/public/locales/en/translation.json
+++ b/frontend-react/public/locales/en/translation.json
@@ -1191,7 +1191,7 @@
     "Plus Server": "Plus Server",
     "Profile": "Profile",
     "Log out": "Log out",
-    "Log in via Discord": "Login via Discord",
+    "Log in via Discord": "Log in via Discord",
     "Choose language": "Choose language",
     "Choose theme": "Choose theme",
     "Browser": "Browser",
diff --git a/frontend-react/src/components/root/FooterWaves.tsx b/frontend-react/src/components/root/FooterWaves.tsx
index b5b6e3bdb..3a75e197f 100644
--- a/frontend-react/src/components/root/FooterWaves.tsx
+++ b/frontend-react/src/components/root/FooterWaves.tsx
@@ -9,7 +9,7 @@ export const FooterWaves = () => {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 225">
       <path
         fill={colorMode === "dark" ? themeColorHexLighter : themeColorHex}
-        fill-opacity="1"
+        fillOpacity="1"
         d="M0,128L60,138.7C120,149,240,171,360,160C480,149,600,107,720,85.3C840,64,960,64,1080,90.7C1200,117,1320,171,1380,197.3L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
       ></path>
     </svg>
diff --git a/frontend-react/src/components/root/TopNav.tsx b/frontend-react/src/components/root/TopNav.tsx
index 30459b8af..442d1175a 100644
--- a/frontend-react/src/components/root/TopNav.tsx
+++ b/frontend-react/src/components/root/TopNav.tsx
@@ -1,5 +1,16 @@
 import { useQuery } from "@apollo/react-hooks"
-import { Box, Flex, Grid, IconButton, useColorMode } from "@chakra-ui/core"
+import {
+  Box,
+  Flex,
+  Grid,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuGroup,
+  MenuItem,
+  MenuList,
+  useColorMode,
+} from "@chakra-ui/core"
 import { Link } from "@reach/router"
 import React, { Suspense, useContext } from "react"
 import { useTranslation } from "react-i18next"
@@ -14,7 +25,9 @@ import ColorSelector from "./ColorSelector"
 import { LanguageSelector } from "./LanguageSelector"
 
 const TopNav = () => {
-  const { bgColor, colorMode } = useContext(MyThemeContext)
+  const { bgColor, colorMode, darkerBgColor, textColor } = useContext(
+    MyThemeContext
+  )
   const { toggleColorMode } = useColorMode()
 
   const UserItem = () => {
@@ -30,17 +43,29 @@ const TopNav = () => {
           </Button>
         </a>
       )
-
+    //*<Link to={`/u/${data.user.discord_id}`}>
     return (
-      <Link to={`/u/${data.user.discord_id}`}>
-        <UserAvatar
-          src={data.user.avatar}
-          name={data.user.username}
-          size="sm"
-          m={1}
-          cursor="pointer"
-        />
-      </Link>
+      <Menu>
+        <MenuButton>
+          <UserAvatar
+            src={data.user.avatar}
+            name={data.user.username}
+            size="sm"
+            m={1}
+            cursor="pointer"
+          />
+        </MenuButton>
+        <MenuList bg={darkerBgColor} color={textColor}>
+          <MenuGroup title={data.user.username}>
+            <Link to={`/u/${data.user.discord_id}`}>
+              <MenuItem>{t("navigation;Profile")}</MenuItem>
+            </Link>
+            <a href="/logout">
+              <MenuItem>{t("navigation;Log out")}</MenuItem>
+            </a>
+          </MenuGroup>
+        </MenuList>
+      </Menu>
     )
   }