Redesign desktop navigation option26#122

koiranos · Mar 24, 2020 · ca576f9 · ca576f9
1 parent 5b55de8
commit ca576f9
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -160,10 +160,12 @@
   "components": {
     "desktopMenu": {
       "yourOverview": "DEINE ÜBERSICHT",
+      "myOverview": "Meine Übersicht",
       "requestHelp": "HILFE ANFRAGEN",
       "help": "HELFEN",
       "FAQs": "FAQs",
-      "signOut": "ABMELDEN"
+      "signOut": "Logout",
+      "safety": "SICHERHEIT"
     },
     "sidebar": {
       "home": "Home",

diff --git a/src/App.jsx b/src/App.jsx
@@ -68,6 +68,9 @@ function App(props) {
         <div className="hidden md:flex justify-end md:mt-12 w-full phone-width items-center">
           {!user
           && <Link className="mr-4 font-open-sans text-gray-700" to="/signup/dashboard">{t('App.login')}</Link>}
+          {user && <>
+          <Link className="mr-4 font-open-sans text-gray-700" to="/dashboard">{t('components.desktopMenu.myOverview')}</Link> <Link className="mr-4 font-open-sans text-gray-700" to="#" onClick={signOut}>{t('components.desktopMenu.signOut')}</Link>
+          </>}
           <Link className="mr-4 font-open-sans text-gray-700" to="/presse">{t('App.press')}</Link>
           <ShareButtons />
         </div>

diff --git a/src/components/DesktopMenu.jsx b/src/components/DesktopMenu.jsx
@@ -7,26 +7,27 @@ export default function DesktopMenu(props) {
   const { t } = useTranslation();
 
   const MenuItem = (menuItemProps) => (
-    <li className="mr-6 hover:opacity-75">
+    <li className="mr-3 hover:opacity-75">
       <Link to={menuItemProps.to} onClick={menuItemProps.onClick}>{menuItemProps.children}</Link>
     </li>
   );
 
   const Menu = (menuProps) => (
     <Box className="flex w-1/2" flexDirection="column">
-      <ul className="font-exo2 flex justify-around text-xl font-semibold mt-10">
+      <ul className="font-exo2 flex justify-around text-lg font-semibold mt-5 mr-5 -ml-10">
         {menuProps.isLoggedIn
-          ? <MenuItem to="/dashboard">{t('components.desktopMenu.yourOverview')}</MenuItem>
+          ? <>
+              <MenuItem to="/dashboard">{t('components.desktopMenu.requestHelp')}</MenuItem>
+              <MenuItem to="/overview">{t('components.desktopMenu.help')}</MenuItem>
+              <MenuItem to="/dashboard">{t('components.desktopMenu.safety')}</MenuItem>
+            </>
           : (
             <>
               <MenuItem to="/ask-for-help">{t('components.desktopMenu.requestHelp')}</MenuItem>
               <MenuItem to="/overview">{t('components.desktopMenu.help')}</MenuItem>
             </>
           )}
         <MenuItem to="/faq">FAQs</MenuItem>
-        {menuProps.isLoggedIn
-          ? <MenuItem to="#" onClick={menuProps.signOut}>{t('components.desktopMenu.signOut')}</MenuItem>
-          : ''}
       </ul>
     </Box>
   );

diff --git a/src/components/ShareButtons.jsx b/src/components/ShareButtons.jsx
@@ -3,22 +3,22 @@ import React from 'react';
 export default function ShareButtons() {
   return (
     <div className="flex item">
-      <div className="mr-2 cursor-pointer">
+      <div className="mr-1 cursor-pointer">
         <a href="https://instagram.com/quarantaenehelden" target="_blank" rel="noopener noreferrer">
           <img alt="instagram" src={require('../assets/ig.svg')} className="w-8 opacity-50 hover:opacity-100 transition-all duration-200" />
         </a>
       </div>
-      <div className="mx-2 cursor-pointer">
+      <div className="mx-1 cursor-pointer">
         <a href="https://facebook.com/quarantaenehelden" target="_blank" rel="noopener noreferrer">
           <img alt="facebook" src={require('../assets/fb.svg')} className="w-8 opacity-50 hover:opacity-100 transition-all duration-200" />
         </a>
       </div>
-      <div className="mx-2 cursor-pointer">
+      <div className="mx-1 cursor-pointer">
         <a href="https://twitter.com/QuarantaeneHeld" target="_blank" rel="noopener noreferrer">
           <img alt="twitter" src={require('../assets/tw.svg')} className="w-8 opacity-50 hover:opacity-100 transition-all duration-200" />
         </a>
       </div>
-      <div className="ml-2 cursor-pointer">
+      <div className="ml-1 mr-2 cursor-pointer">
         <a href="https://github.com/kenodressel/quarantine-hero" target="_blank" rel="noopener noreferrer">
           <img alt="twitter" src={require('../assets/gh.svg')} className="w-8 opacity-50 hover:opacity-100 transition-all duration-200" />
         </a>

diff --git a/yarn.lock b/yarn.lock
@@ -8178,7 +8178,7 @@ node-notifier@^5.4.2:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*, node-pre-gyp@^0.14.0:
+node-pre-gyp@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
   integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
@@ -10134,6 +10134,11 @@ react-share@^4.1.0:
     classnames "^2.2.5"
     jsonp "^0.2.1"
 
+react-slider@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-1.0.3.tgz#89bd9cf0bb87f07ce27d8724efa584d9c6e6dca8"
+  integrity sha512-6HSkzHeyPthoCuQseZ16KQePdj0VloHllXXXmtO1733wGhFa2v1kKjIuGpfHAgWshqB3F7Xn2s5FxTu3xvFXbg==
+
 react-transition-group@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"