Merge branch 'main' into peminjaman

app.vue

@@ -23,7 +23,7 @@ useHead({
     },
   ],
   bodyAttrs: {
-    class: "dark:bg-surface-900 dark:text-gray-300",
+    class: "bg-surface-200/80 dark:bg-surface-900 dark:text-gray-300",
   },
 })
 </script>

assets/base.css

@@ -43,18 +43,18 @@
   --p-primary-700: #23514e;
   --p-primary-900: #1c4240;
 
-  --p-surface-0: #ffffff;
-  --p-surface-50: #f8fafc;
-  --p-surface-100: #f1f5f9;
-  --p-surface-200: #e2e8f0;
-  --p-surface-300: #cbd5e1;
-  --p-surface-400: #94a3b8;
-  --p-surface-500: #64748b;
-  --p-surface-600: #475569;
-  --p-surface-700: #23514e;
-  --p-surface-800: #121d31;
-  --p-surface-900: #0f172a;
-  --p-surface-950: #030e0d;
+  --p-surface-0: hsl(0 0% 100%);
+  --p-surface-50: hsl(210 40% 98%);
+  --p-surface-100: hsl(210 32% 91%);
+  --p-surface-200: hsl(210 35% 80%);
+  --p-surface-300: hsl(213 27% 84%);
+  --p-surface-400: hsl(215 20% 65%);
+  --p-surface-500: hsl(215 16% 47%);
+  --p-surface-600: hsl(215 19% 35%);
+  --p-surface-700: hsl(219 35% 17%);
+  --p-surface-800: hsl(219 46% 13%);
+  --p-surface-900: hsl(222 47% 11%);
+  --p-surface-950: hsl(175 65% 3%);
 
   --p-content-border-radius: 0.5rem;
 }

assets/main.css

