feat: #896 sidenav collapseble for mobile (#943)

frontend/package.json

@@ -13,13 +13,13 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-theme": "^1.4.2",
+        "@bcgov-nr/nr-theme": "^1.5.0",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "0.26.1",
         "bootstrap": "^5.2.3",
         "fam-api": "file:../client-code-gen/gen",
-        "primevue": "^3.27.0",
+        "primevue": "3.34.0",
         "vee-validate": "^4.7.3",
         "vue": "^3.2.38",
         "vue-router": "^4.1.5"

frontend/src/alltypes.d.ts

@@ -23,3 +23,6 @@ declare module '@carbon/icons-vue/es/user--avatar/20';
 
 // large
 declare module '@carbon/icons-vue/es/error--filled/24';
+declare module '@carbon/icons-vue/es/trash-can/16';
+declare module '@carbon/icons-vue/es/edit/16';
+declare module '@carbon/icons-vue/es/menu/20';

frontend/src/assets/styles/default-theme.scss

@@ -44,4 +44,4 @@ $light-support-success: map.get(lightTheme.$light-theme, 'support-success');
 
 //icon
 $light-icon-primary: map.get(lightTheme.$light-theme, 'icon-primary');
-
+$light-icon-on-color: map.get(lightTheme.$light-theme, 'icon-on-color');

frontend/src/assets/styles/icon.scss

@@ -15,7 +15,7 @@
 }
 .custom-carbon-icon--help,
 .custom-carbon-icon--sidenav  {
-    margin-right: 1.5625rem;
+    margin-right: 1.5rem;
 }
 
 .custom-carbon-icon--sidenav {
@@ -24,4 +24,8 @@
 
 .custom-carbon-icon--trash-can {
     color: $light-icon-primary;
+}
+
+.custom-carbon-icon--menu {
+    color: $light-icon-on-color;
 }

frontend/src/assets/styles/layout.scss

@@ -9,15 +9,15 @@ body {
     position: absolute;
     display: block;
     height: calc(100vh - $header-height);
-    left: 16rem;
-    right: 0;
+    width: 100vw;
     bottom: 0;
     overflow: auto;
-    padding: 2.62rem 2rem 0;
+    padding: 1.06rem 1rem 0 1rem;
 }
 
 .page-body {
-    margin-top: 2rem;
+    margin-top: 1.5rem;
+    width: 100%;
 }
 
 .form-container {
@@ -59,3 +59,20 @@ input[type='number'] {
 .p-inputtext {
     font-family: inherit;
 }
+
+@media (min-width: 768px) {
+    .main {
+        padding: 1.5rem 1.5rem 0 1.5rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .page-body {
+        width:  100%;
+    }
+
+    .main {
+        left: 16rem;
+        width: calc(100vw - 16rem);
+    }
+}

frontend/src/components/common/Button.vue

@@ -66,9 +66,7 @@ function onClicked(event: any) {
     </Button>
 </template>
 <style lang="scss">
-.nr-button {
-    display: flex;
-}
+
 .nr-button .icon {
     margin-right: auto;
 }

frontend/src/components/common/Icon.vue

@@ -73,6 +73,9 @@ const icons = {
     'error--filled24': defineAsyncComponent(
         () => import('@carbon/icons-vue/es/error--filled/24')
     ),
+    menu20: defineAsyncComponent(
+        () => import('@carbon/icons-vue/es/menu/20')
+    ),
 } as any;
 </script>
 

frontend/src/components/common/ProfileSidebar.vue

@@ -4,7 +4,7 @@ import Avatar from 'primevue/avatar';
 import Button from '@/components/common/Button.vue';
 import { IconPosition, IconSize } from '@/enum/IconEnum';
 import authService from '@/services/AuthService';
-import { useProfileSidebarVisible } from '@/store/ProfileVisibleState';
+import { profileSidebarState } from '@/store/ProfileSidebarState';
 
 const userName = authService.state.value.famLoginUser!.username;
 const initals = userName ? userName.slice(0, 2) : '';
@@ -28,20 +28,20 @@ const buttonLabel = computed(() => {
 <template>
     <div
         :class="
-            useProfileSidebarVisible.isProfileVisible ? 'fade-in' : 'fade-out'
+            profileSidebarState.isVisible ? 'fade-in' : 'fade-out'
         "
-        @click="useProfileSidebarVisible.toggleVisible()"
+        @click="profileSidebarState.toggleVisible()"
     ></div>
     <Transition name="slide">
         <div
             class="profile-container"
-            v-if="useProfileSidebarVisible.isProfileVisible"
+            v-if="profileSidebarState.isVisible"
         >
             <div class="profile-header">
                 <h2>Profile</h2>
                 <button
                     class="btn-icon"
-                    @click="useProfileSidebarVisible.toggleVisible()"
+                    @click="profileSidebarState.toggleVisible()"
                     aria-label="Close"
                 >
                     <Icon icon="close" :size="IconSize.small"></Icon>
@@ -90,7 +90,7 @@ const buttonLabel = computed(() => {
     border-left: 0.0625rem solid #dfdfe1;
     color: #000;
     height: calc(100vh - 3rem);
-    inset: 0 0 0 10%;
+    inset: 0 0 0 0;
     margin: 3rem 0 0;
     padding: 0 1rem 0;
     position: fixed;
@@ -200,7 +200,7 @@ const buttonLabel = computed(() => {
     position: fixed;
     width: 100%;
     inset: 3rem 0 0 0;
-    z-index: 999;
+    z-index: 1110;
 }
 
 .fade-out {
@@ -214,13 +214,25 @@ const buttonLabel = computed(() => {
     }
 }
 
+@media (min-width: 600px) {
+    .profile-container {
+        inset: 0 0 0 50%;
+    }
+}
+
 @media (min-width: 790px) {
     .profile-container {
         inset: 0 0 0 60%;
     }
 }
 
 @media (min-width: 900px) {
+    .profile-container {
+        inset: 0 0 0 60%;
+    }
+}
+
+@media (min-width: 1366px) {
     .profile-container {
         inset: 0 0 0 70%;
     }