From 68b3c5ebc43ccb3e92ee340cd4507a511288ae78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriela=20Pa=C5=82ka?= <gabi179@gmail.com>
Date: Wed, 8 Jan 2020 15:07:28 +0100
Subject: [PATCH] [CLEAR-58] Fix header

---
 front/components/Layout/ClearBowlHeader.vue | 162 +++++++++++---------
 1 file changed, 86 insertions(+), 76 deletions(-)

diff --git a/front/components/Layout/ClearBowlHeader.vue b/front/components/Layout/ClearBowlHeader.vue
index c8cde8b..2a2b27e 100644
--- a/front/components/Layout/ClearBowlHeader.vue
+++ b/front/components/Layout/ClearBowlHeader.vue
@@ -1,94 +1,104 @@
 <template>
-  <Header>
-    <Menu mode="horizontal" theme="dark" active-name="1">
-      <NuxtLink to="/">
-        <div class="layout-logo">
-          <img class="logo" src="../../static/bowl.png"/>
-          <div class="logo-text">ClearBowl</div>
-        </div>
-      </NuxtLink>
-      <div v-if="!$auth.loggedIn" class="layout-nav">
-        <NuxtLink to="/login">
-          <MenuItem name="login">
-            <Icon type="ios-log-in" size="20"/>
-            Zaloguj
-          </MenuItem>
-        </NuxtLink>
-        <NuxtLink to="/register">
-          <MenuItem name="register">
-            <Icon type="ios-person-add" size="20"/>
-            Zarejestruj
-          </MenuItem>
-        </NuxtLink>
-      </div>
-      <div v-else class="layout-nav">
-        <div style="display: flex">
-          <div>Witaj, {{ $auth.user.email }}</div>
-          <MenuItem name="logout">
-            <div @click="logout">
-              <Icon type="ios-log-out" size="20"/>
-              <span>Wyloguj</span>
-            </div>
-          </MenuItem>
-        </div>
-      </div>
-    </Menu>
-  </Header>
+    <Header>
+        <Menu mode="horizontal" theme="dark" active-name="1">
+            <Row>
+                <Col span="8">
+                    <NuxtLink to="/">
+                        <div class="layout-logo">
+                            <img class="logo" src="../../static/bowl.png"/>
+                            <div class="logo-text">ClearBowl</div>
+                        </div>
+                    </NuxtLink>
+                </Col>
+                <Col span="8" offset="8">
+                    <div v-if="!$auth.loggedIn" style="position: relative; float: right">
+                        <NuxtLink to="/login">
+                            <MenuItem name="login">
+                                <Icon type="ios-log-in" size="20"/>
+                                Zaloguj
+                            </MenuItem>
+                        </NuxtLink>
+                        <NuxtLink to="/register">
+                            <MenuItem name="register">
+                                <Icon type="ios-person-add" size="20"/>
+                                Zarejestruj
+                            </MenuItem>
+                        </NuxtLink>
+                    </div>
+                    <div v-else>
+                        <Row style="margin-bottom: 10px;">
+                            <Col span="16" style="text-align: right">
+                                <div>Witaj, {{ $auth.user.email }}</div>
+                            </Col>
+                            <Col span="8">
+                                <MenuItem name="logout">
+                                    <div @click="logout">
+                                        <Icon type="ios-log-out" size="20"/>
+                                        <span>Wyloguj</span>
+                                    </div>
+                                </MenuItem>
+                            </Col>
+                        </Row>
+                    </div>
+                </Col>
+            </Row>
+        </Menu>
+    </Header>
 </template>
 
 <script>
-  export default {
-    name: "ClearBowlHeader",
-    methods: {
-      logout() {
-        this.$auth.logout()
-      }
+    export default {
+        name: "ClearBowlHeader",
+        methods: {
+            logout() {
+                this.$auth.logout()
+            }
+        }
     }
-  }
 </script>
 
 <style scoped>
 
-  .ivu-menu-dark {
-    background: white;
-  }
+    .ivu-menu-dark {
+        background: white;
+    }
 
-  .ivu-layout-header {
-    background: white;
-    border-bottom: black solid;
-    border-width: thin;
-  }
+    .ivu-layout-header {
+        background: white;
+        border-bottom: black solid;
+        border-width: thin;
+    }
 
-  .layout-logo {
-    background: transparent;
-    float: left;
-    position: relative;
-    top: 10px;
-    left: 20px;
-  }
+    .layout-logo {
+        background: transparent;
+        float: left;
+        position: relative;
+        top: 10px;
+        left: 20px;
+    }
 
-  .logo {
-    max-width: 40px;
-    max-height: 40px;
-  }
+    .logo {
+        max-width: 40px;
+        max-height: 40px;
+    }
 
-  .logo-text {
-    color: black;
-    float: right;
-    font-size: 30px;
-    margin-top: -7px;
-    margin-left: 5px;
-  }
+    .logo-text {
+        color: black;
+        float: right;
+        font-size: 30px;
+        margin-top: -7px;
+        margin-left: 5px;
+    }
 
-  .layout-nav {
-    width: 320px;
-    margin: 0 auto;
-    margin-right: 20px;
-  }
+    /*.layout-nav {*/
+    /*    width: 320px;*/
+    /*    margin: 0 auto;*/
+    /*    margin-right: 20px;*/
+    /*}*/
 
-  .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
-    color: black;
-  }
+    .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
+        color: black;
+    }
 
 </style>