@@ -14,6 +14,9 @@ input {
 label {
   display: block;
   padding-block-start: 0.75rem;
+  line-height: 1;
+
+  @apply dark:text-gray-300;
 }
 
 button:disabled {
@@ -54,7 +57,7 @@ a {
 }
 
 .main-section {
-  @apply p-4 bg-slate-200 dark:bg-surface-800/70 rounded-lg;
+  @apply p-6 bg-slate-100 dark:bg-surface-800/70 rounded-lg;
 }
 
 table {

components/TheFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="dark:bg-surface-800">
+  <footer class="dark:bg-surface-700">
     <p>Klrfl, 2023.</p>
     <a class="block" href="https://github.com/pplg-smkmetland/metschoo-library">
       This website on Github

components/TheNavbar.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
+import MdiHamburgerMenu from "~icons/mdi/hamburger-menu"
+import MdiClose from "~icons/mdi/close"
+
 const openNavBtn = ref(null)
 const closeNavBtn = ref(null)
 const navlinks = ref<HTMLUListElement | null>(null)
 
 function openNav() {
-  navlinks.value?.classList.add("active")
+  navlinks.value?.classList.remove("-translate-y-full")
+  navlinks.value?.classList.add("-translate-y-0")
 }
 
 function closeNav() {
-  navlinks.value?.classList.remove("active")
+  navlinks.value?.classList.add("-translate-y-full")
+  navlinks.value?.classList.remove("-translate-y-0")
 }
 
 const user = useSupabaseUser()
@@ -18,20 +23,25 @@ const isAdmin = computed(() =>
 </script>
 
 <template>
-  <nav class="bg-primary text-primary-contrast z-10 navbar shadow-md">
+  <nav
+    class="flex justify-between items-center sticky top-0 bg-primary dark:bg-surface-700/90 text-primary-contrast z-10 shadow-md navbar"
+  >
     <div class="logo">
-      <img src="/logo.svg" alt="Logo Metschoo Library" />
+      <img src="/logo.svg" alt="Logo Metschoo Library" class="h-14" />
     </div>
 
-    <ul ref="navlinks" class="nav-links">
-      <li class="nav-links__header">
+    <ul
+      ref="navlinks"
+      class="flex flex-col absolute top-0 left-0 -translate-y-full w-full md:flex-row md:relative md:translate-y-0 md:w-auto bg-inherit dark:bg-surface-700 transition-transform z-10"
+    >
+      <li class="flex justify-between md:hidden md:appearance-none">
         <div class="logo">
           <NuxtLink to="/">
-            <img src="/logo.svg" alt="Logo Metschoo Library" />
+            <img src="/logo.svg" alt="Logo Metschoo Library" height="50" class="w-16" />
           </NuxtLink>
         </div>
-        <button ref="closeNavBtn" class="nav-btn close" @click="closeNav">
-          <i class="fa-solid fa-xmark" />
+        <button ref="closeNavBtn" class="nav-btn" @click="closeNav">
+          <MdiClose />
         </button>
       </li>
       <li>
@@ -43,116 +53,58 @@ const isAdmin = computed(() =>
       <li>
         <NuxtLink class="nav-link" to="/wishlist"> Wishlist </NuxtLink>
       </li>
+
       <template v-if="user">
         <li v-if="!isAdmin">
-          <NuxtLink to="/profil" class="nav-link nav-link--cta"> Profil </NuxtLink>
+          <NuxtLink to="/profil" class="nav-link bg-primary-700"> Profil </NuxtLink>
         </li>
         <li v-else>
-          <NuxtLink to="/admin" class="nav-link nav-link--cta"> Admin </NuxtLink>
+          <NuxtLink to="/admin" class="nav-link bg-primary-700"> Admin </NuxtLink>
         </li>
       </template>
       <li v-else>
-        <NuxtLink to="/login" class="nav-link nav-link--cta"> Masuk </NuxtLink>
+        <NuxtLink to="/login" class="nav-link bg-primary-700"> Masuk </NuxtLink>
       </li>
     </ul>
 
-    <button ref="openNavBtn" class="nav-btn open" @click="openNav">
-      <i class="fa-solid fa-bars" />
+    <button ref="openNavBtn" class="nav-btn" @click="openNav">
+      <MdiHamburgerMenu />
     </button>
   </nav>
 </template>
 
 <style scoped>
 .navbar {
   grid-area: navbar;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: sticky;
-  top: 0;
-}
-
-.logo img {
-  height: 3.5rem;
-}
-
-.nav-links {
-  background: inherit;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  left: 0;
-  translate: 0 -100%;
-  transition: translate 200ms ease;
-}
-
-.nav-links.active {
-  translate: 0 0;
-  z-index: 10;
-}
-
-.nav-links__header {
-  padding-inline: 0.5rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .nav-link,
 .nav-btn {
-  color: inherit;
-  text-decoration: none;
-  padding: 1rem;
-  display: block;
-  position: relative;
+  @apply text-gray-300/90 hover:text-gray-100 dark:hover:bg-surface-800 transition-colors p-4 block relative;
 }
 
-.nav-link--cta {
-  background: var(--primary-200);
+.nav-btn {
+  @apply md:hidden;
 }
 
-.nav-link.active::before {
+.nav-link::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 100%;
-  width: 0.4rem;
-  background: var(--nav-link-active);
-}
-
-@media (hover: hover) {
-  .nav-links a:hover {
-    background: var(--primary-200);
+  width: 100%;
+  height: 0.2rem;
+  transition: opacity 200ms ease;
+  opacity: 0;
+  background: var(--p-primary-700);
+
+  @media screen and (max-width: 50em) {
+    width: 0.2rem;
+    height: 100%;
   }
 }
 
-@media screen and (min-width: 50em) {
-  .nav-link.active::before {
-    height: 0.4rem;
-    width: 100%;
-  }
-
-  .nav-links {
-    flex-direction: row;
-    position: relative;
-    translate: 0;
-    width: auto;
-  }
-
-  .nav-links__header {
-    display: none;
-  }
-
-  .nav-btn {
-    display: none;
-  }
+.nav-link.router-link-active::before {
+  opacity: 1;
 }
 </style>