Center text in navigation.

src/assets/nav-items.css

@@ -1,6 +1,14 @@
 .nav-item {
-  @apply flex flex-col items-center p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  @apply hover:bg-surface-800 rounded-border text-surface-300 hover:text-white;
   span {
-    @apply font-medium inline text-base lg:text-xs lg:block;
+    @apply text-base;
+    text-align: center;
   }
 }
+.nav-icon {
+  @apply text-base;
+}

src/components/Navigation.vue

@@ -32,9 +32,6 @@
 
 <style scoped>
 @import "@/assets/nav-items.css";
-.nav-icon {
-  @apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
-}
 nav {
   display: flex;
   flex-direction: row;

src/components/Sidebar.vue

@@ -48,7 +48,7 @@ const toggle = (event: Event) => { menu.value.toggle(event); };
         <div v-else>
           <Avatar v-bind:label="sessionStore.initials" size="large" shape="circle" />
         </div>
-        <span class="inline lg:hidden">{{ sessionStore.user.name }}</span>
+        <span>{{ sessionStore.user.name }}</span>
       </a>
       <Menu ref="menu" id="overlay_menu" :model="items" :popup="true">
         <template #item="{ item, props }">