marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-05-05 20:32:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refine user profile and navbar

Browse source
This commit is contained in:
Marco Realacci 2022-12-10 01:02:48 +01:00
parent a2d7eb8d13
commit 740aaef0ea
39 changed files with 2084 additions and 1999 deletions
Download patch file Download diff file Expand all files Collapse all files

51
webui/src/App.vue
View file

@ -2,66 +2,83 @@
import { RouterLink, RouterView } from 'vue-router'
</script>
<script>
export default {}
export default {
data() {
return {
my_id: sessionStorage.getItem("token"),
}
},
}
</script>
<template>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<!--<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#/">WASAPhoto</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</header>
</header>-->
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<!--<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>General</span>
<span>WASAPhoto</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink to="/" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#home"/></svg>
Home
Stream
</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/link1" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#layout"/></svg>
Menu item 1
</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/link2" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#key"/></svg>
Menu item 2
Search
</RouterLink>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>Secondary menu</span>
<span>Account</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink :to="'/some/' + 'variable_here' + '/path'" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#file-text"/></svg>
Item 1
Your profile
</RouterLink>
</li>
</ul>
</div>
</nav>
</nav>-->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!---<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">-->
<main class="mb-5">
<RouterView />
</main>
<nav id="global-nav" class="navbar fixed-bottom navbar-light bg-light row">
<div class="collapse navbar-collapse" id="navbarNav"></div>
<RouterLink to="/" class="col-4 text-center">
<i class="bi bi-house text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/search" class="col-4 text-center">
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink :to="'/profile/' + my_id" class="col-4 text-center">
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
</RouterLink>
</nav>
</div>
</div>
</template>
<style>
#global-nav a.router-link-active {
font-size: 1.2em
}
</style>