Hide menu on mobile (no drawer yet)

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

Hide file tree

Showing 7 changed files with 34 additions and 9 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Groups.vue b/components/Groups.vue
@@ -2,7 +2,7 @@
     <Button class="mb-3" label="New Group" @click="visible = true"></Button>
 
     <div class="card p-0">
-        <DataTable :value="list" single>
+        <DataTable scrollable :value="list" single>
             <Column field="name" header="Group Name"></Column>
             <Column header="Public Link" style="width: 15%">
                 <template #body="{ data }">

diff --git a/components/Releases.vue b/components/Releases.vue
@@ -1,7 +1,7 @@
 <template>
     <Button @click="upload" label="Upload" class="mb-3"></Button>
     <div class="card p-0">
-        <DataTable :value="list" single @row-click="selectRow($event)" selectionMode="single">
+        <DataTable scrollable :value="list" single @row-click="selectRow($event)" selectionMode="single">
             <Column field="artifacts.releaseId" header="Release Id" style="width: 15%"></Column>
             <Column field="artifacts.versionName2" header="Version Name"></Column>
             <Column field="artifacts.versionCode2" header="Version Code"></Column>

diff --git a/layouts/AppHeader.vue b/layouts/AppHeader.vue
@@ -1,5 +1,8 @@
 <template>
     <div class="px-4 py-3" style="background-color: var(--surface-card);">
-        <label class="font-bold text-lg">DistApp</label>
+        <div class="flex flex-row gap-3">
+            <label class="pi pi-box text-3xl" />
+            <label class="font-bold text-lg">DistApp</label>
+        </div>
     </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -11,14 +11,36 @@ const signout = () => {
 
 </script>
 
+<style scoped lang="scss">
+.layout-container {
+    >.layout-drawer {
+        margin-bottom: 0px;
+        margin: 0px !important;
+        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;
+    }
+}
+</style>
+
 <template>
     <div class="h-full flex flex-column">
         <!-- <div style="border-bottom: 1px solid var(--surface-border);">
             <AppHeader />
         </div> -->
-        <div class="flex-1 flex flex-row overflow-auto">
-            <div style="width: 300px; margin-bottom: 0px; margin: 0px !important; border-radius: 0px !important; border: 0px !important; border-right: 1px solid var(--surface-border) !important;"
-                class="card ml-2 mt-2 mb-2 p-2 flex flex-column">
+        <div class="flex-1 flex flex-row overflow-auto layout-container">
+            <div class="card flex flex-column layout-drawer">
                 <div class="flex-1 overflow-auto">
                     <AppHeader />
                     <AppMenu />
@@ -27,7 +49,7 @@ const signout = () => {
                     <Button @click="signout" label="Sign Out"></Button>
                 </div>
             </div>
-            <div class="flex-1 overflow-auto p-5">
+            <div class="flex-1 overflow-auto layout-content">
                 <slot />
             </div>
         </div>

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "nuxt-primevue": "^0.3.1",
     "postcss": "^8.4.38",
     "prettier": "2.7.1",
-    "sass": "^1.60.0",
+    "sass": "^1.76.0",
     "sass-loader": "^10.4.1",
     "tailwindcss": "^3.4.3"
   }

diff --git a/pages/apps.vue b/pages/apps.vue
@@ -123,7 +123,7 @@ const upperCase = (value: string | null | undefined) => {
                 </div>
             </template>
         </Toolbar>
-        <DataTable :value="apps" :rows="99999" responsiveLayout="scroll" @rowSelect="onRowSelect"
+        <DataTable scrollable :value="apps" :rows="99999" responsiveLayout="scroll" @rowSelect="onRowSelect"
             selectionMode="single">
             <Column header="Name">
                 <template #body="prop">