feat: add breadcrumb

Author: fu050409

.changes/breadcrumb.md

@@ -0,0 +1,5 @@
+---
+"algohub": patch:feat
+---
+
+Support for breadcrumbs in the AlgoHub toolbar.

src/components/UniversalToolBar.vue

@@ -5,6 +5,8 @@ import { useToast } from 'primevue';
 import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+const props = defineProps<{ path?: { icon: string, label: string, command: () => void }[] }>()
+
 const router = useRouter();
 const toast = useToast();
 
@@ -83,7 +85,15 @@ const toggleCreateMenu = (event: any) => {
     <div class="bg-gray-100 dark:bg-zinc-900 flex flex-row items-center justify-between w-full p-3 flex-wrap">
         <div class="inline-flex justify-center items-center">
             <img :src="themeStore.dark ? '/acm-light.png' : '/acm.png'" width="40"></img>
-            <h1 class="text-lg font-bold">Dashboard</h1>
+            <Breadcrumb :model="props.path">
+                <template #item="{ item }">
+                    <a :class="item.url ? 'cursor-pointer' : ''" :href="item.url">
+                        <span :class="item.icon"></span>
+                        <span>{{ item.label }}</span>
+                    </a>
+                </template>
+                <template #separator> / </template>
+            </Breadcrumb>
         </div>
         <div class="inline-flex justify-center items-center gap-3">
             <Button @click="toggleCreateMenu" aria-haspopup="true" aria-controls="overlay_menu" plain outlined>

src/views/dashboard.vue

@@ -5,6 +5,8 @@ import * as api from '@/scripts/api';
 import { useRouter } from 'vue-router';
 import { useToast } from 'primevue';
 
+const path = [{ label: 'Dashboard' }];
+
 const router = useRouter();
 const toast = useToast();
 
@@ -33,7 +35,7 @@ onMounted(async () => {
 
 <template>
     <div class="min-h-screen h-screen flex flex-col">
-        <UniversalToolBar></UniversalToolBar>
+        <UniversalToolBar :path></UniversalToolBar>
         <div class="flex flex-col md:flex-row h-full w-full">
             <aside class="w-full md:w-1/3 lg:w-1/4 flex">
                 <div

src/views/problem/[id].vue

@@ -51,6 +51,12 @@ const onSubmitCode = async (code: string, language: string) => {
     toast.add({ severity: 'success', summary: 'Success', detail: 'Your code has been submitted successfully.' });
 }
 
+const path = ref([
+    { label: 'fu050409' },
+    { label: 'problem' },
+    { label: id },
+]);
+
 const loading = ref(true);
 onMounted(async () => {
     const res = await api.fetchProblem(id, {
@@ -67,7 +73,7 @@ onMounted(async () => {
 
 <template>
     <div class="h-full w-full flex flex-col">
-        <UniversalToolBar></UniversalToolBar>
+        <UniversalToolBar :path></UniversalToolBar>
         <Splitter :gutterSize="2" class="flex-1 max-h-screen">
             <SplitterPanel>
                 <Panel v-if="!loading" :header="problem?.title" class="w-full h-full overflow-auto">

src/views/problem/create.vue

@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 import { useAccountStore } from '@/scripts/store';
 import { Thing } from '@/scripts/types';
 
+const path = [{ label: 'New problem' }];
+
 const router = useRouter();
 const toast = useToast();
 const $primevue = usePrimeVue();
@@ -220,7 +222,7 @@ const formatSize = (bytes: number) => {
 
 <template>
     <div class="min-h-screen h-full flex flex-col">
-        <UniversalToolBar></UniversalToolBar>
+        <UniversalToolBar :path></UniversalToolBar>
         <div class="max-w-full md:max-w-[768px] mx-auto">
             <Panel class="mt-10">
                 <div class="flex flex-col gap-8">