feat(admin): use navigation rail

package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@fancyapps/ui": "^5.0.22",
-    "@material-symbols/svg-700": "^0.12.0",
+    "@material-symbols/svg-700": "^0.13.0",
     "@material/web": "^1.0.0-pre.17",
     "animejs": "^3.2.1",
     "axios": "^1.5.0",
@@ -30,7 +30,7 @@
     "typed.js": "^2.0.16",
     "v-calendar": "^3.0.3",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
+    "vue-router": "^4.2.5",
     "vue3-toastify": "^0.1.13"
   },
   "devDependencies": {

src/App.vue

@@ -2,14 +2,24 @@
   <div class="min-h-screen">
     <md-linear-progress class="fixed right-0 left-0 top-0 min-w-full z-[1]" :indeterminate="store.isLoading" />
 
-    <div class="flex flex-col min-h-screen justify-between">
-      <VAppBar transparent />
-      <router-view v-slot="{ Component }">
-        <Transition name="slide-fade" mode="out-in">
-          <component :is="Component" />
-        </Transition>
-      </router-view>
-      <VFooter :class="{ 'flex-grow': route.name === 'Admin' || (store.isLoggedIn && route.name === 'My Orders') }" />
+    <div>
+      <VNavigationRail
+        :class="{ 'translate-x-0': route.path.startsWith('/admin') }"
+        class="hidden md:block fixed top-0 bottom-0 -translate-x-[80px]"
+        :selected="store.selectedRail"
+        :destinations="store.rails"
+        @select="id => store.selectedRail = id"
+      />
+
+      <div class="flex flex-col min-h-screen justify-between">
+        <VAppBar :class="{ 'pl-0 md:pl-[80px]': route.path.startsWith('/admin') }" transparent />
+        <router-view v-slot="{ Component }">
+          <Transition name="slide-fade" mode="out-in">
+            <component :is="Component" />
+          </Transition>
+        </router-view>
+        <VFooter :class="{ 'flex-grow': route.name === 'Admin' || (store.isLoggedIn && route.name === 'My Orders') }" />
+      </div>
     </div>
 
     <DialogMain />
@@ -30,6 +40,7 @@ import "@material/web/progress/linear-progress";
 import VAppBar from './components/VAppBar.vue';
 import VFooter from './components/VFooter.vue';
 import DialogMain from './components/dialogs/DialogMain.vue';
+import VNavigationRail from "./components/VNavigationRail.vue";
 
 // Get store
 const store = useStore();
@@ -94,6 +105,4 @@ makeRequest<any>("GET", Endpoints.Env, null, response => {
     store.isAdminLoggedIn = false;
   }
 });
-
-
 </script>

src/components/VAppBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-20">
+  <div class="h-20 appbar">
     <div class="container mx-auto px-4 flex items-center space-x-1 md:space-x-5 h-full">
       <!-- Back button -->
       <md-icon-button v-if="store.isShowBackButton" @click="back">
