Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create topic dropdown component #497

Merged
merged 4 commits into from
Nov 22, 2023
Merged

Create topic dropdown component #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
09c30d0
creating dropdown topic component
iagocarmona Oct 24, 2023
bd03644
adding translation of dropdown topics
iagocarmona Oct 24, 2023
7640a17
Merge branch 'main' into create-topic-dropdown-component
andrewtavis Oct 24, 2023
44906fc
Merge branch 'main' into create-topic-dropdown-component
andrewtavis Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions frontend/components/dropdown/DropdownTopics.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<template>
<div @click="toggleDropdown">
<div
ref="topComponent"
class="flex items-center justify-between pl-2 pr-3 border topic-marker w-max h-max bg-light-cta-orange text-light-text border-light-text dark:bg-dark-cta-orange/10 dark:border-dark-cta-orange dark:text-dark-cta-orange hover:bg-light-cta-orange-hover hover:dark:bg-dark-cta-orange/25 hover:cursor-pointer active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10 shadow-sm shadow-zinc-700"
:class="{ 'rounded-lg': isRounded }"
>
<Icon
v-show="hasIcon"
class="flex-shrink-0 w-5 h-5 my-1 rounded-full"
:name="iconName"
size="1em"
/>
<p class="pl-2 text-base font-bold text-center select-none">
{{ topic }}
</p>
<Icon
class="ml-2 flex-shrink-0 w-5 h-5 my-1 rounded-full transition ease-in-out duration-500"
:class="{ 'rotate-180': showDropdown }"
name="bi:chevron-down"
size="1em"
/>
</div>
<div v-if="showDropdown">
<div
class="mt-1.5 border bg-light-cta-orange text-light-text border-light-text dark:bg-dark-cta-orange/10 dark:border-dark-cta-orange dark:text-dark-cta-orange active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10 shadow-sm shadow-zinc-700"
:class="{ 'rounded-lg': isRounded}"
:style="{ width: topComponentWidth + 'px' }"
>
<ul>
<li
v-for="(item, index) in items"
@click="selectItem(item)"
:key="index"
class="px-2 py-1 text-center border-light-text dark:border-dark-text hover:bg-light-cta-orange-hover hover:dark:bg-dark-cta-orange/25 hover:cursor-pointer active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10"
>
{{ item }}
</li>
</ul>
</div>
</div>
</div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const showDropdown = ref(false);
const topComponent = ref<HTMLElement | null>(null);
const topComponentWidth = computed(() => topComponent.value?.clientWidth || 0);

const toggleDropdown = () => {
showDropdown.value = !showDropdown.value;
};

const selectItem = (item: string) => {
console.log("Item selecionado:", item);
showDropdown.value = false;
};

defineProps<{
topic: string;
hasIcon?: boolean;
iconName?: string;
isRounded?: boolean;
items: string[];
}>();
</script>
9 changes: 8 additions & 1 deletion frontend/pages/home/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:tagline="$t('pages.home.index.subheader')"
>
<div class="flex flex-col space-x-3 sm:flex-row">
<MarkerTopic topic="My topics dropdown" />
<DropdownTopics :topic="$t('pages.home.index.dropdown-topics')" :hasIcon="true" :items="topicItems" iconName="bi:globe" :isRounded="true"/>
</div>
</HeaderAppPage>
<div class="pt-3 pb-6 space-y-6 md:pt-4">
Expand Down Expand Up @@ -63,6 +63,13 @@ definePageMeta({
layout: "sidebar",
});

const topicItems = [
"Topic 1",
"Topic 2",
"Topic 3",
"Topic 4"
]

const resource: Resource = {
name: "Test Resource",
organization: "Testers LLC",
Expand Down
Loading