minor navbar changes

ulf-frostypaw · Apr 20, 2023 · ae7e1e1 · ae7e1e1
1 parent fd938e6
commit ae7e1e1
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 79 deletions.
diff --git a/.nvmrc b/.nvmrc
diff --git a/website/app.vue b/website/app.vue
@@ -8,18 +8,19 @@ useCalcViewport()
 </script>
 
 <template>
-  <NuxtLoadingIndicator />
-	<NuxtLayout>
+	<div>
+		<TheBaseNavbar />
 		<NuxtPage />
-	</NuxtLayout>
+		<TheBaseFooter />
+	</div>
 </template>
 
 <style lang="scss">
 body {
-  @apply bg-base-900 text-base-50;
+	@apply bg-base-900 text-base-50;
 }
 
 ::selection {
-  @apply bg-pink-500;
+	@apply bg-purple-500;
 }
 </style>
diff --git a/website/components/Base/Button.vue b/website/components/Base/Button.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+	link?: string
+	external?: boolean
+  layout?: "default" | "headless"
+}>()
+</script>
+
+<template>
+	<button v-if="!props.link">
+		<slot />
+	</button>
+	<NuxtLink v-else :to="link">
+		<slot />
+	</NuxtLink>
+</template>
+
+<style lang="scss" scoped>
+button,
+a {
+	@apply px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-base-200 border transition-colors;
+}
+</style>
diff --git a/website/components/Dropdown/DropdownItem.vue b/website/components/Dropdown/DropdownItem.vue
diff --git a/website/components/TheBaseNavbar.vue b/website/components/TheBaseNavbar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Menu, Search } from "lucide-vue-next"
+
 const isScrolled = ref(false)
 const navLeftRef = ref<DefNullable<HTMLElement>>()
 const searchValue = ref("")
