Skip to content

Commit 1323ae1

Browse files
aminnausinaminnausin
committed
feat: crude drawer system for mobile sidebars
1 parent 2a449ec commit 1323ae1

6 files changed

Lines changed: 56 additions & 16 deletions

File tree

‎resources/js/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import type { ToastPostion } from '@aminnausin/cedar-ui';
33
44
import { onMounted, onUnmounted, ref, watch } from 'vue';
5+
import { DrawerController } from './components/cedar-ui/drawer';
56
import { ToastController } from '@/components/cedar-ui/toast';
67
import { useFullscreen } from '@/composables/useFullscreen';
78
import { getScreenSize } from '@/service/util';
@@ -62,6 +63,7 @@ watch(usingPlayerModernUI, setPlayerModernUI, { immediate: false });
6263
<template>
6364
<RouterView />
6465
<GlobalModal />
66+
<DrawerController :teleportTarget="'body'" />
6567
<ToastController v-if="toastPosition && !isFullscreen" :position="toastPosition" />
6668
<ContextMenu
6769
v-if="!isFullscreen"

‎resources/js/components/cedar-ui/drawer/BaseDrawer.vue‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,23 @@ const drawer = useDrawer();
1313
const props = withDefaults(defineProps<DrawerProps>(), { direction: 'bottom' });
1414
const swipeDirections = ref<SwipeDirection[]>([props.direction]);
1515
16+
const closeDrawer = () => {
17+
drawer.close();
18+
emit('close');
19+
};
20+
1621
const { offset, isSwiping, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, isTapGesture } = useSwipeHandler({
1722
directions: swipeDirections,
1823
swipeThreshold: { px: SWIPE_THRESHOLD },
1924
velocityThreshold: VELOCITY_THRESHOLD,
20-
onSwipeOut: drawer.close,
25+
onSwipeOut: closeDrawer,
2126
});
27+
28+
const emit = defineEmits<(e: 'close') => void>();
2229
</script>
2330
<template>
2431
<RootDrawer
25-
@keydown.esc="drawer.close"
32+
@keydown.esc="closeDrawer"
2633
@pointerdown="onPointerDown"
2734
@pointermove="onPointerMove"
2835
@pointerup="onPointerUp"
@@ -35,25 +42,29 @@ const { offset, isSwiping, onPointerDown, onPointerMove, onPointerUp, onPointerC
3542
}"
3643
id="drawer"
3744
>
38-
<div class="flex flex-col items-center justify-center">
39-
<div class="group flex w-full cursor-pointer pt-4">
45+
<div class="flex flex-col items-center justify-center gap-3 p-4 md:p-3">
46+
<div class="group flex w-full cursor-pointer pb-1 sm:p-0">
4047
<slot name="handle">
4148
<DrawerHandle
4249
:aria-expanded="drawer.isOpen.value"
4350
@keydown.enter.prevent="drawer.close"
4451
@keydown.space.prevent="drawer.close"
52+
@pointerdown="onPointerDown"
53+
@pointermove="onPointerMove"
54+
@dragend="onPointerUp"
55+
@pointercancel="onPointerCancel"
4556
@pointerup="
4657
() => {
4758
onPointerUp();
48-
if (isTapGesture()) drawer.close();
59+
if (isTapGesture()) closeDrawer();
4960
}
5061
"
5162
/>
5263
</slot>
5364
</div>
54-
<div class="flex w-full flex-col gap-3 p-3">
65+
<div class="flex w-full flex-col gap-3" v-if="$slots.header || drawer.props.value.title || drawer.props.value.description">
5566
<slot name="header">
56-
<div class="flex w-full flex-col gap-1.5">
67+
<div class="flex w-full flex-col gap-1.5" v-if="drawer.props.value.title || drawer.props.value.description">
5768
<h2 id="drawerTitle" class="text-foreground flex-1 text-xl font-semibold">
5869
<slot name="title">
5970
{{ drawer.props.value.title ?? title ?? 'Title' }}
@@ -65,12 +76,12 @@ const { offset, isSwiping, onPointerDown, onPointerMove, onPointerUp, onPointerC
6576
</div>
6677
</slot>
6778
</div>
68-
<div v-if="$slots.default" class="scrollbar-hide flex max-h-[60vh] w-full flex-col gap-3 overflow-y-scroll p-3">
79+
<div v-if="$slots.default" class="scrollbar-hide flex max-h-[60vh] w-full flex-col gap-3 overflow-y-scroll">
6980
<slot> </slot>
7081
</div>
71-
<div v-if="$slots.footer || !$slots.default" class="flex w-full flex-col gap-3 p-3">
82+
<div v-if="$slots.footer || !$slots.default" class="flex w-full flex-col gap-3">
7283
<slot name="footer">
73-
<ButtonText :class="'h-8 w-full text-sm capitalize ring-1'" :variant="'default'" @click="drawer.close()"> Close Drawer </ButtonText>
84+
<ButtonText :class="'h-8 w-full text-sm capitalize ring-1'" :variant="'default'" @click="closeDrawer"> Close Drawer </ButtonText>
7485
</slot>
7586
</div>
7687
</div>

‎resources/js/components/cedar-ui/drawer/DrawerHandle.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<button
33
type="button"
44
title="Close Drawer"
5-
class="mx-auto w-1/8 sm:w-1/12 h-1.5 rounded-full bg-foreground-2 cursor-pointer group-hover:bg-foreground-1 transition-colors focus:outline-0 focus:bg-foreground-1"
5+
class="bg-foreground-2 group-hover:bg-foreground-1 mx-auto h-1.5 w-1/5 cursor-pointer rounded-full transition-colors sm:w-1/12"
66
aria-controls="drawer"
77
></button>
88
</template>

‎resources/js/components/drawers/VideoSidebarDrawer.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import { useAppStore } from '@/stores/AppStore';
3+
import { BaseDrawer } from '@/components/cedar-ui/drawer';
4+
5+
import VideoSidebar from '@/components/panels/VideoSidebar.vue';
6+
7+
const { cycleSideBar } = useAppStore();
8+
</script>
9+
10+
<template>
11+
<BaseDrawer @close="cycleSideBar()">
12+
<VideoSidebar />
13+
</BaseDrawer>
14+
</template>

‎resources/js/components/panels/NavBar.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
<script setup lang="ts">
2+
import { getScreenSize } from '@/service/util';
23
import { useAuthStore } from '@/stores/AuthStore';
34
import { useAppStore } from '@/stores/AppStore';
45
import { storeToRefs } from 'pinia';
6+
import { drawer } from '@aminnausin/cedar-ui';
57
import { ref } from 'vue';
68
9+
import VideoSidebarDrawer from '@/components/drawers/VideoSidebarDrawer.vue';
710
import ToggleLightMode from '@/components/inputs/ToggleLightMode.vue';
811
import DropdownMenu from '@/components/pinesUI/DropdownMenu.vue';
912
import NavButton from '@/components/inputs/NavButton.vue';
@@ -24,6 +27,16 @@ const { cycleSideBar } = useAppStore();
2427
const toggleDropdown = () => {
2528
showDropdown.value = !showDropdown.value;
2629
};
30+
31+
const toggleVideoSidebar = (sidebar: 'folders' | 'history') => {
32+
cycleSideBar(sidebar, 'list-card');
33+
if (selectedSideBar.value !== sidebar) return;
34+
35+
const screenSize = getScreenSize();
36+
if (screenSize === 'default' || screenSize === 'sm') {
37+
drawer.open(VideoSidebarDrawer, {});
38+
}
39+
};
2740
</script>
2841

2942
<template>
@@ -64,7 +77,7 @@ const toggleDropdown = () => {
6477
</NavButton>
6578
<NavButton
6679
v-if="$route.name === 'home'"
67-
@click="cycleSideBar('folders', 'list-card')"
80+
@click="toggleVideoSidebar('folders')"
6881
:label="'folders'"
6982
:active="selectedSideBar === 'folders'"
7083
:class="`ring-1 ring-gray-900/5`"
@@ -76,7 +89,7 @@ const toggleDropdown = () => {
7689
</NavButton>
7790
<NavButton
7891
v-if="userData && $route.name === 'home'"
79-
@click="cycleSideBar('history', 'list-card')"
92+
@click="toggleVideoSidebar('history')"
8093
:label="'history'"
8194
:active="selectedSideBar === 'history'"
8295
:class="`ring-1 ring-gray-900/5`"

‎resources/js/layouts/LayoutBase.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const { selectedSideBar, sideBarTarget } = storeToRefs(useAppStore());
3131
id="list-card"
3232
:class="
3333
cn(`card order-3 col-span-1 sm:scroll-mt-6 lg:col-span-2 2xl:col-span-1`, 'hidden flex-col gap-3 sm:p-3', {
34-
flex: selectedSideBar && sideBarTarget === 'list-card',
34+
'hidden md:flex': selectedSideBar && sideBarTarget === 'list-card',
3535
})
3636
"
3737
>
@@ -43,10 +43,10 @@ const { selectedSideBar, sideBarTarget } = storeToRefs(useAppStore());
4343
<style lang="css" scoped>
4444
@reference "../../css/app.css";
4545
.card {
46-
@apply bg-primary-900 dark:bg-primary-dark-900 h-fit ring-gray-900/5 sm:rounded-2xl sm:shadow-xl sm:ring-1;
46+
@apply bg-surface-1 h-fit ring-gray-900/5 sm:rounded-2xl sm:shadow-xl sm:ring-1;
4747
}
4848
4949
.page {
50-
@apply bg-primary-900 dark:bg-primary-dark-900 sm:bg-primary-950 sm:dark:bg-primary-dark-950 xms:px-6 p-3 text-gray-900 antialiased sm:p-6 dark:text-white;
50+
@apply bg-surface-1 sm:bg-surface-0 xms:px-6 text-foreground-0 p-3 antialiased sm:p-6;
5151
}
5252
</style>

0 commit comments

Comments
 (0)