From 0aeff20c9720758be9418117a7fa2a37bbd099de Mon Sep 17 00:00:00 2001
From: Daniel Lundin <daniel.lundin@embark-studios.com>
Date: Wed, 9 Oct 2019 12:54:36 +0200
Subject: [PATCH] Hide end nav section on small screens

---
 ui/src/Nav.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/src/Nav.svelte b/ui/src/Nav.svelte
index 80d75d3..2eb3b71 100644
--- a/ui/src/Nav.svelte
+++ b/ui/src/Nav.svelte
@@ -8,13 +8,21 @@
   export let user;
 </script>
 
+<style>
+  @media screen and (max-width: 800px) {
+    .user {
+      display: none;
+    }
+  }
+</style>
+
 <TopAppBar variant="static" color="primary">
   <Row>
     <Section>
       <Title>Wireguard VPN</Title>
     </Section>
     <Section align="end" toolbar>
-     Logged in as {user}
+      <small class="user">Logged in as {user}</small>
     </Section>
   </Row>
 </TopAppBar>