Some responsive

yunusefendi52 · May 1, 2024 · 47f206a · 47f206a
1 parent 3e9d9fc
commit 47f206a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 32 deletions.
diff --git a/assets/layout/styles/layout/_variables.scss b/assets/layout/styles/layout/_variables.scss
@@ -1,4 +1,8 @@
-/* General */
-$scale:14px;                    /* main font size */ 
-$borderRadius:8px;             /* border radius of layout element e.g. card, sidebar */ 
-$transitionDuration:.2s;        /* transition duration of layout elements e.g. sidebar, overlay menus */ 
+$scale: 14px;
+
+@media (min-width: 576px) {
+    $scale: 50px;
+}
+
+$borderRadius: 8px;
+$transitionDuration: .2s;
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -9,6 +9,7 @@ const signout = () => {
     navigateTo('/')
 }
 
+const visible = ref(false)
 </script>
 
 <style scoped lang="scss">
@@ -19,19 +20,26 @@ const signout = () => {
         border-radius: 0px !important;
         border: 0px !important;
         border-right: 1px solid var(--surface-border) !important;
-        
+
         width: 0rem;
         padding: 0rem;
-        
+
         @media (min-width: 576px) {
             padding: 0.3rem;
             width: 300px;
         }
     }
+
     >.layout-content {
         padding: 1.25rem;
     }
 }
+
+@media (min-width: 576px) {
+    .header-mobile {
+        display: none !important;
+    }
+}
 </style>
 
 <template>
@@ -41,6 +49,14 @@ const signout = () => {
         </div> -->
         <div class="flex-1 flex flex-row overflow-auto layout-container">
             <div class="card flex flex-column layout-drawer">
+                <Sidebar v-model:visible="visible">
+                    <div class="flex flex-col h-full">
+                        <AppMenu class="flex-1" />
+                        <div class="flex gap-3 p-2 flex-column">
+                            <Button @click="signout" label="Sign Out"></Button>
+                        </div>
+                    </div>
+                </Sidebar>
                 <div class="flex-1 overflow-auto">
                     <AppHeader />
                     <AppMenu />
@@ -50,6 +66,10 @@ const signout = () => {
                 </div>
             </div>
             <div class="flex-1 overflow-auto layout-content">
+                <div class="mb-3 flex flex-row gap-3 items-center header-mobile">
+                    <Button icon="pi pi-bars" @click="visible = !visible" />
+                    <label class="font-bold text-lg">DistApp</label>
+                </div>
                 <slot />
             </div>
         </div>

diff --git a/pages/apps.vue b/pages/apps.vue
@@ -93,36 +93,24 @@ const upperCase = (value: string | null | undefined) => {
 
 <template>
     <div class="card pt-2" style="padding: 0px;">
-        <!-- <div class="p-3 flex flex-row items-center">
-            <label class="text-xl font-bold flex-1">Apps</label>
-            <div class="flex flex-row gap-2">
-                <Button label="Primary" raised />
+        <div class="flex flex-col gap-3 px-3 py-3 sm:flex-row">
+            <div class="flex flex-row items-center gap-2 sm:flex-1">
+                <label class="text-2xl font-bold flex-1">Apps</label>
+                <ProgressSpinner style="width: 22px; height: 22px" strokeWidth="6" v-if="pending" />
             </div>
-        </div> -->
-        <Toolbar style="border: 0px;" class="px-3">
-            <template #start>
-                <div class="flex flex-row items-center gap-2">
-                    <label class="text-2xl font-bold flex-1">Apps</label>
-                    <ProgressSpinner style="width: 22px; height: 22px" strokeWidth="6" v-if="pending" />
-                </div>
-            </template>
-
-            <template #center>
-            </template>
-
-            <template #end>
-                <div class="flex flex-row gap-3">
-                    <form @submit="search">
-                        <IconField iconPosition="left">
-                            <InputIcon class="pi pi-search"> </InputIcon>
-                            <InputText placeholder="Search" name="search" />
-                        </IconField>
-                    </form>
+            <div class="flex flex-row gap-3">
+                <form @submit="search" class="flex-1 flex-shrink-0">
+                    <IconField iconPosition="left" styl>
+                        <InputIcon class="pi pi-search"> </InputIcon>
+                        <InputText placeholder="Search" name="search" />
+                    </IconField>
+                </form>
+                <div class="flex-shrink">
                     <SplitButton label="Add App" :model="items" @click="addApp" v-if="!isOrg"></SplitButton>
                     <Button label="Add App" @click="addApp" v-if="isOrg"></Button>
                 </div>
-            </template>
-        </Toolbar>
+            </div>
+        </div>
         <DataTable scrollable :value="apps" :rows="99999" responsiveLayout="scroll" @rowSelect="onRowSelect"
             selectionMode="single">
             <Column header="Name">