First responsive pass

frontend/src/App.vue

@@ -1,12 +1,12 @@
 <template>
   <v-app>
-    <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
+    <div class="shell-container">
 
-      <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
+      <div class="shell-side">
         <side-bar></side-bar>
       </div>
 
-      <div class="ml-64 w-full flex justify-center items-center ">
+      <div class="shell-view">
         <router-view></router-view>
       </div>
 
@@ -20,6 +20,23 @@ import SideBar from "@/views/main/SideBar.vue";
 </script>
 
 <style scoped>
+.shell-container {
+  @apply flex;
+  @apply font-sans;
+  @apply bg-hBackground text-hOnBackground;
+  @apply flex-col lg:flex-row;
+}
 
+.shell-side {
+  @apply border border-[#3d3d3d];
+  @apply lg:min-h-screen;
+  @apply lg:fixed;
+  @apply border-b lg:border-b-0 lg:border-r;
+}
 
+.shell-view {
+  @apply flex justify-center items-center;
+  @apply w-full;
+  @apply lg:ml-64;
+}
 </style>

frontend/src/views/main/SideBar.vue

@@ -34,94 +34,142 @@ function toggleLanguage() {
 </script>
 
 <template>
-  <nav class="container">
-    <div class="m-4">
+  <nav class="side-container">
+
+    <div class="side-logo">
       <router-link to="/@hutopy">
+        <!-- Show full logo on medium and larger screens -->
         <img src="/images/hutopy-logo.png"
-             alt="hutopy logo">
+             alt="hutopy logo"
+             class="hidden md:block"
+             height="50">
+        <!-- Show icon version on small screens -->
+        <img alt="hutopy icon"
+             class="block md:hidden"
+             height="50"
+             src="/images/hutopy-icon.png"
+             width="50">
       </router-link>
     </div>
 
     <div class="flex-grow"></div>
 
-    <div class="flex flex-col gap-2 p-4">
+    <div class="side-menu">
 
-      <div class="flex items-center justify-start">
+      <div class="side-menu-portrait">
         <img :src="userProfileStore.portraitUrl"
              alt="Profile Image"
              referrerpolicy="no-referrer"
              class="rounded-full"
              width="42"
              height="42">
-        <span class="profile">{{ userProfileStore.alias }}</span>
+        <span class="profile-label">{{ userProfileStore.alias }}</span>
       </div>
 
-      <div v-if="authStore.isAuthenticated">
+      <div class="side-menu-items">
+
+        <template v-if="authStore.isAuthenticated">
           <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
-          <button class="action">
+            <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-            {{ t.myPage }}
+              <span class="label">{{ t.myPage }}</span>
             </button>
           </router-link>
           <router-link v-else to="/create-creator">
-          <button class="action">
+            <button class="menu-item-action">
               <i class="mdi mdi-file-account-outline"></i>
-            {{ t.myPage }}
+              <span class="label">{{ t.myPage }}</span>
             </button>
           </router-link>
-      </div>
+        </template>
 
-      <div v-if="authStore.isAuthenticated">
+        <template v-if="authStore.isAuthenticated">
           <router-link to="/profile">
-          <button class="action">
+            <button class="menu-item-action">
               <i class="mdi mdi-account"></i>
-            {{ t.myProfile }}
+              <span class="label">{{ t.myProfile }}</span>
             </button>
           </router-link>
-      </div>
+        </template>
 
-      <button class="action"
+        <button class="menu-item-action"
                 @click="toggleLanguage">
           <i class="mdi mdi-translate-variant"></i>
-        {{ locale }}
+          <span class="label">{{ locale }}</span>
         </button>
 
-      <div v-if="!authStore.isAuthenticated">
+        <template v-if="!authStore.isAuthenticated">
           <router-link to="/login">
-          <button class="action">
+            <button class="menu-item-action">
               <i class="mdi mdi-login"></i>
-            {{ t.signIn }}
+              <span class="label">{{ t.signIn }}</span>
             </button>
           </router-link>
-      </div>
+        </template>
         <div v-else>
-        <button @click="authStore.logout"
-                class="action">
+          <button class="menu-item-action"
+                  @click="authStore.logout">
             <i class="mdi mdi-logout"></i>
-          <span class="text-no-wrap">{{ t.signOut }}</span>
+            <span class="label">{{ t.signOut }}</span>
           </button>
         </div>
 
       </div>
-
+    </div>
   </nav>
 </template>
 
 <style scoped>
 
-.container {
-  @apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
+.side-container {
+  @apply flex;
+  @apply lg:flex-col lg:w-64 lg:max-w-64;
+  @apply h-16 lg:h-screen;
 }
 
-.profile {
-  @apply ml-4 text-lg font-sans capitalize;
+.side-logo {
+  @apply flex items-center justify-center;
+  @apply px-4 lg:px-0;
+}
+
+.side-menu {
+  @apply flex gap-2 p-4;
+  @apply items-center lg:items-stretch;
+  @apply flex-row-reverse lg:flex-col;
+}
+
+.side-menu-portrait {
+  @apply flex items-center justify-start;
+}
+
+.side-menu-items {
+  @apply flex;
+  @apply flex-row lg:flex-col;
+  @apply lg:gap-4;
+  @apply lg:w-full;
+}
+
+.profile-label {
+  @apply mx-4 text-lg font-sans capitalize;
   @apply font-semibold;
+  @apply text-nowrap;
+  @apply hidden lg:inline
 }
 
-.action {
+.label {
+  @apply text-nowrap;
+  /**/
+  @apply hidden lg:inline
+}
+
+.menu-item-action {
+  @apply bg-hBackground hover:bg-hSurface;
   @apply capitalize;
-  @apply w-full flex items-center gap-4 px-4 py-2 rounded;
-  @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
+  @apply flex items-center gap-4 py-2 rounded;
+  /* FIXME: The hover value is not semantically correct */
+  @apply mx-2 lg:mx-0;
+  @apply lg:px-4;
+  @apply w-10 h-10 justify-center lg:w-full lg:h-auto lg:justify-normal;
 }
 
 </style>