brian/activist
1
0
Fork 0
Code Activity Actions

Factor out sidebar.

Browse source
This commit is contained in:
Brian D 2024-11-22 19:38:29 -05:00
parent 65336c1baf
commit 221ada41e2
5 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/App.vue
View file

@ -2,8 +2,8 @@
import { RouterView } from 'vue-router'
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import Navigation from "@/components/Navigation.vue";
import OverlayBadge from 'primevue/overlaybadge';
import Sidebar from "@/components/Sidebar.vue";
const route = useRoute();
const page_title = ref();
@ -15,23 +15,7 @@ watch(() => route.meta, (newVal, oldVal) => {
<template>
<div class="min-h-screen flex relative lg:static bg-surface-50 dark:bg-surface-950">
<aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
<div class="flex flex-col h-full">
<div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
Designer
</div>
<Navigation></Navigation>
<div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
<a class="m-4 nav-item">
<img
alt="user avatar"
src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
<span class="font-medium inline lg:hidden">Amy Elsner</span>
</a>
</div>
</div>
</aside>
<Sidebar></Sidebar>
<main class="min-h-screen flex flex-col relative flex-auto">
<header class="flex justify-between items-center px-4 bg-surface-0 dark:bg-surface-950 relative lg:static border-b border-surface h-[60px]">
<div class="flex">

6
src/assets/nav-items.css Normal file
View file

@ -0,0 +1,6 @@
.nav-item {
@apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
span {
@apply font-medium inline text-base lg:text-xs lg:block;
}
}

7
src/components/Navigation.vue
View file

@ -39,13 +39,8 @@
</nav>
</template>
<style scoped>
@import "@/assets/nav-items.css";
.nav-icon {
@apply mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-lg;
}
.nav-item {
@apply flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center hover:bg-surface-800 rounded-border text-surface-300 hover:text-white duration-150 transition-colors;
span {
@apply font-medium inline text-base lg:text-xs lg:block;
}
}
</style>

26
src/components/Sidebar.vue
View file

@ -0,0 +1,26 @@
<script setup lang="ts">
import Navigation from "@/components/Navigation.vue";
</script>
<template>
<aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
<div class="flex flex-col h-full">
<div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
Designer
</div>
<Navigation></Navigation>
<div class="mt-auto">
<hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
<a class="m-4 nav-item">
<img
alt="user avatar"
src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
<span class="font-medium inline lg:hidden">Amy Elsner</span>
</a>
</div>
</div>
</aside>
</template>
<style scoped>
@import "@/assets/nav-items.css";
</style>

0
src/components/TopBar.vue Normal file
View file