fix johan

assets/css/global.scss

@@ -21,7 +21,7 @@ header .v-toolbar__content{
 .header_menu{
   max-height: 300px;
   min-width: 300px;
-  overflow-y: scroll
+  overflow-y: auto;
 }
 
 .v-menu__content{
@@ -36,3 +36,36 @@ header .v-toolbar__content{
   height: 46px;
   width: 46px;
 }
+
+.left-menu > div > .v-list-group--no-action > .v-list-group__header,
+.left-menu > div > .v-list-item
+{
+  border-left:3px solid var(--v-ot_dark_grey-base, white);
+}
+
+.left-menu > div > .v-list-group--no-action > .v-list-group__header:hover,
+.left-menu > div > .v-list-group--no-action > .v-list-item--active,
+.left-menu > div > .v-list-group--no-action > .v-list-group__items,
+.left-menu > div > .v-list-item:hover,
+.left-menu > div > .v-list-item--active
+{
+  border-left:3px solid var(--v-ot_green-base, white);
+  background: var(--v-ot_dark_grey_hover-base, white);
+}
+
+.left-menu > div > .v-list-group--no-action > .v-list-group__header:hover > .v-list-item__action > .v-icon,
+.left-menu > div > .v-list-group--no-action > .v-list-group__header:hover > .v-list-item__content > .v-list-item__title,
+.left-menu > div > .v-list-group--no-action > .v-list-item--active > .v-list-item__action > .v-icon,
+.left-menu > div > .v-list-group--no-action > .v-list-item--active > .v-list-item__content > .v-list-item__title,
+.left-menu > div > .v-list-group--no-action > .v-list-group__items > .v-list-item__action,
+.left-menu > div > .v-list-item:hover > .v-list-item__action > .v-icon,
+.left-menu > div > .v-list-item:hover > .v-list-item__content > .v-list-item__title,
+{
+  color: var(--v-ot_white-base, white) !important;
+
+}
+
+.left-menu > div > .v-list-group--no-action > .v-list-item--active,
+.left-menu > div > .v-list-group--no-action > .v-list-group__items{
+  background: var(--v-ot_dark_grey_hover-base, white);
+}

assets/css/variables.scss

@@ -6,3 +6,4 @@ $btn-text-transform: none;
 
 $breadcrumbs-padding: 5px 5px;
 $breadcrumbs-even-child-padding: 0 10px;
+$body-font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;

components/Layout/Header.vue

@@ -14,15 +14,19 @@ et aux préférences de l'utilisateur
   >
     <v-btn
       v-if="displayedMiniVariant"
-      class="menu-btn"
-      icon
-      @click.stop="displayedMenu()"
+      class="menu-btn d-none d-sm-none d-md-flex" icon @click.stop="displayedMiniMenu()"
     >
       <v-icon class="ot_white--text">
         mdi-menu{{ `${properties.miniVariant ? '' : '-open'}` }}
       </v-icon>
     </v-btn>
 
+    <v-btn class="menu-btn d-sm-flex d-md-none" icon @click.stop="displayedMenu()">
+      <v-icon class="ot_white--text">
+        mdi-menu
+      </v-icon>
+    </v-btn>
+
     <v-toolbar-title v-text="title" />
 
     <v-spacer />
@@ -75,6 +79,7 @@ export default defineComponent({
 
     const properties:UnwrapRef<AnyJson> = reactive({
       miniVariant: false,
+      openMenu: false,
       homeUrl: $config.baseURL_adminLegacy
     })
 
@@ -90,9 +95,14 @@ export default defineComponent({
     const configurationMenu:Ref<any> = $useMenu.setupContext().useConfigurationMenuConstruct()
     const accountMenu:Ref<any> = $useMenu.setupContext().useAccountMenuConstruct()
 
-    const displayedMenu = () => {
+    const displayedMiniMenu = () => {
       properties.miniVariant = !properties.miniVariant
-      emit('handle-open-menu-click', properties.miniVariant)
+      emit('handle-open-mini-menu-click', properties.miniVariant)
+    }
+
+    const displayedMenu = () => {
+      properties.openMenu = !properties.openMenu
+      emit('handle-open-menu-click', properties.openMenu )
     }
 
     const showUniversalButton =
@@ -114,6 +124,7 @@ export default defineComponent({
       hasAccessesMenu,
       hasFamilyMenu,
       title,
+      displayedMiniMenu,
       displayedMenu,
       webSiteMenu,
       myAccessesMenu,

components/Layout/Menu.vue

@@ -6,12 +6,13 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 <template>
   <v-navigation-drawer
     :mini-variant.sync="miniVariant"
+    v-model="open"
+    fixed
     clipped
     class="ot_dark_grey ot_menu_color--text"
-    fixed
     app
   >
-    <v-list>
+    <v-list class="left-menu">
       <div v-for="(item, i) in menu" :key="i">
         <v-list-item
           v-if="!item.children"
@@ -55,14 +56,18 @@ Prend en paramètre une liste de ItemMenu et les met en forme
             exact
           >
             <v-list-item-action>
-              <v-icon class="ot_menu_color--text" small>
+              <v-icon class="ot_white--text" small>
                 {{ child.icon }}
               </v-icon>
             </v-list-item-action>
             <v-list-item-content>
-              <v-list-item-title class="ot_menu_color--text" v-text="$t(child.title)" />
+              <v-list-item-title class="ot_white--text" v-text="$t(child.title)" />
             </v-list-item-content>
           </v-list-item>
+
+          <template #appendIcon>
+            <v-icon class="ot_menu_color--text" small>mdi-chevron-down</v-icon>
+          </template>
         </v-list-group>
       </div>
     </v-list>
@@ -70,8 +75,9 @@ Prend en paramètre une liste de ItemMenu et les met en forme
 </template>
 
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+import {computed, defineComponent, onUnmounted, ref, toRefs, watch} from '@nuxtjs/composition-api'
 import { ItemsMenu } from '~/types/interfaces'
+import {WatchStopHandle} from "@vue/composition-api";
 
 export default defineComponent({
   props: {
@@ -82,6 +88,25 @@ export default defineComponent({
     miniVariant: {
       type: Boolean,
       required: true
+    },
+    openMenu: {
+      type: Boolean,
+      required: true
+    }
+  },
+  setup(props){
+    const {openMenu} = toRefs(props)
+    const open = ref(false)
+    const unwatch: WatchStopHandle = watch(openMenu, (newValue, oldValue) => {
+      open.value = true
+    })
+
+    onUnmounted(() => {
+      unwatch()
+    })
+
+    return {
+      open
     }
   }
 })
@@ -92,6 +117,10 @@ export default defineComponent({
     margin-right: 10px !important;
   }
 
+  .v-application--is-ltr .v-list-group--no-action > .v-list-group__header{
+    margin-left: 0px;
+    padding-left: 0px;
+  }
   .v-application--is-ltr .v-list-group--no-action > .v-list-group__items > .v-list-item {
     padding-left: 30px;
   }

components/Ui/ExpansionPanel.vue

@@ -6,7 +6,7 @@ Panneaux déroulants de type "accordéon"
 
 <template>
   <v-expansion-panel :id="id">
-    <v-expansion-panel-header class="ot_light_grey">
+    <v-expansion-panel-header color="ot_light_grey">
       <v-icon class="ot_white--text ot_green icon">
         {{ icon }}
       </v-icon>
@@ -44,6 +44,7 @@ export default {
   }
   .v-expansion-panel-header{
     padding: 0;
+    padding-right: 20px;
   }
   .v-expansion-panel--active > .v-expansion-panel-header{
     min-height: 47px;

components/Ui/SystemBar.vue

@@ -5,7 +5,7 @@ System bars
 <template>
     <v-system-bar
       dark
-      height="40"
+      height="50"
       :color="color"
     >
         <div class="flex text-center ot_white--text">

config/nuxtConfig/vuetify.js

@@ -33,7 +33,8 @@ export default {
           primary: colors.blue.darken2,
           ot_green: '#00ad8e',
           ot_light_green: '#a9e0d6',
-          ot_dark_grey: '#2c3a48',
+          ot_dark_grey: '#324150',
+          ot_dark_grey_hover: '#2c3a48',
           ot_grey: '#777777',
           ot_header_menu: '#ECE7E5',
           ot_light_grey: '#f5f5f5',

layouts/default.vue

@@ -4,9 +4,9 @@
     <client-only placeholder=" " />
 
     <v-app dark>
-      <LayoutMenu v-if="displayedMenu" :menu="menu" :mini-variant="properties.miniVariant" />
+      <LayoutMenu v-if="displayedMenu" :menu="menu" :mini-variant="properties.miniVariant" :openMenu="properties.openMenu" />
 
-      <LayoutHeader @handle-open-menu-click="handleOpenMenu" />
+      <LayoutHeader @handle-open-menu-click="handleOpenMenu" @handle-open-mini-menu-click="handleOpenMiniMenu" />
 
       <v-main class="ot_content_color">
         <LayoutSubheader />
@@ -36,12 +36,17 @@ export default defineComponent({
 
     const properties = reactive({
       clipped: false,
-      miniVariant: false
+      miniVariant: false,
+      openMenu: false
     })
 
     const displayedMenu: ComputedRef<boolean> = computed(() => store.state.profile.access.hasLateralMenu)
 
-    const handleOpenMenu = (miniVariant: boolean) => {
+    const handleOpenMenu = (openMenu: boolean) => {
+      properties.openMenu = openMenu
+    }
+
+    const handleOpenMiniMenu = (miniVariant: boolean) => {
       properties.miniVariant = miniVariant
     }
 
@@ -49,7 +54,8 @@ export default defineComponent({
       properties,
       menu,
       displayedMenu,
-      handleOpenMenu
+      handleOpenMenu,
+      handleOpenMiniMenu
     }
   }
 })

pages/organization.vue

@@ -40,6 +40,10 @@ import {File} from "~/models/Core/File"
 
 export default defineComponent({
   name: 'Organization',
+  middleware({ $ability, redirect }) {
+    if(!$ability.can('display', 'organization_page'))
+      return redirect('/error')
+  },
   setup () {
     const { store } = useContext()
 

pages/subscription.vue

@@ -6,8 +6,6 @@ Page 'Mon abonnement'
 <template>
   <LayoutContainer>
     <v-col cols="12" sm="12" md="12">
-      <h3 class="mb-5">{{ $t('my_subscription') }}</h3>
-
       <v-expansion-panels focusable multiple :value="[0,1,2]">
         <UiExpansionPanel id="informations" icon="fa-info">
           <v-container fluid class="container">
@@ -275,6 +273,10 @@ import { ApiResponse, DolibarrAccount } from '~/types/interfaces'
 
 export default defineComponent({
   name: 'Subscription',
+  middleware({ $ability, redirect }) {
+    if(!$ability.can('display', 'subscription_page'))
+      return redirect('/error')
+  },
   setup () {
     const { store, $dataProvider } = useContext()
     const organizationProfile = ref($organizationProfile(store))
@@ -328,4 +330,8 @@ export default defineComponent({
     padding: 12px 18px;
     vertical-align: top;
   }
+
+  .theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
+    background:none;
+  }
 </style>