update sidebar checkin dan antrian loket
This commit is contained in:
Fanrouver
@@ -58,8 +58,6 @@
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-text">Tunjukkan tiket ini saat check-in</div>
|
||||
<div class="footer-text">QR Code digunakan untuk check-in pasien</div>
|
||||
<div class="footer-text">Terima kasih</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -245,7 +243,7 @@ const {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 6mm;
|
||||
border-top: 2px solid #000;
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 1.0;
|
||||
|
||||
+148
-120
@@ -46,7 +46,6 @@
|
||||
>
|
||||
<template #activator="{ props: menuProps }">
|
||||
<v-tooltip
|
||||
:disabled="!rail"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="item.name"
|
||||
@@ -63,17 +62,26 @@
|
||||
</v-tooltip>
|
||||
</template>
|
||||
<v-list density="compact" class="sidebar-popup-menu">
|
||||
<v-list-item
|
||||
<v-tooltip
|
||||
v-for="child in item.children"
|
||||
:key="child.name"
|
||||
:to="child.path"
|
||||
:title="child.name"
|
||||
:prepend-icon="child.icon"
|
||||
link
|
||||
class="sidebar-nav-item"
|
||||
active-class="sidebar-nav-item-active"
|
||||
@click="closePopup"
|
||||
></v-list-item>
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="child.name"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<v-list-item
|
||||
v-bind="tooltipProps"
|
||||
:to="child.path"
|
||||
:title="child.name"
|
||||
:prepend-icon="child.icon"
|
||||
link
|
||||
class="sidebar-nav-item"
|
||||
active-class="sidebar-nav-item-active"
|
||||
@click="closePopup"
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
@@ -93,21 +101,29 @@
|
||||
></v-list-item>
|
||||
</template>
|
||||
|
||||
<v-list-item
|
||||
<v-tooltip
|
||||
v-for="child in item.children"
|
||||
:key="child.name"
|
||||
:to="child.path"
|
||||
:title="child.name"
|
||||
:prepend-icon="child.icon"
|
||||
link
|
||||
class="pl-8 sidebar-nav-item"
|
||||
active-class="sidebar-nav-item-active"
|
||||
></v-list-item>
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="child.name"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<v-list-item
|
||||
v-bind="tooltipProps"
|
||||
:to="child.path"
|
||||
:title="child.name"
|
||||
:prepend-icon="child.icon"
|
||||
link
|
||||
class="pl-8 sidebar-nav-item"
|
||||
active-class="sidebar-nav-item-active"
|
||||
></v-list-item>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</v-list-group>
|
||||
|
||||
<v-tooltip
|
||||
v-else
|
||||
:disabled="!rail"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="item.name"
|
||||
@@ -129,104 +145,106 @@
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-list v-if="user" nav density="compact" class="pa-2 flex-shrink-0">
|
||||
<ProfilePopup :user="user" @logout="handleLogout" :rail="rail" />
|
||||
</v-list>
|
||||
<v-list v-else nav density="compact" class="flex-shrink-0">
|
||||
<v-list-item
|
||||
@click="redirectToLogin"
|
||||
prepend-icon="mdi-login"
|
||||
title="Login"
|
||||
link
|
||||
class="sidebar-login-item"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
<!-- Bottom section wrapper for profile and lock button -->
|
||||
<div class="sidebar-bottom-section">
|
||||
<v-list v-if="user" nav density="compact" class="pa-2">
|
||||
<ProfilePopup :user="user" @logout="handleLogout" :rail="rail" />
|
||||
</v-list>
|
||||
<v-list v-else nav density="compact">
|
||||
<v-list-item
|
||||
@click="redirectToLogin"
|
||||
prepend-icon="mdi-login"
|
||||
title="Login"
|
||||
link
|
||||
class="sidebar-login-item"
|
||||
></v-list-item>
|
||||
</v-list>
|
||||
|
||||
<!-- Lock Sidebar Toggle - Positioned at bottom left -->
|
||||
<div class="sidebar-lock-container">
|
||||
<v-tooltip
|
||||
:disabled="!rail"
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="isLocked ? 'Buka Sidebar' : 'Kunci Sidebar'"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<v-btn
|
||||
v-bind="tooltipProps"
|
||||
:class="['sidebar-lock-btn', { 'sidebar-lock-btn-locked': isLocked }]"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="handleLockToggle(!isLocked)"
|
||||
>
|
||||
<!-- Icon Collapsed Sidebar (sidebar collapsed/locked) -->
|
||||
<svg
|
||||
v-if="isLocked"
|
||||
class="sidebar-toggle-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<!-- Lock Sidebar Toggle -->
|
||||
<div class="sidebar-lock-container">
|
||||
<v-tooltip
|
||||
open-on-hover
|
||||
location="end"
|
||||
:text="isLocked ? 'Buka Sidebar' : 'Kunci Sidebar'"
|
||||
>
|
||||
<template #activator="{ props: tooltipProps }">
|
||||
<v-btn
|
||||
v-bind="tooltipProps"
|
||||
:class="['sidebar-lock-btn', { 'sidebar-lock-btn-locked': isLocked }]"
|
||||
variant="text"
|
||||
size="small"
|
||||
@click="handleLockToggle(!isLocked)"
|
||||
>
|
||||
<!-- Rounded rectangle container -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="16"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-100)"
|
||||
/>
|
||||
<!-- Sidebar area (kiri, narrow ~30%, biru gelap) -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="6"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-600)"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Icon Expanded Sidebar (sidebar expanded/unlocked) -->
|
||||
<svg
|
||||
v-else
|
||||
class="sidebar-toggle-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Rounded rectangle container -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="16"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-100)"
|
||||
/>
|
||||
<!-- Sidebar area (kiri, wider ~55%, biru gelap) -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="11"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-600)"
|
||||
/>
|
||||
<!-- Left-pointing arrow in the white area -->
|
||||
<path
|
||||
d="M 15.5 10 L 13.5 8 M 15.5 10 L 13.5 12"
|
||||
stroke="var(--color-primary-600)"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
<!-- Icon Collapsed Sidebar (sidebar collapsed/locked) -->
|
||||
<svg
|
||||
v-if="isLocked"
|
||||
class="sidebar-toggle-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Rounded rectangle container -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="16"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-100)"
|
||||
/>
|
||||
<!-- Sidebar area (kiri, narrow ~30%, biru gelap) -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="6"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-600)"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Icon Expanded Sidebar (sidebar expanded/unlocked) -->
|
||||
<svg
|
||||
v-else
|
||||
class="sidebar-toggle-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<!-- Rounded rectangle container -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="16"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-100)"
|
||||
/>
|
||||
<!-- Sidebar area (kiri, wider ~55%, biru gelap) -->
|
||||
<rect
|
||||
x="2"
|
||||
y="2"
|
||||
width="11"
|
||||
height="16"
|
||||
rx="3"
|
||||
fill="var(--color-primary-600)"
|
||||
/>
|
||||
<!-- Left-pointing arrow in the white area -->
|
||||
<path
|
||||
d="M 15.5 10 L 13.5 8 M 15.5 10 L 13.5 12"
|
||||
stroke="var(--color-primary-600)"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
@@ -329,7 +347,17 @@ onMounted(async () => {
|
||||
@use '~/assets/scss/_colors.scss' as *;
|
||||
|
||||
:deep(.v-navigation-drawer) {
|
||||
position: relative;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
height: 100vh !important;
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.sidebar-bottom-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
@@ -472,10 +500,10 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.sidebar-lock-container {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 8px;
|
||||
z-index: 10;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-lock-btn {
|
||||
|
||||
Reference in New Issue
Block a user