CalvinBackup/deflock
1
0
Fork 0
mirror of https://github.com/FoggedLens/deflock.git synced 2026-02-12 15:02:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

horizontal menu bar for desktop

Browse Source
This commit is contained in:
Will Freeman
2025-10-02 22:03:07 -06:00
parent 162056f78b
commit 97a3bf4703
2 changed files with 101 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/public/icon-discord-grey.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<path d="M41.625,10.77C37.645,7.566 31.348,7.023 31.078,7.004C30.66,6.969 30.262,7.203 30.09,7.59C30.074,7.613 29.938,7.93 29.785,8.422C32.418,8.867 35.652,9.762 38.578,11.578C39.047,11.867 39.191,12.484 38.902,12.953C38.711,13.262 38.387,13.43 38.051,13.43C37.871,13.43 37.688,13.379 37.523,13.277C32.492,10.156 26.211,10 25,10C23.789,10 17.504,10.156 12.477,13.277C12.008,13.57 11.391,13.426 11.102,12.957C10.809,12.484 10.953,11.871 11.422,11.578C14.348,9.766 17.582,8.867 20.215,8.426C20.063,7.93 19.926,7.617 19.914,7.59C19.738,7.203 19.344,6.961 18.922,7.004C18.652,7.023 12.355,7.566 8.32,10.813C6.215,12.762 2,24.152 2,34C2,34.176 2.047,34.344 2.133,34.496C5.039,39.605 12.973,40.941 14.781,41L14.813,41C15.133,41 15.434,40.848 15.621,40.59L17.449,38.074C12.516,36.801 9.996,34.637 9.852,34.508C9.438,34.145 9.398,33.512 9.766,33.098C10.129,32.684 10.762,32.645 11.176,33.008C11.234,33.063 15.875,37 25,37C34.141,37 38.781,33.047 38.828,33.008C39.242,32.648 39.871,32.684 40.238,33.102C40.602,33.516 40.563,34.145 40.148,34.508C40.004,34.637 37.484,36.801 32.551,38.074L34.379,40.59C34.566,40.848 34.867,41 35.188,41L35.219,41C37.027,40.941 44.961,39.605 47.867,34.496C47.953,34.344 48,34.176 48,34C48,24.152 43.785,12.762 41.625,10.77ZM18.5,30C16.566,30 15,28.211 15,26C15,23.789 16.566,22 18.5,22C20.434,22 22,23.789 22,26C22,28.211 20.434,30 18.5,30ZM31.5,30C29.566,30 28,28.211 28,26C28,23.789 29.566,22 31.5,22C33.434,22 35,23.789 35,26C35,28.211 33.434,30 31.5,30Z" style="fill:rgb(122,122,122);fill-rule:nonzero;"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

99
webapp/src/App.vue
View File

@@ -54,7 +54,7 @@ const contributeItems = [
]
const metaItems = [
{ title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', href: 'https://discord.gg/aV7v4R3sKT'},
{ title: 'Discord', customIcon: '/icon-discord.svg', customIconDark: '/icon-discord-white.svg', customIconGrey: '/icon-discord-grey.svg', href: 'https://discord.gg/aV7v4R3sKT'},
{ title: 'Contact', icon: 'mdi-email-outline', to: '/contact' },
{ title: 'GitHub', icon: 'mdi-github', href: 'https://github.com/frillweeman/deflock'},
{ title: 'Donate', icon: 'mdi-heart', to: '/donate'},
@@ -80,8 +80,14 @@ watch(() => theme.global.name.value, (newTheme) => {
flat
prominent
>
<v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<!-- Mobile hamburger menu -->
<v-app-bar-nav-icon
variant="text"
@click.stop="drawer = !drawer"
class="d-md-none"
></v-app-bar-nav-icon>
<!-- Logo -->
<v-toolbar-title style="flex: unset;">
<div style="display: flex; align-items: center; cursor: pointer;" @click="router.push('/')">
<v-img height="36" width="36" src="/favicons/apple-icon-144x144.png" />
@@ -89,16 +95,103 @@ watch(() => theme.global.name.value, (newTheme) => {
</div>
</v-toolbar-title>
<v-spacer></v-spacer>
<!-- Desktop horizontal navigation -->
<div class="d-none d-md-flex ml-8 flex-grow-1">
<!-- Main navigation items -->
<div class="d-flex align-center">
<v-btn
v-for="item in items.slice(1)"
:key="item.title"
:to="item.to"
variant="text"
class="mx-1"
:prepend-icon="item.icon"
>
{{ item.title }}
</v-btn>
</div>
<v-spacer></v-spacer>
<!-- Contribute section -->
<div class="d-flex align-center">
<v-menu offset-y>
<template v-slot:activator="{ props }">
<v-btn
variant="text"
v-bind="props"
append-icon="mdi-chevron-down"
class="mx-1"
>
Contribute
</v-btn>
</template>
<v-list>
<v-list-item
v-for="item in contributeItems"
:key="item.title"
:to="item.to"
link
>
<template v-slot:prepend>
<v-icon>{{ item.icon }}</v-icon>
</template>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- Get Involved section -->
<v-menu offset-y>
<template v-slot:activator="{ props }">
<v-btn
variant="text"
v-bind="props"
append-icon="mdi-chevron-down"
class="mx-1"
>
Get Involved
</v-btn>
</template>
<v-list>
<v-list-item
v-for="item in metaItems"
:key="item.title"
:to="item.to"
:href="item.href"
:target="item.href ? '_blank' : undefined"
link
>
<template v-slot:prepend>
<v-icon v-if="item.icon">{{ item.icon }}</v-icon>
<v-img
v-else-if="item.customIcon"
class="mr-8"
contain
width="24"
height="24"
:src="isDark ? item.customIconDark : item.customIconGrey"
/>
</template>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</div>
<v-spacer class="d-md-none" />
<v-btn icon>
<v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
</v-btn>
</v-app-bar>
<!-- Mobile navigation drawer -->
<v-navigation-drawer
v-model="drawer"
temporary
class="d-md-none"
>
<v-list nav>
<v-list-item