📱 Responsive phone

src/components/Documentation.vue

@@ -1,6 +1,6 @@
 <!-- This example requires Tailwind CSS v2.0+ -->
 <template>
-  <div class="z-40 top-0 left-0 w-full min-h-screen flex bg-gray-100">
+  <div class="z-40 top-0 left-0 w-full min-h-screen md:flex bg-gray-100">
     <TransitionRoot as="template" :show="sidebarOpen">
       <Dialog
         as="div"
@@ -24,7 +24,7 @@
           leave="transition ease-in-out duration-300 transform"
           leave-from="translate-x-0"
           leave-to="-translate-x-full">
-          <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
+          <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white overflow-x-hidden overflow-y-scroll">
             <TransitionChild
               as="template"
               enter="ease-in-out duration-300"
@@ -33,7 +33,7 @@
               leave="ease-in-out duration-300"
               leave-from="opacity-100"
               leave-to="opacity-0">
-              <div class="absolute top-0 right-0 -mr-12 pt-2">
+              <div class="absolute top-0 right-0 md:-mr-12 pt-2">
                 <button
                   type="button"
                   class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@@ -44,13 +44,7 @@
               </div>
             </TransitionChild>
             <div class="flex-1 h-0 pt-5 pb-4 ">
-              <div class="flex-shrink-0 flex items-center px-4">
+              <nav class="mt-12 sm:mt-5 px-2 space-y-2">
-                <img
-                  class="h-8 w-auto"
-                  src="https://tailwindui.com/img/logos/workflow-logo-indigo-600-mark-gray-800-text.svg"
-                  alt="Workflow" />
-              </div>
-              <nav class="mt-5 px-2 space-y-2">
                 <template v-for="item in documentation">
                   <div v-if="item.isMenu">
                     <p>{{ item.label }}</p>
@@ -72,23 +66,6 @@
                 </template>
               </nav>
             </div>
-            <div class="flex-shrink-0 flex border-t border-gray-200 p-4">
-              <a href="#" class="flex-shrink-0 group block">
-                <div class="flex items-center">
-                  <div>
-                    <img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
-                  </div>
-                  <div class="ml-3">
-                    <p class="text-base font-medium text-gray-700 group-hover:text-gray-900">
-                      Tom Cook
-                    </p>
-                    <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">
-                      View profile
-                    </p>
-                  </div>
-                </div>
-              </a>
-            </div>
           </div>
         </TransitionChild>
         <div class="flex-shrink-0 w-14">
@@ -129,7 +106,7 @@
         </div>
       </div>
     </div>
-    <div class="px-96 mx-auto flex flex-col flex-1 bg-gray-100 dark:bg-gray-800 dark:text-gray-600">
+    <div class="md:px-96 mx-auto flex flex-col flex-1 bg-gray-100 dark:bg-gray-800 dark:text-gray-600">
       <div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
         <button type="button" class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" @click="sidebarOpen = true">
           <span class="sr-only">Open sidebar</span>

src/components/Markdown.vue

@@ -65,7 +65,7 @@ h6 {
   }
 
   pre {
-    @apply bg-[#263238] rounded-md leading-7 px-3 py-2;
+    @apply bg-[#263238] overflow-x-scroll rounded-md leading-7 px-3 py-2;
     code {
       @apply text-[14px] text-[#bfbfbf];
       &.language {
@@ -135,13 +135,13 @@ h6 {
     }
   }
   .warning {
-    @apply rounded-md bg-yellow-50 dark:bg-yellow-500 border border-yellow-400 dark:border-yellow-900 w-1/2 flex flex-col p-4 my-5 relative;
+    @apply rounded-md bg-yellow-50 dark:bg-yellow-500 border border-yellow-400 dark:border-yellow-900 md:w-1/2 flex flex-col p-4 my-5 relative;
     &::before {
       content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> </svg>');
       @apply absolute transform left-0 translate-x-3 block h-6 w-6;
     }
     p {
-      @apply pl-8 text-sm font-medium text-yellow-800 dark:text-yellow-900 flex items-center;
+      @apply pl-8 text-sm font-medium text-yellow-800 dark:text-yellow-900 sm:flex items-center;
       & > code {
         @apply bg-yellow-100 dark:opacity-50 py-0.5 px-1 mx-1 rounded-md;
       }
@@ -160,20 +160,20 @@ h6 {
     }
   }
   .error {
-    @apply rounded-md bg-red-50 dark:bg-red-600 border border-red-400 dark:border-red-900 w-1/2 flex p-4 my-5 relative;
+    @apply rounded-md bg-red-50 dark:bg-red-600 border border-red-400 dark:border-red-900 md:w-1/2 flex p-4 my-5 relative;
     &::before {
       content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>');
       @apply absolute transform left-0 translate-x-3 block h-6 w-6;
     }
     p {
-      @apply pl-8 text-sm font-medium text-red-800 dark:text-red-900 flex items-center;
+      @apply pl-8 text-sm font-medium text-red-800 dark:text-red-900 sm:flex items-center;
       & > code {
         @apply bg-red-100 dark:opacity-50 py-0.5 px-1 mx-1 rounded-md;
       }
     }
   }
   .success {
-    @apply rounded-md bg-green-50 dark:bg-green-500 border border-green-400 dark:border-green-900 w-1/2 flex p-4 my-5 relative;
+    @apply rounded-md bg-green-50 dark:bg-green-500 border border-green-400 dark:border-green-900 md:w-1/2 flex p-4 my-5 relative;
     &::before {
       content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
       @apply absolute transform left-0 translate-x-3 block h-6 w-6;
@@ -186,7 +186,7 @@ h6 {
     }
   }
   .info {
-    @apply rounded-md bg-blue-50 dark:bg-blue-500 border border-blue-400 dark:border-blue-900 w-1/2 flex flex-col p-4 my-5 relative;
+    @apply rounded-md bg-blue-50 dark:bg-blue-500 border border-blue-400 dark:border-blue-900 md:w-1/2 flex flex-col p-4 my-5 relative;
     &::before {
       content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
       @apply absolute transform left-0 translate-x-3 block h-6 w-6;

src/templates/layouts/Base.vue

@@ -1,10 +1,10 @@
 <template>
   <Navbar />
-    <main class="pt-[64px] bg-white dark:bg-gray-800 transition duration-300 min-h-screen pb-10">
+    <main class="pt-[64px] overflow-x-hidden bg-white dark:bg-gray-800 transition duration-300 min-h-screen pb-10">
       <RouterView />
       <button
         @click.prevent="toggle()"
-        class="fixed z-50 bottom-5 left-5 w-10 h-10 border-2 rounded focus:outline-none"
+        class="fixed z-50 bottom-5 right-5 sm:right-0 sm:left-5 w-10 h-10 border-2 rounded focus:outline-none"
         :class="isDark() ? 'bg-gray-800 border-white' : 'bg-white border-gray-800'">
         <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
           <svg v-if="isDark()" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">

src/templates/modules/documentation/base/Getting-started.vue

@@ -24,11 +24,15 @@ onMounted(async () => {
 <style lang="scss">
 .getting-started {
   .markdown-viewer {
+    display: block !important;
+    & > p:nth-child(2), & > p:last-child, & > p:nth-last-child(3) {
+      @apply flex md:flex-wrap md:space-x-2 overflow-x-scroll;
+    }
     & > img {
-      @apply w-1/3;
+      @apply md:w-1/3;
     }
     & > p {
-      @apply flex space-x-2;
+      @apply md:flex-wrap md:space-x-2 overflow-x-scroll;
       code {
         @apply bg-red-500;
       }