Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to have a page with or without q-drawer

    Help
    3
    37
    194
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • s.molinari
      s.molinari last edited by

      Ok. See if this is getting closer. šŸ™‚

      https://codesandbox.io/s/objective-kirch-jsono?file=/src/layouts/MainLayout.vue

      Scott

      1 Reply Last reply Reply Quote 0
      • DarkLite1
        DarkLite1 last edited by

        Still no e-mail I’m afraid.

        1 Reply Last reply Reply Quote 0
        • DarkLite1
          DarkLite1 last edited by DarkLite1

          Thank you Scott for updating my code. Eventually I’ve ended up doing it this way. By just feeding in the needed links in the routes.js file. This does exacty what I want.

          Some things I have issues with:

          • Webiste not reloading on state change in the store. (Github)
            When I change something in the file ā€˜/store/navigation/state.js’, say I change ā€˜label: ā€œAboutā€ā€™ to ā€˜label: ā€œAbout2222ā€ā€™, the webpage is not reloaded automatically. Quasar detects the change as I see it re-running in the terminal when I save the change but the browser needs a manually F5 or refresh. Don’t know if this is me, Quasar or a plugin that is failing.

          • Keep the header link active
            When I click on Tickets it gets correctly underlined. When I then select ā€˜New ticket’ the underlining is gone on the Tickets in the header bar. I would love it if this could stay for clicking all pages withn the side drawer of Tickets.
            7e2eee0e-9242-47f3-919b-8305a0434c31-image.png

          The sanbox is now updated, so you can see what I mean. On a side note, there are still no emails coming through. I tripple checked my email address, junk and setting here below this topic.

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            I just got my first email notification, so that is working.

            Remember that just because you update a state value in a Vuex file, it doesn’t mean that state changes automatically propagates into your app via HMR. Remember, we are using a ā€œreactiveā€ system and it only ā€œreactsā€ to changes made in the application state, i.e. some kind of internal event.

            You’ll need to figure out how to read from the router the path and reset activeTab whenever the sub-route changes.

            Scott

            1 Reply Last reply Reply Quote 0
            • DarkLite1
              DarkLite1 last edited by DarkLite1

              I hear you Scott with regards to the events triggering a state change and in turn trigger an element in the DOM to be updaetd, whcih then also reloads parts of the page as it’s Vue.js reactivity. However, in the case of developping an app a developer might change some values in some files. At that time a re-rerender or reload of the page would be nice. To see if the changes made have the correct behaviour/styling/effed. So when I run quasar dev in the command line, I expect Quasar to reload my browser window on code change. Maybe I’m seeing this wrong…

              You are correct, I’ll put the activeTab within the store.state. This ways I can set the correct classess on the q-tabs in the header.

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                Are you seeing the HMR not working on your local dev environment? Because, I just tested it (roughly) by changing a value in Vuex locally and the value was updated in the browser.

                Scott

                1 Reply Last reply Reply Quote 0
                • DarkLite1
                  DarkLite1 last edited by

                  For me that didn’t work. I see Quasar reloading as it detects the changed file of state.js but the browser isn’t get a ping to reload. However, when I then reload the browser page myself I do see the new value appearing. You can test it with the my codesandbox.

                  qyloxe 1 Reply Last reply Reply Quote 0
                  • qyloxe
                    qyloxe @DarkLite1 last edited by

                    @DarkLite1 said in How to have a page with or without q-drawer:

                    For me that didn’t work.

                    could you remove all your node_modules and install everything again? There was a time, when I had similar problem with HMR and cleaning node_modules helped.

                    1 Reply Last reply Reply Quote 0
                    • s.molinari
                      s.molinari last edited by s.molinari

                      You had some code added to the Vuex/ Store index.js file. That seems to be what was stopping the codesandbox from refreshing.

                      https://codesandbox.io/s/blissful-bird-01usn?file=/src/store/index.js

                      Scott

                      1 Reply Last reply Reply Quote 0
                      • DarkLite1
                        DarkLite1 last edited by DarkLite1

                        Yup, that fixed it. Thanks Scott.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post