ReviewOS
Reload

also looking at this

meemalabs/hoodratz.io

Production Launch - Nov 26, 2021

#10
Merged glennmichael123 wants to merge staging into main
54 files +6692 -333

Review threads live on the whole diff, not on one commit, so none are shown here - a thread's line means something in the branch's final form, and painting it into an intermediate step would put it on code it is not about.

.vscode/settings.jsonadded+26-0
@@ -0,0 +1,26 @@
1{
2 "editor.codeActionsOnSave": {
3 "source.fixAll.eslint": true
4 },
5 "[html]": {
6 "editor.defaultFormatter": "esbenp.prettier-vscode"
7 },
8 "[javascript]": {
9 "editor.defaultFormatter": "esbenp.prettier-vscode"
10 },
11 "[typescript]": {
12 "editor.defaultFormatter": "esbenp.prettier-vscode"
13 },
14 "[vue]": {
15 "editor.defaultFormatter": "octref.vetur"
16 },
17 "css.validate": false,
18 "editor.formatOnSave": true,
19 "search.exclude": {
20 "lib/**": true,
21 },
22 "vetur.validation.template": false,
23 "vetur.format.defaultFormatter.html": "prettier",
24 "vetur.format.defaultFormatter.js": "prettier-eslint",
25 "vetur.format.defaultFormatter.ts": "prettier-tslint",
26}
public/images/close.svgadded+3-0
@@ -0,0 +1,3 @@
1<svg color="white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
3</svg>
src/components/AppHeader.vuemodified+135-21
@@ -1,43 +1,157 @@
11<template>
22 <header class="bg-gray-7 font-sora">
3 <div class="container mx-auto h-16 md:h-24 px-6 flex items-center justify-between">
4 <a href="/" class="w-32"><img src="/images/logo.svg" alt=""></a>
3 <div
4 class="container flex items-center justify-between h-16 px-6 mx-auto md:h-24"
5 >
6 <router-link to="/" class="w-32"
7 ><img src="/images/logo.svg" alt=""
8 /></router-link>
59 <div class="md:hidden">
6 <img src="/images/menu.svg" alt="">
10 <img
11 v-if="!showMobile"
12 src="/images/menu.svg"
13 alt=""
14 @click="showMobile = !showMobile"
15 />
16 <img
17 v-else
18 src="/images/close.svg"
19 class="w-6 h-6 text-white"
20 alt=""
21 @click="showMobile = !showMobile"
22 />
723 </div>
8 <div class="hidden md:block text-white">
24 <div class="hidden text-white md:block">
925 <ul class="flex">
10 <li class="mx-4 flex flex-col items-center relative">
11 <router-link
26 <li class="relative flex flex-col items-center mx-4">
27 <router-link
1228 to="/"
1329 custom
14 v-slot="{ href, route, navigate, isActive, isExactActive }">
15 <a :class="{ 'text-pink-3': isActive }" :href="href">Home</a>
16 <div v-if="isActive" class="w-2 h-2 bg-pink-gradient rounded absolute bottom-0 -mb-3"></div>
30 v-slot="{ href, route, navigate, isActive, isExactActive }"
31 >
32 <a
33 :class="{ 'text-pink-3': isActive }"
34 @click="navigate"
35 :href="href"
36 >Home</a
37 >
38 <div
39 v-if="isActive"
40 class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient"
41 ></div>
1742 </router-link>
1843 </li>
19 <li class="mx-4 flex flex-col items-center relative">
20 <router-link
44 <li class="relative flex flex-col items-center mx-4">
45 <router-link
2146 to="/about"
2247 custom
23 v-slot="{ href, route, navigate, isActive, isExactActive }">
24 <a :class="{ 'text-pink-3': isActive }" :href="href">About</a>
25 <div v-if="isActive" class="w-2 h-2 bg-pink-gradient rounded absolute bottom-0 -mb-3"></div>
48 v-slot="{ href, route, navigate, isActive, isExactActive }"
49 >
50 <a
51 :class="{ 'text-pink-3': isActive }"
52 @click="navigate"
53 :href="href"
54 >About</a
55 >
56 <div
57 v-if="isActive"
58 class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient"
59 ></div>
2660 </router-link>
2761 </li>
28 <li class="mx-4 flex flex-col items-center relative">
29 <router-link
62 <li class="relative flex flex-col items-center mx-4">
63 <router-link
3064 to="/roadmap"
3165 custom
32 v-slot="{ href, route, navigate, isActive, isExactActive }">
33 <a :class="{ 'text-pink-3': isActive }" :href="href">Roadmap</a>
34 <div v-if="isActive" class="w-2 h-2 bg-pink-gradient rounded absolute bottom-0 -mb-3"></div>
66 v-slot="{ href, route, navigate, isActive, isExactActive }"
67 >
68 <a
69 @click="navigate"
70 :class="{ 'text-pink-3': isActive }"
71 :href="href"
72 >Roadmap</a
73 >
74 <div
75 v-if="isActive"
76 class="absolute bottom-0 w-2 h-2 -mb-3 rounded bg-pink-gradient"
77 ></div>
3578 </router-link>
3679 </li>
37 <li class="mx-4 cursor-not-allowed">Rarity <span class="bg-white text-gray-6 rounded-full px-1 text-xs uppercase">Soon</span></li>
38 <li class="mx-4 cursor-not-allowed">Merch <span class="bg-white text-gray-6 rounded-full px-1 text-xs uppercase">Soon</span></li>
80 <li class="mx-4 cursor-not-allowed">
81 Rarity
82 <span
83 class="px-1 text-xs uppercase bg-white rounded-full text-gray-6"
84 >Soon</span
85 >
86 </li>
87 <li class="mx-4 cursor-not-allowed">
88 Merch
89 <span
90 class="px-1 text-xs uppercase bg-white rounded-full text-gray-6"
91 >Soon</span
92 >
93 </li>
94 </ul>
95 </div>
96 </div>
97
98 <div v-show="showMobile" class="bg-white" id="mobile-menu">
99 <div class="px-2 pt-2 pb-3 space-y-1">
100 <ul>
101 <li>
102 <router-link
103 to="/"
104 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-8"
105 aria-current="page"
106 >Home</router-link
107 >
108 </li>
109 <li>
110 <router-link
111 to="/about"
112 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-8 hover:text-pink-3"
113 >About</router-link
114 >
115 </li>
116 <li>
117 <router-link
118 to="/roadmap"
119 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-8 hover:text-pink-3"
120 >Roadmap</router-link
121 >
122 </li>
123 <li>
124 <a
125 href="#"
126 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-4 hover:text-pink-3"
127 >Rarity</a
128 >
129 </li>
130 <li>
131 <a
132 href="#"
133 class="block px-3 py-6 text-lg font-medium rounded-md text-gray-4 hover:text-pink-3"
134 >Merch</a
135 >
136 </li>
39137 </ul>
40138 </div>
41139 </div>
42140 </header>
43141</template>
142
143<script>
144export default {
145 data() {
146 return {
147 showMobile: false,
148 };
149 },
150};
151</script>
152
153<style>
154.router-link-active {
155 @apply text-pink-3;
156}
157</style>
src/routes.jsmodified+13-15
@@ -1,24 +1,22 @@
1import Home from './views/Home.vue'
2import About from './views/About.vue'
3import Roadmap from './views/Roadmap.vue'
4import NotFound from './views/NotFound.vue'
1import Home from "./views/Home.vue";
2import About from "./views/About.vue";
3import Roadmap from "./views/Roadmap.vue";
4import NotFound from "./views/NotFound.vue";
55
66/** @type {import('vue-router').RouterOptions['routes']} */
77export const routes = [
8 { path: '/', component: Home, meta: { title: 'Home' } },
8 { path: "/", name: "home", component: Home, meta: { title: "Home" } },
99 {
10 path: '/about',
11 meta: { title: 'About' },
10 path: "/about",
11 name: "about",
12 meta: { title: "About" },
1213 component: About,
13 // example of route level code-splitting
14 // this generates a separate chunk (About.[hash].js) for this route
15 // which is lazy-loaded when the route is visited.
16 // component: () => import('./views/About.vue')
1714 },
1815 {
19 path: '/roadmap',
20 meta: { title: 'Roadmap' },
16 path: "/roadmap",
17 name: "roadmap",
18 meta: { title: "Roadmap" },
2119 component: Roadmap,
2220 },
23 { path: '/:path(.*)', component: NotFound },
24]
21 { path: "/:path(.*)", component: NotFound },
22];