Migrate UI framework from Materialize CSS to Vuetify 4

frontend/package.json

@@ -9,14 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.2.0",
-    "@materializecss/materialize": "^1.1.0",
+    "@mdi/font": "^7.4.47",
     "axios": "^1.6.0",
     "github-markdown-css": "^5.5.0",
-    "material-design-icons-iconfont": "^6.7.0",
     "timeago.js": "^4.0.2",
     "vue": "^3.4.0",
-    "vue-router": "^4.2.0"
+    "vue-router": "^4.2.0",
+    "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",

frontend/src/App.vue

@@ -1,9 +1,11 @@
 <template>
-  <router-view></router-view>
+  <v-app>
+    <router-view />
+  </v-app>
 </template>
 
 <script>
 export default {
-  name: 'App'
-}
+  name: "App",
+};
 </script>

frontend/src/components/Preloader.vue

@@ -1,32 +1,20 @@
 <template>
-    <div class="preloader-background">
-        <div class="preloader-wrapper big active">
-            <div class="spinner-layer spinner-blue-only">
-                <div class="circle-clipper left">
-                    <div class="circle"></div>
-                </div>
-                <div class="gap-patch">
-                    <div class="circle"></div>
-                </div>
-                <div class="circle-clipper right">
-                    <div class="circle"></div>
-                </div>
-            </div>
-        </div>
-    </div>
+  <div class="preloader-background">
+    <v-progress-circular indeterminate color="primary" size="64" width="6" />
+  </div>
 </template>
 
 <style>
 .preloader-background {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    position: fixed;
-    z-index: 100;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 </style>

frontend/src/layouts/MainLayout.vue

@@ -1,55 +1,88 @@
 <template>
-  <div id="app">
-    <div>
-      <nav :class="[primaryColor, 'nav-extended']">
-        <div class="nav-wrapper container">
-          <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-          <span style="font-weight: 300; font-size: 1.2rem">{{ $route.name }}</span>
-          <ul id="nav-mobile" class="right hide-on-med-and-down">
-            <li :class="{ 'active': $route.path == '/' || $route.path.startsWith('/topic/') }">
-              <router-link to="/">Explore</router-link>
-            </li>
-            <li :class="{ 'active': $route.path == '/favorites' }">
-              <router-link to="/favorites">Favorites</router-link>
-            </li>
-            <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Extensions<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a href="/logout">Logout</a></li>
-          </ul>
-        </div>
-        <div v-if="$route.path == '/' || $route.path.startsWith('/topic/')" class="nav-content container">
-          <ul class="tabs tabs-transparent hide-scrollbar">
-            <li v-for="topic in topics" v-bind:key="topic" class="tab">
-              <router-link :to="topic == 'all' ? '/' : '/topic/' + topic">{{ topic.replace('-', ' ') }}</router-link>
-            </li>
-          </ul>
+  <div>
+    <v-navigation-drawer v-model="drawer" temporary>
+      <v-list nav density="comfortable">
+        <v-list-item title="Explore" :active="isExploreRoute" @click="goTo('/')" />
+        <v-list-item title="Favorites" :active="$route.path === '/favorites'" @click="goTo('/favorites')" />
+        <v-list-item title="Logout" href="/logout" />
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-app-bar color="primary" flat :extended="isExploreRoute">
+      <template #prepend>
+        <v-app-bar-nav-icon class="d-md-none" @click="drawer = !drawer" />
+      </template>
+
+      <v-container class="d-flex align-center">
+        <span class="route-title">{{ $route.name }}</span>
+        <v-spacer />
+        <div class="d-none d-md-flex align-center ga-1">
+          <v-btn variant="text" :to="'/'" :active="isExploreRoute" color="white">Explore</v-btn>
+          <v-btn variant="text" :to="'/favorites'" :active="$route.path === '/favorites'" color="white">Favorites</v-btn>
+
+          <v-menu location="bottom end">
+            <template #activator="{ props }">
+              <v-btn v-bind="props" variant="text" color="white" append-icon="mdi-menu-down">
+                Extensions
+              </v-btn>
+            </template>
+            <v-list density="compact">
+              <v-list-item
+                title="Chrome Extension"
+                href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl"
+                target="_blank"
+              />
+              <v-list-item
+                title="Edge Add-on"
+                href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa"
+                target="_blank"
+              />
+              <v-list-item
+                title="Firefox Add-on"
+                href="https://addons.mozilla.org/addon/gitrec/"
+                target="_blank"
+              />
+            </v-list>
+          </v-menu>
+
+          <v-btn variant="text" href="/logout" color="white">Logout</v-btn>
         </div>
-      </nav>
-    </div>
-    <ul class="sidenav" id="mobile-demo">
-      <li :class="{ 'active': $route.path == '/' || $route.path.startsWith('/topic/') }">
-        <router-link to="/">Explore</router-link>
-      </li>
-      <li :class="{ 'active': $route.path == '/favorites' }">
-        <router-link to="/favorites">Favorites</router-link>
-      </li>
-      <li><a href="/logout">Logout</a></li>
-    </ul>
-    <ul id="dropdown1" class="dropdown-content">
-      <li><a href="https://chrome.google.com/webstore/detail/gitrec/eihokbaeiebdenibjophfipedicippfl" target="_blank">Chrome Extension</a></li>
-      <li><a href="https://microsoftedge.microsoft.com/addons/detail/gitrec/cpcfbfpnagiffgpmfljmcdokmfjffdpa" target="_blank">Edge Add-on</a></li>
-      <li><a href="https://addons.mozilla.org/addon/gitrec/" target="_blank">Firefox Add-on</a></li>
-    </ul>
-    <router-view></router-view>
+      </v-container>
+
+      <template v-if="isExploreRoute" #extension>
+        <v-container>
+          <v-tabs
+            :model-value="activeTopic"
+            bg-color="primary"
+            color="white"
+            slider-color="white"
+            show-arrows
+            class="topic-tabs"
+          >
+            <v-tab
+              v-for="topic in topics"
+              :key="topic"
+              :value="topic"
+              :to="topicToPath(topic)"
+            >
+              {{ topicLabel(topic) }}
+            </v-tab>
+          </v-tabs>
+        </v-container>
+      </template>
+    </v-app-bar>
+
+    <v-main>
+      <router-view />
+    </v-main>
   </div>
 </template>
 
 <script>
-import M from "@materializecss/materialize";
 export default {
   data() {
     return {
-      primaryColor: "blue darken-1",
-      textColor: "white-text text-lighten-3",
+      drawer: false,
       topics: [
         "all",
         "python",
@@ -60,31 +93,42 @@ export default {
         "typescript",
         "c",
         "rust",
-      ]
+      ],
     };
   },
-  mounted() {
-    document.addEventListener("DOMContentLoaded", function () {
-      var sidenavElements = document.querySelectorAll(".sidenav");
-      M.Sidenav.init(sidenavElements);
-      var tabsElements = document.querySelectorAll(".tabs");
-      M.Tabs.init(tabsElements, {});
-      var dropdownElements = document.querySelectorAll('.dropdown-trigger');
-      M.Dropdown.init(dropdownElements, { constrainWidth: false });
-    });
-  }
+  computed: {
+    isExploreRoute() {
+      return this.$route.path === "/" || this.$route.path.startsWith("/topic/");
+    },
+    activeTopic() {
+      return this.$route.params.topic || "all";
+    },
+  },
+  methods: {
+    goTo(path) {
+      this.drawer = false;
+      if (this.$route.path !== path) {
+        this.$router.push(path);
+      }
+    },
+    topicToPath(topic) {
+      return topic === "all" ? "/" : `/topic/${topic}`;
+    },
+    topicLabel(topic) {
+      return topic.replace("-", " ").toUpperCase();
+    },
+  },
 };
 </script>
 
 <style>
-.hide-scrollbar::-webkit-scrollbar {
-  background: transparent;
-  width: 0px;
-  height: 0px;
+.route-title {
+  font-weight: 300;
+  font-size: 1.2rem;
+  color: #f5f5f5;
 }
 
-.hide-scrollbar {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.topic-tabs {
+  min-height: 42px;
 }
 </style>

frontend/src/main.js

@@ -1,10 +1,8 @@
 import { createApp } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
 
-import "@materializecss/materialize/dist/css/materialize.min.css";
-import "github-markdown-css/github-markdown.css";
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import "@fortawesome/fontawesome-free/css/all.css";
+import "github-markdown-css/github-markdown-light.css";
+import vuetify from "./plugins/vuetify";
 
 import App from "./App.vue";
 import MainLayout from "./layouts/MainLayout.vue";
@@ -31,4 +29,5 @@ const router = createRouter({
 
 const app = createApp(App);
 app.use(router);
+app.use(vuetify);
 app.mount("#app");

frontend/src/plugins/vuetify.js

@@ -0,0 +1,36 @@
+import "vuetify/styles";
+import "@mdi/font/css/materialdesignicons.css";
+
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import { aliases, mdi } from "vuetify/iconsets/mdi";
+
+export default createVuetify({
+  components,
+  directives,
+  icons: {
+    defaultSet: "mdi",
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+  theme: {
+    defaultTheme: "gitrec",
+    themes: {
+      gitrec: {
+        dark: false,
+        colors: {
+          primary: "#1e88e5",
+          secondary: "#26a69a",
+          accent: "#26a69a",
+          background: "#ffffff",
+          surface: "#ffffff",
+          "on-primary": "#f5f5f5",
+          "on-surface": "#1f2937",
+        },
+      },
+    },
+  },
+});