Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Magang-2025:e615058a511889271bf118b01ca0d1186e95375c
Branches Tags
Magang-2025:main
Magang-2025:production
..
compare: Magang-2025:4c4dd5d635d272a5d9c686b990e7fedfceb45de3
Branches Tags
Magang-2025:production
Magang-2025:main

No commits in common. "e615058a511889271bf118b01ca0d1186e95375c" and "4c4dd5d635d272a5d9c686b990e7fedfceb45de3" have entirely different histories.
e615058a51 ... 4c4dd5d635

4 changed files with 40 additions and 101 deletions
Show Stats Expand all files Collapse all files

0
resources/images/logo.png → public/images/logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

31
resources/js/components/Footer.vue
View File

@ -1,31 +0,0 @@
<template>
<footer class="bg-[#f9f3eb] border-t border-gray-200 py-4 px-6 flex flex-col md:flex-row items-center justify-between">
<!-- Left: Logo -->
<div class="flex items-center gap-2">
<img :src="logo" alt="Logo" class="h-10">
</div>
<!-- Center: Copyright -->
<div class="text-sm text-[#0f1d4a] font-medium text-center">
Abbauf Tech © 2025 Semua hak dilindungi
</div>
<!-- Right: Social Icons -->
<div class="flex items-center gap-4 text-[#0f1d4a] mt-2 md:mt-0">
<a href="#" class="hover:text-sky-600"><i class="fab fa-facebook"></i></a>
<a href="#" class="hover:text-sky-600"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-sky-600"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-sky-600"><i class="fab fa-youtube"></i></a>
<a href="#" class="hover:text-sky-600"><i class="fab fa-vk"></i></a>
</div>
</footer>
</template>
<script setup>
import logo from '@/../images/logo.png'
</script>
<style>
/* Pakai Font Awesome untuk ikon */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
</style>

99
resources/js/components/Header.vue
View File

@ -1,7 +1,5 @@
<script setup>
import { ref } from "vue";
import logo from "../../images/logo.png";
const isOpen = ref(false);
@ -27,68 +25,45 @@ const toggleDropdown = () => {
<div class="h-25 shadow-lg shadow-D rounded-b-md">
<div class="bg-D h-5 rounded-b-md shadow-lg">
<div class="h-15"></div>
<div class="relative">
<div class="w-full px-50 flex justify-between items-center h-5 relative">
<div class="absolute left-[50%]">
<img :src="logo" alt="Logo" class="h-12 w-auto" />
</div>
<!-- 🔹 LEFT MENU -->
<div class="flex items-center gap-10">
<!-- Dropdown khusus "Manajemen Produk" -->
<div class="relative">
<button
@click="toggleDropdown"
class="text-center text-lg text-D hover:underline cursor-pointer"
>
Manajemen Produk
</button>
<!-- isi dropdown -->
<div
v-if="isOpen"
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
>
<ul>
<li
v-for="(sub, index) in subItems"
:key="index"
class="px-4 py-2 hover:bg-A cursor-pointer"
>
<router-link :to="sub.route" class="block w-full h-full">
{{ sub.label }}
</router-link>
</li>
</ul>
</div>
</div>
<!-- Menu Kasir -->
<router-link
:to="items[0].route"
class="text-center text-lg text-D hover:underline cursor-pointer"
<div class="w-full px-50 flex justify-between items-center h-5 relative">
<!-- Dropdown khusus "Manajemen Produk" -->
<div class="relative">
<button
@click="toggleDropdown"
class="text-center text-lg text-D hover:underline cursor-pointer"
>
Manajemen Produk
</button>
<!-- isi dropdown -->
<div
v-if="isOpen"
class="absolute left-0 mt-2 w-48 bg-white border rounded-md shadow-lg z-50"
>
<ul>
<li
v-for="(sub, index) in subItems"
:key="index"
class="px-4 py-2 hover:bg-A cursor-pointer"
>
{{ items[0].label }}
</router-link>
</div>
<!-- 🔹 RIGHT MENU -->
<div class="flex items-center gap-8">
<router-link
:to="items[1].route"
class="text-center text-lg text-D hover:underline cursor-pointer"
>
{{ items[1].label }}
</router-link>
<router-link
:to="items[2].route"
class="text-center text-lg text-D hover:underline cursor-pointer"
>
{{ items[2].label }}
</router-link>
</div>
<router-link :to="sub.route" class="block w-full h-full">
{{ sub.label }}
</router-link>
</li>
</ul>
</div>
</div>
<!-- menu lain -->
<router-link
v-for="item in items"
:key="item.label"
:to="item.route"
class="text-center text-lg text-D hover:underline cursor-pointer"
>
{{ item.label }}
</router-link>
</div>
</div>
</div>

11
resources/js/layouts/mainLayout.vue
View File

@ -1,15 +1,10 @@
<template>
<div class="relative min-h-screen max-w-screen">
<Header />
<div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
<slot />
</div>
<Footer class="absolute bottom-0 w-full" />
<Header />
<div class="mx-2 md:mx-4 lg:mx-6 xl:mx-7 my-6">
<slot />
</div>
</template>
<script setup>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
</script>