MiauRizius/CoasterDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated appheader and sidebar

Browse Source
This commit is contained in:
Maurice L.
2025-02-01 23:38:21 +01:00
parent 6811360e29
commit c80829d3f2
2 changed files with 16 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/app/AppHeader.vue
View File

@@ -5,17 +5,6 @@ export default {
},
mounted() {
document.getElementById('dropdown-pages-button')?.addEventListener('click', () => {
const button = document.getElementById('dropdown-pages-button');
const dropdown = document.getElementById("dropdown-pages");
if (dropdown?.classList.contains('hidden')) {
dropdown?.classList.remove('hidden');
button?.setAttribute('aria-expanded', 'true');
} else {
dropdown?.classList.add('hidden');
button?.setAttribute('aria-expanded', 'false');
}
});
}
}
@@ -26,11 +15,11 @@ export default {
<nav class="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50">
<div class="flex flex-wrap justify-between items-center">
<div class="flex justify-start items-center">
<a href="https://flowbite.com" class="flex items-center justify-between mr-4">
<a href="#" class="flex items-center justify-between mr-4">
<img
src="https://flowbite.s3.amazonaws.com/logo.svg"
class="mr-3 h-8"
alt="Flowbite Logo"
src="https://raw.githubusercontent.com/MaukiNet/.github/main/assets/4542221e59746b200f7d3d2c96cf9210.png"
class="mr-3 h-8 rounded-full"
alt="CoasterDB Logo"
/>
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">CoasterDB</span>
</a>

78
src/components/app/AppSidebar.vue
View File

@@ -101,13 +101,12 @@ export default {
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
<span class="ml-3">Overview</span>
<span class="ml-3">Startseite</span>
</a>
</li>
<li>
<!-- Pages -->
<button
type="button"
class="flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
@@ -129,7 +128,7 @@ export default {
></path>
</svg>
<span class="flex-1 ml-3 text-left whitespace-nowrap"
>Pages</span
>Kategorien</span
>
<svg
aria-hidden="true"
@@ -150,21 +149,14 @@ export default {
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Settings</a
>Parks</a
>
</li>
<li>
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Kanban</a
>
</li>
<li>
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Calendar</a
>Attraktionen</a
>
</li>
</ul>
@@ -191,7 +183,7 @@ export default {
></path>
</svg>
<span class="flex-1 ml-3 text-left whitespace-nowrap"
>Sales</span
>Datenbank</span
>
<svg
aria-hidden="true"
@@ -212,53 +204,26 @@ export default {
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Products</a
>Statistiken</a
>
</li>
<li>
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Billing</a
>Technische Infos</a
>
</li>
<li>
<a
href="#"
class="flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>Invoice</a
>Admin-Panel</a
>
</li>
</ul>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-medium text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"
>
<svg
aria-hidden="true"
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
></path>
<path
d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
></path>
</svg>
<span class="flex-1 ml-3 whitespace-nowrap">Messages</span>
<span
class="inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800"
>
4
</span>
</a>
</li>
<li>
<!-- <li>
<button
type="button"
class="flex items-center p-2 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
@@ -319,7 +284,7 @@ export default {
>
</li>
</ul>
</li>
</li>-->
</ul>
<ul
class="pt-5 mt-5 space-y-2 border-t border-gray-200 dark:border-gray-700"
@@ -343,26 +308,7 @@ export default {
clip-rule="evenodd"
></path>
</svg>
<span class="ml-3">Docs</span>
</a>
</li>
<li>
<a
href="#"
class="flex items-center p-2 text-base font-medium text-gray-900 rounded-lg transition duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white group"
>
<svg
aria-hidden="true"
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
></path>
</svg>
<span class="ml-3">Components</span>
<span class="ml-3">Dokumentation</span>
</a>
</li>
<li>
@@ -383,7 +329,7 @@ export default {
clip-rule="evenodd"
></path>
</svg>
<span class="ml-3">Help</span>
<span class="ml-3">Hilfe</span>
</a>
</li>
</ul>