@@ -14,14 +16,14 @@ onMounted(() => window.addEventListener("scroll", handleScroll))
 onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 
 onMounted(() => {
-	window.onmousedown = ({ target: targetedElement }) => {
+	window.onmousedown = ({ target: targetElement }) => {
 		const containerSiblings = searchWrapperRef.value?.nextSibling
 
 		containerSiblings?.childNodes.forEach((childElements) => {
 			if (
-				targetedElement === searchWrapperRef.value ||
-				targetedElement === containerSiblings ||
-				targetedElement === childElements
+				targetElement === searchWrapperRef.value ||
+				targetElement === containerSiblings ||
+				targetElement === childElements
 			) {
 				isSuggestionsFocused.value = true
 			} else {
@@ -39,14 +41,18 @@ onMounted(() => {
 				<NuxtLink to="/" class="logo" title="MyFursona Home" role="img">
 					<div aria-label="MyFursona" class="flex items-center gap-x-2.5">
 						<IconMono class="w-[3.25rem] h-[3.25rem] text-white" />
-						<span>MyFursona</span>
+						<span class="hidden md:block">MyFursona</span>
 					</div>
 				</NuxtLink>
 				<span
-					class="px-1.5 py-1 ml-2 text-xs font-semibold bg-red-400 rounded-sm font-inter select-none"
+					class="hidden md:block px-1.5 py-1 ml-2 text-xs font-semibold bg-red-400 rounded-sm font-inter select-none"
 					>ALPHA</span
 				>
-				<div class="search-input" :data-focused="isSuggestionsFocused">
+				<div class="relative search-input" :data-focused="isSuggestionsFocused">
+					<Search
+						class="absolute z-[100] pointer-events-none top-[25%] left-3"
+						:size="20"
+					/>
 					<input
 						ref="searchWrapperRef"
 						type="search"
@@ -59,16 +65,43 @@ onMounted(() => {
 					/>
 					<div class="search-suggestions" :aria-hidden="!isSuggestionsFocused">
 						<span v-if="searchValue !== ''">
-							Search results for <strong>{{ searchValue }}</strong>
+							Search results for "<strong>{{ searchValue }}</strong
+							>"
 						</span>
-						<span v-else>Start typing</span>
+						<span v-else>Start typing for results</span>
 					</div>
 				</div>
+				<nav class="pl-2">
+					<NuxtLink
+						href="/browse"
+						role="listitem"
+						class="px-4 font-bold font-inter"
+						>Browse</NuxtLink
+					>
+					<NuxtLink
+						href="/browse"
+						role="listitem"
+						class="px-4 font-bold font-inter"
+						>Collections</NuxtLink
+					>
+				</nav>
 			</div>
 			<ul class="actions">
-				<button class="hidden"></button>
+				<li class="relative">
+					<BaseButton class="!px-3 !rounded-full">
+						<Menu :size="21" />
+					</BaseButton>
+					<div class="absolute right-0 p-2 top-12">
+						<ul class="flex flex-col p-4 rounded-md gap-y-3 w-max bg-base-800">
+							<li>Toggle theme</li>
+							<li>Mature content</li>
+							<li>Report an Issue</li>
+							<li>Copyright</li>
+						</ul>
+					</div>
+				</li>
 				<li class="font-inter">
-					<NuxtLink to="/login" class="login-btn">Sign In</NuxtLink>
+					<BaseButton link="/login">Sign In</BaseButton>
 				</li>
 			</ul>
 		</nav>
@@ -82,7 +115,7 @@ onMounted(() => {
 	transition-duration: 300ms;
 
 	&.scrolled {
-		@apply backdrop-blur-md bg-opacity-50  border-base-500 bg-base-800;
+		@apply backdrop-blur-md bg-opacity-50 border-base-500 bg-base-800;
 	}
 }
 
@@ -91,7 +124,7 @@ onMounted(() => {
 }
 
 .actions {
-	@apply flex items-center gap-x-10;
+	@apply flex items-center gap-x-2.5;
 }
 
 .logo {
@@ -106,7 +139,7 @@ onMounted(() => {
 	@apply ml-5 w-[18.5vw] relative text-sm;
 
 	input {
-		@apply border-2 border-transparent relative z-[1] px-4 py-2.5 rounded-md bg-opacity-75 bg-base-800 focus:outline-base-600 w-full transition-colors;
+		@apply pl-9 border-2 border-transparent relative z-[1] px-4 py-2.5 rounded-md bg-opacity-75 bg-base-800 focus:outline-base-600 w-full transition-colors;
 	}
 
 	&[data-focused="true"] input {
@@ -121,8 +154,4 @@ onMounted(() => {
 		@apply opacity-100 pointer-events-auto;
 	}
 }
-
-.login-btn {
-	@apply px-5 py-2.5 rounded-3xl hover:bg-purple-700 border-base-200 border font-bold transition-colors;
-}
 </style>
diff --git a/website/layouts/default.vue b/website/layouts/default.vue
diff --git a/website/package.json b/website/package.json
@@ -1,33 +1,32 @@
 {
-	"name": "@myfursona/website",
-	"private": true,
-	"version": "0.0.0",
-	"scripts": {
-		"build": "nuxt build",
-		"dev": "nuxt dev",
-		"generate": "nuxt generate",
-		"preview": "nuxt preview"
-	},
-	"devDependencies": {
-		"@fontsource/inter": "^4.5.14",
-		"@fontsource/open-sans": "^4.5.14",
-		"@iconify-prerendered/vue-fa6-brands": "^0.22.1680070484",
-		"@iconify-prerendered/vue-fa6-solid": "^0.22.1680070530",
-		"@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
-		"@nuxtjs/apollo": "^5.0.0-alpha.5",
-		"@nuxtjs/color-mode": "^3.2.0",
-		"@pinia/nuxt": "^0.4.6",
-		"@tailwindcss/typography": "^0.5.9",
-		"autoprefixer": "^10.4.13",
-		"gsap": "^3.11.4",
-		"lucide-vue-next": "^0.130.1",
-		"nuxt": "^3.0.0",
-		"pinia": "^2.0.29",
-		"postcss": "^8.4.20",
-		"sass": "^1.57.1",
-		"tailwindcss": "^3.2.4"
-	},
-	"dependencies": {
-		"@vercel/analytics": "^0.1.11"
-	}
-}
+  "name": "@myfursona/website",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@vercel/analytics": "^0.1.11"
+  },
+  "devDependencies": {
+    "@fontsource/inter": "^4.5.14",
+    "@fontsource/open-sans": "^4.5.14",
+    "@iconify-prerendered/vue-fa6-brands": "^0.22.1680070484",
+    "@nuxt/image-edge": "^1.0.0-27919678.2f5b64b",
+    "@nuxtjs/apollo": "^5.0.0-alpha.5",
+    "@nuxtjs/color-mode": "^3.2.0",
+    "@pinia/nuxt": "^0.4.6",
+    "@tailwindcss/typography": "^0.5.9",
+    "autoprefixer": "^10.4.13",
+    "gsap": "^3.11.4",
+    "lucide-vue-next": "^0.170.0",
+    "nuxt": "^3.0.0",
+    "pinia": "^2.0.29",
+    "postcss": "^8.4.20",
+    "sass": "^1.57.1",
+    "tailwindcss": "^3.2.4"
+  }
+}
diff --git a/website/plugins/vercel.ts b/website/plugins/vercel.ts
@@ -1,5 +1,5 @@
 import { inject } from "@vercel/analytics"
 
-export default () => {
+export default defineNuxtPlugin(() => {
 	inject({ debug: true })
-}
+})
diff --git a/yarn.lock b/yarn.lock
@@ -613,11 +613,6 @@
   resolved "https://registry.yarnpkg.com/@iconify-prerendered/vue-fa6-brands/-/vue-fa6-brands-0.22.1680070484.tgz#28f5c9542cee1e6485955ad0f1d24e28876ec4bb"
   integrity sha512-DYVREDEt+Mr9uKY7ttS91mEj0A+7175aQX6u5MlizrGcVWCtJW9rNyzvJWH6OZnr1n4Aa3rMFVvqc0VB5RHHlg==
 
-"@iconify-prerendered/vue-fa6-solid@^0.22.1680070530":
-  version "0.22.1680070530"
-  resolved "https://registry.yarnpkg.com/@iconify-prerendered/vue-fa6-solid/-/vue-fa6-solid-0.22.1680070530.tgz#3772f53002960bc99351500c9cc258ad2b8b2039"
-  integrity sha512-/c373TIgcY32tYOAQUJC8yNLgujpOwLytKO5kXtKoMcMbtI/8KTAE8aCTx4ZUT29qWXuZE8VFLTbEiVgS67pXQ==
-
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
@@ -3638,10 +3633,10 @@ lru-cache@^7.18.3:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
-lucide-vue-next@^0.130.1:
-  version "0.130.1"
-  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.130.1.tgz#24a748dce6cd7c855150c01ad12ff0e18244d969"
-  integrity sha512-9lZlNNyAM159dhvvYJjzC1X25dIIzXZokFZ7IBJAuxjBCjhbM2QwH36Rxc3rlwq6iIwpX8cHwsg4aix86NtUhg==
+lucide-vue-next@^0.170.0:
+  version "0.170.0"
+  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.170.0.tgz#91296de59ba375fe3269818732fff18dac60bcfa"
+  integrity sha512-Lb6C0fABlFij/9oWLXaJPKwsE5pOqb8zubPGnAeRkOC2zs3cvW5Qkc7Xr3aR9inS/jqqO4UH+cGR2rDCbngQpQ==
 
 magic-string@^0.25.7:
   version "0.25.9"