jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Improve sidebar and show next to appbar instead of below
Some checks failed
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader 2022-03-02 22:37:43 +00:00
parent 00a391d08c
commit 4824e75049
2 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/App.vue
View File

@ -28,8 +28,20 @@ export default defineComponent({
<template>
<div class="box-border w-full">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4 m-2 rounded-lg">
<span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
<div class="flex flex-col md:flex-row flex-1">
<div
:class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
>
<router-view name="sidebar"></router-view>
</div>
<div class="flex-1">
<div class="flex bg-gray-400 dark:bg-gray-600 p-4">
<span
class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
@click="toggleMenuSize"
>≡</span>
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
<span class="flex-1">{{ CurrentBudgetName }}</span>
@ -41,17 +53,10 @@ export default defineComponent({
</div>
</div>
<div class="flex flex-col md:flex-row flex-1">
<div
:class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full"
>
<router-view name="sidebar"></router-view>
</div>
<div class="flex-1 p-6">
<div class="p-3 pl-6">
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>

18
web/src/pages/BudgetSidebar.vue
View File

@ -31,16 +31,16 @@ function getAccountName(account : Account) {
<template>
<div class="flex flex-col">
<span class="m-1 p-1 px-3 text-xl">
<router-link to="/dashboard">⌂</router-link>
<span class="m-2 p-1 px-3 h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
<router-link to="/dashboard" style="font-size:150%">⌂</router-link>
{{CurrentBudgetName}}
</span>
<span class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3 flex flex-col">
<span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
<router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br />
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
<!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
</span>
<li class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3">
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold">
<span>On-Budget Accounts</span>
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
@ -50,7 +50,7 @@ function getAccountName(account : Account) {
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
</div>
</li>
<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold">
<span>Off-Budget Accounts</span>
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
@ -60,18 +60,16 @@ function getAccountName(account : Account) {
<Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
</div>
</li>
<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
<div class="flex flex-row justify-between font-bold">
<span>Closed Accounts</span>
</div>
+ Add Account
</li>
<!--<li>
<router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
</li>-->
<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
+ Add Account
</li>
<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
<li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
<router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
</li>
<!--<li><router-link to="/admin">Admin</router-link></li>-->