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

I updated to theme button to a toggle #170

Merged
merged 4 commits into from
May 17, 2023
Merged

I updated to theme button to a toggle #170

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8c967b6
I updated to theme button to a toggle
cyberGHostJs May 17, 2023
ed87d28
Merge branch 'Exifly:main' into main
cyberGHostJs May 17, 2023
1a9bd22
i updated the code using composition API
cyberGHostJs May 17, 2023
4f61e6d
Removed unnecessary imports in ToggleButton.vue
gdjohn4s May 17, 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
4 changes: 2 additions & 2 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

128 changes: 34 additions & 94 deletions frontend/src/components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,128 +4,61 @@
<router-link to="/" class="navbar-text-wrapper navbar-brand">
<img :src="logoPath" alt="" width="150" />
</router-link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span
><font-awesome-icon
:icon="['fas', 'bars']"
style="color: var(--text-color)"
/></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span><font-awesome-icon :icon="['fas', 'bars']" style="color: var(--text-color)" /></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item navbar-text-wrapper mt-2">
<a
class="navbar-text-wrapper flex items-center gap-2 active"
aria-current="page"
href="https://github.com/Exifly/ApiVault"
>
<a class="navbar-text-wrapper flex items-center gap-2 active" aria-current="page"
href="https://github.com/Exifly/ApiVault">
<font-awesome-icon :icon="['fab', 'github']" /> Stars
{{ github.number.toFixed(0) }}
</a>
</li>
<li class="nav-item navbar-text-wrapper mt-2">
<a
class="navbar-text-wrapper flex items-center gap-2"
<a class="navbar-text-wrapper flex items-center gap-2"
href="https://github.com/Exifly/ApiVault/issues/new?assignees=&labels=add+api&projects=&template=add-your-api.md&title=%5BAPIFT%5D+Submit+new+API"
target="_blank"
>
target="_blank">
<font-awesome-icon :icon="['fas', 'angles-right']" /> Submit API
</a>
</li>
<li class="nav-item navbar-text-wrapper mt-2">
<a
@click="setMode()"
class="navbar-text-wrapper flex items-center gap-2"
>
<font-awesome-icon :icon="iconTheme" /> {{ iconThemeText }}
</a>
<li class=" navbar-text-wrapper mt-2">
<toggle-button @click="setMode()" class="flex items-center gap-2">
</toggle-button>
</li>
<hr />
<div id="scrollb" class="scrollbox">
<div class="d-block d-sm-none">
<h5 class="navbar-text-wrapper navbar-header-wrapper">MENU</h5>
<li class="nav-item navbar-text-wrapper mt-2 category-custom">
<router-link
class="navbar-text-wrapper flex items-center gap-2"
to="/"
>
<font-awesome-icon
class=""
width="12"
height="12"
icon="fa-solid fa-house"
/>Home</router-link
>
<router-link class="navbar-text-wrapper flex items-center gap-2" to="/">
<font-awesome-icon class="" width="12" height="12" icon="fa-solid fa-house" />Home</router-link>
</li>
<li class="nav-item navbar-text-wrapper mt-2 category-custom">
<a
class="navbar-text-wrapper flex items-center gap-2"
style="text-decoration: none"
href="https://github.com/Exifly/ApiVault"
>
<font-awesome-icon
class=""
width="12"
height="12"
:icon="['fab', 'github']"
/>Repository</a
>
<a class="navbar-text-wrapper flex items-center gap-2" style="text-decoration: none"
href="https://github.com/Exifly/ApiVault">
<font-awesome-icon class="" width="12" height="12" :icon="['fab', 'github']" />Repository</a>
</li>
<li class="nav-item navbar-text-wrapper mt-2 category-custom">
<a
class="navbar-text-wrapper flex items-center gap-2"
style="text-decoration: none"
href="https://www.buymeacoffee.com/exifly"
>
<font-awesome-icon
class=""
width="12"
height="12"
icon="fa-solid fa-hand-holding-dollar"
/>Sponsor</a
>
<a class="navbar-text-wrapper flex items-center gap-2" style="text-decoration: none"
href="https://www.buymeacoffee.com/exifly">
<font-awesome-icon class="" width="12" height="12" icon="fa-solid fa-hand-holding-dollar" />Sponsor</a>
</li>
<li class="nav-item navbar-text-wrapper mt-2 category-custom">
<router-link
class="navbar-text-wrapper flex items-center gap-2"
to="/contributors"
>
<font-awesome-icon
class=""
width="12"
height="12"
icon="fa-solid fa-users"
/>Contributors</router-link
>
<router-link class="navbar-text-wrapper flex items-center gap-2" to="/contributors">
<font-awesome-icon class="" width="12" height="12" icon="fa-solid fa-users" />Contributors</router-link>
</li>
<hr />
<h5 class="navbar-text-wrapper navbar-header-wrapper">
CATEGORIES
</h5>
<li
class="nav-item navbar-text-wrapper mt-2 category-custom"
v-for="category in categoriesAttributes"
:key="category"
>
<router-link
class="navbar-text-wrapper flex items-center gap-2"
:to="'/categories/' + category.name"
>
<font-awesome-icon
class=""
width="12"
height="12"
:icon="category.icon"
/>{{ category.name }}</router-link
>
<li class="nav-item navbar-text-wrapper mt-2 category-custom" v-for="category in categoriesAttributes"
:key="category">
<router-link class="navbar-text-wrapper flex items-center gap-2" :to="'/categories/' + category.name">
<font-awesome-icon class="" width="12" height="12" :icon="category.icon" />{{ category.name
}}</router-link>
</li>
</div>
</div>
Expand All @@ -141,6 +74,7 @@ import { CSSPlugin } from "gsap/CSSPlugin";
import getStars from "@/components/api/githubStarsApi.js";
import axios from "axios";
import gsap from "gsap";
import ToggleButton from './ToggleButton.vue';

gsap.registerPlugin(CSSPlugin);

Expand All @@ -157,8 +91,8 @@ const themeIcons = {
const iconTheme = ref(themeIcons[theme.value]);
const iconThemeText = ref(
theme.value[0].toUpperCase() +
theme.value.slice(1, theme.value.length) +
" Mode"
theme.value.slice(1, theme.value.length) +
" Mode"
);
const logoPath = ref(`/img/apivault-full-${theme.value}-nobg.png`);

Expand Down Expand Up @@ -278,9 +212,15 @@ onMounted(() => {
.glass-nav {
background-color: var(--bg-color);
}

.scrollbox {
overflow: scroll;
height: 73vh !important;
}
}
</style>





60 changes: 60 additions & 0 deletions frontend/src/components/ToggleButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<template>
<button class="toggle-button" :class="{ active: isActive }" @click="toggle">
<span class="toggle-icon">
<font-awesome-icon :icon="isActive ? 'sun' : 'moon'" />
</span>
</button>
</template>

<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSun, faMoon } from '@fortawesome/free-solid-svg-icons';

library.add(faSun, faMoon);
export default {
data() {
return {
isActive: false
};
},
methods: {
toggle() {
this.isActive = !this.isActive;
}
}
};
</script>

<style>
.toggle-button {
width: 60px;
height: 30px;
background-color: #ccc;
border-radius: 15px;
position: relative;
outline: none;
border: none;
cursor: pointer;
}

.toggle-button.active {
background-color: black;
}

.toggle-button.active .toggle-icon {
transform: translateX(30px);
}

.toggle-icon {
display: flex;
position: absolute;
left: 0;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
}
</style>
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.