Update docs UI

Author: netervati

components/content/ProseLi.vue

@@ -1,3 +1,3 @@
 <template>
-  <li class="mb-6 mt-6"><slot /></li>
+  <li class="mb-6 mt-6 md:mb-8 md:mt-8 md:text-lg"><slot /></li>
 </template>

components/content/ProseP.vue

@@ -1,3 +1,3 @@
 <template>
-  <p class="mb-6 mt-6"><slot /></p>
+  <p class="mb-6 mt-6 md:mb-8 md:mt-8 md:text-lg"><slot /></p>
 </template>

components/logoLink.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
   type Props = {
+    class?: string;
+    isButton?: boolean;
     to?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    class: '',
+    isButton: true,
     to: '/',
   });
+
+  const mergeClass = () => {
+    return {
+      'btn btn-ghost': props.isButton,
+      [props.class]: props.class !== '',
+    }
+  }
 </script>
 
 <template>
   <NuxtLink
     :to="props.to"
-    class="btn btn-ghost gap-x-2 normal-case text-xl"
+    :class="mergeClass()"
+    class="font-bold gap-x-2 normal-case text-xl"
   >
     <img width="36" src="/logo.png" /> PseudoRESTAPI
   </NuxtLink>

layouts/docs.vue

@@ -9,25 +9,33 @@
 </script>
 
 <template>
-  <div class="drawer">
-    <input id="my-drawer" type="checkbox" class="drawer-toggle" />
+  <div class="drawer drawer-mobile">
+    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
     <div class="drawer-content">
       <nav class="bg-base-100 border-b border-gray-300 navbar">
         <div class="flex-1">
-          <label for="my-drawer" class="btn btn-ghost btn-sm drawer-button">
+          <label for="my-drawer-2" class="btn btn-ghost btn-sm drawer-button lg:hidden">
             <Bars3Icon class="h-6 w-6" />
           </label>
-          <LogoLink />
+          <LogoLink class="md:hidden" to="/docs" />
         </div>
         <div class="flex-none" />
       </nav>
       <slot />
-    </div>
-    <div class="drawer-side">
-      <label for="my-drawer" class="drawer-overlay"></label>
-      <ul class="menu p-4 w-80 h-full bg-base-200 text-base-content">
+    </div> 
+    <div class="drawer-side border-r border-slate-300">
+      <label for="my-drawer-2" class="drawer-overlay"></label>
+      <ul class="p-4 w-80 bg-base-100 text-base-content">
+        <li class="hidden md:flex">
+          <LogoLink class="w-full" to="/docs" />
+        </li>
         <li v-for="doc in docLinks" :key="doc.link">
-          <NuxtLink :to="doc.link">{{ doc.text }}</NuxtLink>
+          <NuxtLink
+            :to="doc.link"
+            class="btn btn-ghost font-normal normal-case text-lg w-full justify-start"
+          >
+            {{ doc.text }}
+          </NuxtLink>
         </li>
       </ul>
     </div>

nuxt.config.ts

@@ -14,6 +14,11 @@ export default defineNuxtConfig({
       noscript: [{ children: 'JavaScript is required' }],
     },
   },
+  content: {
+    highlight: {
+      theme: 'github-light',
+    },
+  },
   css: ['~/assets/css/main.css'],
   modules: [
     '@nuxt/content',

pages/docs/[...slug].vue

@@ -5,7 +5,7 @@
 </script>
 
 <template>
-  <section class="p-6">
+  <section class="pb-8 pt-8 pl-10 pr-10">
     <ContentDoc />
   </section>
 </template>