WIP

resources/js/components/headers/HeaderBack.vue

@@ -1,6 +1,6 @@
 <template>
-<a class="flex-grow flex-shrink-0 px-3 py-4 cursor-pointer" id="backButton" >
-	<MiniIcon icon="chevron-left" fill='fill-neutral-400' class="my-0 w-4 h-4 mr-0 ml-0" />
-</a>
+	<a class="flex-grow flex-shrink-0 px-3 py-4 cursor-pointer" id="backButton">
+		<MiniIcon icon="chevron-left" fill="fill-neutral-400" class="my-0 w-4 h-4 mr-0 ml-0" />
+	</a>
 </template>
 <script setup lang="ts"></script>

resources/js/components/headers/HeaderBar.vue

@@ -1,10 +1,12 @@
 <template>
-<header id="lychee_toolbar_container"
-    class="px-2 w-full flex-none bg-gradient-to-b from-bg-700 to-bg-800 border-b border-b-solid border-b-neutral-900 {{ props.class }}">
-    <div class="flex w-full justify-between items-center box-border">
-        <slot/>
-    </div>
-</header>
+	<header
+		id="lychee_toolbar_container"
+		class="px-2 w-full flex-none bg-gradient-to-b from-bg-700 to-bg-800 border-b border-b-solid border-b-neutral-900 {{ props.class }}"
+	>
+		<div class="flex w-full justify-between items-center box-border">
+			<slot />
+		</div>
+	</header>
 </template>
 <script setup lang="ts">
 const props = defineProps<{

resources/js/components/headers/HeaderButton.vue

@@ -1,14 +1,13 @@
 <template>
-	<a class="flex-shrink-0 px-3 py-4 cursor-pointer {{ props.class }}" id="backButton" >
+	<a class="flex-shrink-0 px-3 py-4 cursor-pointer {{ props.class }}" id="backButton">
 		<MiniIcon :icon="props.icon" :fill="props.fill ?? 'fill-neutral-400'" class="my-0 w-4 h-4 mr-0 ml-0" />
 	</a>
 </template>
 <script setup lang="ts">
-import MiniIcon from '@/components/icons/MiniIcon.vue';
+import MiniIcon from "@/components/icons/MiniIcon.vue";
 const props = defineProps<{
 	class?: string;
 	fill?: string;
 	icon: string;
 }>();
 </script>
-	

resources/js/components/headers/HeaderTitle.vue

@@ -1,8 +1,8 @@
 <template>
-<a class="absolute left-1/2 top-0 -translate-x-1/2 h-14 pointer-events-none
-flex justify-center items-center overflow-hidden
-w-full text-text-main-0 font-bold text-sm whitespace-nowrap text-ellipsis">
-    <slot/>
-</a>
+	<a
+		class="absolute left-1/2 top-0 -translate-x-1/2 h-14 pointer-events-none flex justify-center items-center overflow-hidden w-full text-text-main-0 font-bold text-sm whitespace-nowrap text-ellipsis"
+	>
+		<slot />
+	</a>
 </template>
 <script setup lang="ts"></script>

resources/js/views/App.vue

@@ -18,5 +18,5 @@ const leftMenuOpen = ref(false);
 
 function toggleLeftMenu() {
 	leftMenuOpen.value = !leftMenuOpen.value;
-};
+}
 </script>

resources/js/views/Gallery.vue

@@ -1,11 +1,8 @@
-<template>
-
-</template>
+<template></template>
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
-const path = computed(() => route.path)
-
+const path = computed(() => route.path);
 </script>

resources/js/views/gallery-panels/Album.vue

@@ -1,16 +1,14 @@
-
-<template>
-
-</template>
+<template></template>
 <script setup lang="ts">
-import { watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { watch } from "vue";
+import { useRoute } from "vue-router";
 
-const route = useRoute()
+const route = useRoute();
 
 watch(
-  () => route.params.id,
-  (newId, oldId) => {
-    // react to route changes...
-  }
-)</script>
+	() => route.params.id,
+	(newId, oldId) => {
+		// react to route changes...
+	},
+);
+</script>

resources/js/views/gallery-panels/Albums.vue

@@ -1,24 +1,22 @@
-
 <template>
-<div class="w-full">
-	<HeaderBar>
-		<template v-if="!isLoggedIn">
-			<HeaderButton icon="account-login" :class="isLoginLeft ? 'order-0' : 'order-4'" @click=""/>
-
-		</template>
-		<template v-else>
-		<HeaderButton icon="cog" @click="openLeftMenu"/>
-		</template>
-		<HeaderTitle>{{ title }}</HeaderTitle>
-		<!-- <HeaderButton /> -->
-	</HeaderBar>
-</div>
+	<div class="w-full">
+		<HeaderBar>
+			<template v-if="!isLoggedIn">
+				<HeaderButton icon="account-login" :class="isLoginLeft ? 'order-0' : 'order-4'" @click="" />
+			</template>
+			<template v-else>
+				<HeaderButton icon="cog" @click="openLeftMenu" />
+			</template>
+			<HeaderTitle>{{ title }}</HeaderTitle>
+			<!-- <HeaderButton /> -->
+		</HeaderBar>
+	</div>
 </template>
 <script setup lang="ts">
-import HeaderBar from '@/components/headers/HeaderBar.vue';
-import HeaderButton from '@/components/headers/HeaderButton.vue';
-import HeaderTitle from '@/components/headers/HeaderTitle.vue';
-import { ref } from 'vue';
+import HeaderBar from "@/components/headers/HeaderBar.vue";
+import HeaderButton from "@/components/headers/HeaderButton.vue";
+import HeaderTitle from "@/components/headers/HeaderTitle.vue";
+import { ref } from "vue";
 
 const isLoggedIn = ref(false);
 const isLoginLeft = ref(false);
@@ -29,8 +27,5 @@ const emit = defineEmits(["toggleLeftMenu"]);
 
 function openLeftMenu() {
 	emit("toggleLeftMenu");
-};
-
-
-
-</script>
+}
+</script>