@@ -153,7 +153,7 @@ function back() {
 }
 
 .appbar {
-  @apply absolute top-0 left-0 right-0 h-20;
+  transition: padding 0.21s ease-in-out;
 }
 
 h3 {

src/components/VNavigationRail.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="rail">
+    <div>
+      <div
+        v-for="destination of destinations"
+        class="destination"
+        role="menuitem"
+        @click="emit('select', destination.id)"
+      >
+        <div class="icon" :class="{ 'selected': destination.id === selected }">
+          <md-icon
+            class="w-6 h-6 text-on-surface-variant"
+            v-html="icon(destination.icon, destination.id !== selected)"
+          />
+        </div>
+        <h5>{{ destination.title }}</h5>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { icon } from '~/utils/icon';
+
+defineProps<{
+  destinations: NavigationRailItem[],
+  selected: string
+}>();
+
+const emit = defineEmits(["select"]);
+</script>
+
+<style lang="scss" scoped>
+.rail {
+  @apply bg-surface dark:bg-background py-4 min-w-[80px] pt-6;
+  transition: transform .2s cubic-bezier(.2,0,0,1);
+}
+
+.destination {
+  @apply h-14 grid justify-center cursor-pointer;
+  margin: -2px auto 14px;
+
+  &:hover .icon {
+    @apply bg-surface-container-high;
+  }
+
+  .icon {
+    @apply h-8 w-14 flex items-center justify-center rounded-2xl mb-1 mx-3;
+    transition: font-variation-settings .2s cubic-bezier(.2,0,0,1);
+
+    &.selected {
+      @apply bg-secondary-container;
+    }
+  }
+
+  h5 {
+    @apply text-xs font-medium text-on-surface text-center px-2;
+  }
+}
+</style>

src/pages/admin/AdminPage.vue

@@ -1,27 +1,16 @@
 <template>
   <div class="h-full">
-    <div class="container mx-auto px-6">
-      <div class="overflow-x-scroll">
-        <md-tabs :selected="tabs.findIndex(t => t.id === tab)">
-          <md-secondary-tab v-for="t in tabs" :key="t.name" @click="tab = t.id">
-            <md-icon slot="icon" v-html="icon(t.icon)" />
-            {{ t.name }}
-          </md-secondary-tab>
-        </md-tabs>
-      </div>
-    </div>
-
     <div>
       <div class="flex justify-center mt-5 h-full">
         <Transition name="slide-fade" mode="out-in">
-          <TabDashboard v-if="tab === 'dashboard'" />
-          <TabAnnouncements v-else-if="tab === 'announcements'" />
-          <TabEvents v-else-if="tab === 'events'" />
-          <TabProducts v-else-if="tab === 'products'" />
-          <TabStudents v-else-if="tab === 'students'" />
-          <TabOrders v-else-if="tab === 'orders'" />
-          <TabSettings v-else-if="tab === 'settings'" />  
-          <TabEnvironment v-else-if="tab === 'env'" />
+          <TabDashboard v-if="store.selectedRail === 'dashboard'" />
+          <TabAnnouncements v-else-if="store.selectedRail === 'announcements'" />
+          <TabEvents v-else-if="store.selectedRail === 'events'" />
+          <TabProducts v-else-if="store.selectedRail === 'products'" />
+          <TabStudents v-else-if="store.selectedRail === 'students'" />
+          <TabOrders v-else-if="store.selectedRail === 'orders'" />
+          <TabSettings v-else-if="store.selectedRail === 'settings'" />  
+          <TabEnvironment v-else-if="store.selectedRail === 'env'" />
 
           <div class="flex justify-center items-center" v-else>
             Tab not found!
@@ -33,9 +22,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { Icon, icon } from "~/utils/icon";
+import { watch } from "vue";
+import { useRouter } from "vue-router";
+import { useStore } from "~/store";
 
 import "@material/web/tabs/tabs";
 import "@material/web/icon/icon";
@@ -50,29 +39,24 @@ import TabAnnouncements from "./tabs/TabAnnouncements.vue";
 import TabEvents from "./tabs/TabEvents.vue";
 import TabProducts from "./tabs/TabProducts.vue";
 
-type Tab = {
-  id: string;
-  name: string;
-  component: any;
-  icon: Icon;
-};
-
-const route = useRoute();
 const router = useRouter();
-const tabs: Tab[] = [
-  { id: "dashboard",     name: "Dashboard", component: TabDashboard, icon: "dashboard" },
-  { id: "announcements", name: "Announcements", component: TabAnnouncements, icon: "campaign" },
-  { id: "events",        name: "Events", component: TabEvents, icon: "event" },
-  { id: "products",      name: "Products", component: TabProducts, icon: "deployed_code" },
-  { id: "students",      name: "Students", component: TabStudents, icon: "groups" },
-  { id: "orders",        name: "Orders", component: TabOrders, icon: "shopping_cart" },
-  { id: "env",           name: "Environment Variables", component: TabOrders, icon: "tune" },
-  { id: "settings",      name: "Settings", component: TabOrders, icon: "settings" },
+const store = useStore();
+
+store.rails = [
+  { id: "dashboard", icon: "dashboard", title: "Dashboard" },
+  { id: "announcements", icon: "campaign", title: "Announce" },
+  { id: "events", icon: "event", title: "Events" },
+  { id: "products", icon: "deployed_code", title: "Products" },
+  { id: "students", icon: "groups", title: "Students" },
+  { id: "orders", icon: "shopping_cart", title: "Orders" },
+  { id: "env", icon: "tune", title: "Variables" },
+  { id: "settings", icon: "settings", title: "Settings" },
 ];
 
-const tab = ref(route.params.tab);
+// Set selected rail
+store.selectedRail = router.currentRoute.value.params.tab as string;
 
-watch(tab, v => {
+watch(() => store.selectedRail,  v => {
   router.push({ name: "Admin", params: { tab: v } });
 });
 </script>

src/pages/admin/components/CardAnnouncement.vue

@@ -7,7 +7,7 @@
       <h6 class="label-medium">{{ getReadableDate(data.date_stamp) }}</h6>
     </div>
 
-    <div class="body-medium">
+    <div class="body-small">
       {{ data.content }}
     </div>
   </div>

src/pages/admin/components/CardEvent.vue

@@ -6,7 +6,7 @@
         <div class="flex justify-between gap-6 w-full">
           <div class="flex gap-6">
             <div class="text-primary">
-              <h3 class="headline-small font-bold">{{ event.date.substring(8, 10) }}</h3>
+              <h3 class="headline-small text-center font-bold">{{ event.date.substring(8, 10) }}</h3>
               <h5 class="text-center font-medium title-medium">{{ getMonthName(parseInt(event.date.substring(5, 7))).toUpperCase() }}</h5>
             </div>  
             <div class="flex flex-col gap-1 justify-center">

src/pages/admin/components/CardOrder.vue

@@ -29,7 +29,7 @@
             <h3 class="label-medium mt-0.5 font-medium text-outline">
               {{ mapOrderStatusLabel(order.status) }}
             </h3>
-            <span class="text-outline">{{ getReadableDate(order.date_stamp) }}</span>
+            <span class="text-outline">{{ getReadableDate(order.date_stamp, true) }}</span>
           </div>
         </div>
       </div>

src/pages/admin/tabs/TabOrders.vue

@@ -18,7 +18,7 @@
       </md-outlined-select>
     </div>
 
-    <div class="flex justify-center items-center flex-wrap gap-2 mt-4">
+    <div class="flex justify-center items-center flex-wrap gap-2 mt-4 px-6">
       <md-filter-chip
         v-for="s in status"
         elevated
@@ -29,7 +29,7 @@
       />
     </div>
 
-    <div v-if="data.orders.length > 0" class="space-y-3 mt-8 w-full lg:w-2/3 xl:w-1/2 2xl:w-2/5">
+    <div v-if="data.orders.length > 0" class="space-y-3 mt-8 w-full md:w-3/4 lg:w-1/2 2xl:w-1/3">
       <div v-for="(order, i) in data.orders" :key="order.id">
         <p class="label-large font-medium text-on-surface-variant mb-3 text-left" v-if="getMonthCategory(order, i)">{{ getMonthCategory(order, i) }}</p>
         <CardOrder :order="order" @click="goToOrder(order.reference)" />

src/pages/admin/tabs/TabsStudents.vue

@@ -34,7 +34,7 @@
       />
     </div>
 
-    <div v-if="data.students.length > 0" class="space-y-3 mt-5 w-full lg:w-3/4 2xl:w-1/2">
+    <div v-if="data.students.length > 0" class="space-y-3 mt-5 w-full md:w-3/4 lg:w-1/2 2xl:w-1/3">
       <CardStudent v-for="student in data.students" :key="student.id" :student="student" />
     </div>
     <div v-else class="flex justify-center mt-8 flex-grow">

src/scss/main.scss

@@ -109,6 +109,15 @@ img {
   @apply bg-error-container text-on-error-container;
 }
 
+.hide-scrollbar {
+  @apply px-6;
+
+  &::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
+}
+
 md-filled-button, md-text-button,
 md-outlined-button, md-filled-tonal-button,
 md-elevated-button {

src/store/index.ts

@@ -4,6 +4,8 @@ export * from "./dialog"
 
 export const useStore = defineStore("global", () => {
   const errorMessage = "";
+  const selectedRail = "dashboard";
+  const rails: NavigationRailItem[] = [];
 
   const isLoggedIn = undefined as boolean | undefined;
   const isAdminLoggedIn = undefined as boolean | undefined;
@@ -34,6 +36,6 @@ export const useStore = defineStore("global", () => {
 
   return {
     isShowBackButton, isDark, isLoggedIn, student, isLoading, errorMessage,
-    checkoutDetails, admin, isAdminLoggedIn
+    checkoutDetails, admin, isAdminLoggedIn, rails, selectedRail
   }
 });

src/types/index.d.ts

@@ -231,6 +231,12 @@ declare global {
     link?: string
   }
 
+  type NavigationRailItem = {
+    id: string,
+    title: string,
+    icon: Icon,
+  }
+
   type StoreKeys = "dark" | "std_token" | "adm_token" | "home_msg_role" |
     "login_id" | "student" | "tabs_orders_status";
 }

src/utils/date.ts

@@ -4,9 +4,9 @@ const months3 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
  * Convert date to readable format
  * @param date YYYY-MM-DD HH:MM:SS format
  */
-export function getReadableDate(date: string) {
+export function getReadableDate(date: string, shortMonth = false) {
   const dateObj = new Date(date);
-  const month = dateObj.toLocaleString('default', { month: 'long' });
+  const month = dateObj.toLocaleString('default', { month: shortMonth ? 'short' : 'long' });
   const day = dateObj.getDate();
   const year = dateObj.getFullYear();
   const time = dateObj.toLocaleString('default', { hour: 'numeric', minute: 'numeric', hour12: true });