improve(ui): responsive

story2Dev · Jan 28, 2024 · 5393f67 · 5393f67
2 parents 27f3e2a + 6d56f65
commit 5393f67
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 16 deletions.
diff --git a/components/common/AppBar.vue b/components/common/AppBar.vue
@@ -54,7 +54,9 @@
         <li
           class="flex h-full w-12 items-center justify-center p-2 transition-all duration-200 hover:bg-gray-200 dark:hover:bg-gray-800"
         >
-          <Icon name="fluent:settings-20-regular" />
+          <n-badge :value="20" :max="15">
+            <Icon name="heroicons:bell" size="24" class="text-gray-500" />
+          </n-badge>
         </li>
         <li
           class="flex h-full w-12 items-center justify-center p-2 transition-colors duration-500 hover:bg-gray-200 dark:hover:bg-gray-800"

diff --git a/components/common/CommonFooter.vue b/components/common/CommonFooter.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <footer class="border-t border-slate-100 md:hidden">
+      <nav class="flex items-center justify-between gap-4 p-2 px-4">
+        <NuxtLink to="/">
+          <Icon name="ep:house" size="24" />
+        </NuxtLink>
+        <NuxtLink to="/documents">
+          <Icon name="system-uicons:document" size="24" />
+        </NuxtLink>
+
+        <div class="relative">
+          <n-button
+            circle
+            type="primary"
+            class="absolute -left-7 -top-10 h-14 w-14 shadow-xl"
+          >
+            <Icon name="system-uicons:plus" size="30" />
+          </n-button>
+        </div>
+        <NuxtLink to="/reports">
+          <Icon name="material-symbols-light:multiline-chart" size="24" />
+        </NuxtLink>
+        <NuxtLink to="/settings">
+          <Icon name="heroicons:cog" size="24" />
+        </NuxtLink>
+      </nav>
+    </footer>
+  </div>
+</template>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -2,20 +2,24 @@
   <div class="flex h-screen flex-col">
     <CommonAppBar />
 
-    <section class="flex h-full w-full">
-      <aside
-        class="group relative flex h-full w-14 flex-col items-center bg-gray-100 dark:bg-slate-700"
-      >
-        <div class="flex w-full items-center pt-4">
-          <CommonSideBar />
-        </div>
-      </aside>
+    <section class="flex flex-grow overflow-y-auto">
+      <div class="hidden md:block">
+        <aside
+          class="group relative flex h-full w-14 flex-col items-center bg-gray-100 dark:bg-slate-700"
+        >
+          <div class="flex w-full items-center pt-4">
+            <CommonSideBar />
+          </div>
+        </aside>
+      </div>
       <main class="flex h-full flex-grow flex-col">
-        <div class="h-full flex-grow py-2">
+        <div class="h-full flex-grow">
           <slot></slot>
         </div>
       </main>
     </section>
+
+    <CommonFooter />
   </div>
 </template>
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <section class="px-4">Dashboard</section>
-    <section class="mt-4 grid gap-4 md:grid-cols-2">
+    <section class="p-4">Dashboard</section>
+    <section class="grid gap-4 md:grid-cols-2">
       <div>
         <CommonQuizAccessApp class="px-4" />
         <article class="mt-4">
@@ -46,6 +46,14 @@
         </article>
       </div>
     </section>
+
+    <n-button
+      circle
+      type="primary"
+      class="bottom-4 right-4 hidden h-14 w-14 shadow-xl md:fixed md:flex"
+    >
+      <Icon name="system-uicons:plus" size="30" />
+    </n-button>
   </div>
 </template>
 

diff --git a/pages/settings.vue b/pages/settings.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="h-full">
+  <div class="h-full pt-4">
     <section
-      class="mx-auto flex h-full max-w-3xl gap-4 rounded-xl border border-slate-100 bg-white p-4 dark:border-slate-800 dark:bg-slate-900"
+      class="mx-auto flex h-full max-w-3xl divide-x divide-slate-100 rounded-xl border border-slate-100 bg-white dark:border-slate-800 dark:bg-slate-900"
     >
-      <article class="w-64">
+      <article class="w-64 p-4">
         <div>
           <n-input v-model:value="search" :placeholder="$t('search')">
             <template #prefix>
@@ -51,7 +51,7 @@
         </nav>
       </article>
 
-      <article class="flex-grow">
+      <article class="flex-grow p-4">
         <div class="mb-4 flex items-center gap-2">
           <button @click="$router.back()">
             <Icon name="system-uicons:chevron-left" size="20" />