side-drawer | A simple side drawer written as HTML custom element

Snack I have a bar chart application with filters. I have included a side menu in the app. I need for the bar chart to display on the main screen and filters to display in the side menu. Currently, my bar chart is overlayering the side menu, like this-

I am not sure how to organize content on the main screen or the side menu. Maybe I am using the wrong package? The filters interact with the bar graph, that's why they can't be written out in different functions.

If viewing the snack, Clicking anywhere on the screen opens the side menu.

I am making a stock app with a stock watchlist , but the socket.io clients keeps on making new connection to a single browser. After about 250 connection it gives the javascript heap out of memory and stops working.The data that i am sending from socket is an array of objetc similar to the one in the initial state in the client side code. Also if you have a better way to render it and any other suggestion that would be nice.

Server Side

I want to when I change the value of pros.show (simply it gives true or false), then add class to element dynamically. How could I do that using sideDrawer method?

I want to create a side bar with HTML and CSS that appears on the right side of my page, but float:right doesn't work correctly and when I remove the position:fixed and change it to relative, the height becomes small. How can I make the exact sidebar but on the right side? I want it to be responsive too. Here's the sidebar code:

Good day,

I have read through a number of SO posts which were helpful in progressing my problem, but I still have not found anything concrete information on whether there is an established method for the following scenario I face:

I have an application that allows a user to either:

1. Add a graph; or
2. Edit an existing graph

When either the 'add graph' button or the 'edit graph' button is clicked, a side-drawer opens. The fields for for the x-axis label, y-axis label and chart title are either blank (for case (1)) or have fields already populated (for case (2)). The fields themselves are editable text input fields.

Currently, when a graph is added, I create a UUID for the graph and then the user can enter text into the fields, and the click save. When save is clicked a Redux action is dispatched to save the content of the fields in the Redux store. The two-way is binding between the text field values and the local state which contains those values initially. Once the 'save' button is clicked and the Redux action fires, the local state is set to empty strings for each field. So Redux is only used when we actually hit the save button.

Now, when an existing graph is selected, I populate the text fields of the side-drawer with the Redux state via mapStateToProps. I use two way binding that is between the text input fields and the Redux store via Redux actions incorporating debouncing to try reduce the number of actions fired off. This means that essentially a slow typer would cause a Redux action to be fired for every key stroke when editing the fields.

I do not like that we have different methods of two-way binding depending on whether the user clicks 'edit' or 'add'. I also do not like having so many Redux actions fired off for something as simple as adding or removing a letter from a word.

I then went through SO and the Redux documents and found that in general people advised that one should not initialise local state with Redux state via props. What I wanted to do was actually copy the Redux state describing the existing content of the fields (when edit is clicked) into the local state and then have the two-way binding in the local state, similar to what I have for the Case (1) scenario. This then eliminates numerous Redux actions being fired off in quick succession and I can use the same two-way binding irrespective of whether 'add' or 'edit' is clicked. But after reading through the documents it seems this is a bad idea for in the case that there is a an unexpected re-render and the local state is reset mid-way through editing, as well as having two sources of truth.

Having the two-way binding in the local state for an added graph and in Redux for an edited graph is quite confusing and does not provide clean and consistent code for those who will need to maintain this code base. Is there a established method that provides for such a scenario? I imagine editing posts on social media would be a similar context to the problem I am facing.

I have not provided my code as it is not a coding question in itself but rather a design problem and my Redux code is split over several files. But I am happy to provide the code if it helps.

I have two redux state variables, one that hold an array of user information and one that holds a true/false value for a side drawer open/close feature. The true/false value triggers a className change which triggers CSS to open/close the drawer. The array of user information is fetched from a firebase cloud firestore database collection.

For some reason after the user array is fetched and saved to the redux state and a user opens the side drawer the redux action sent is only for the side drawer, but the side drawer and users information is changed.

The side drawer opens like normal, but the user array is set to null.

Redux Events:

1. Initial State: https://imgur.com/a/IgvXMLe
2. After side drawer is opened: https://imgur.com/a/wVRg6Az
3. Side Drawer Event Difference: https://imgur.com/a/u1hrcvT

Side Drawer Component

I'm trying to integrate nativescript-checkbox into my vue app. The vue example usage is not very clear though. They don't say whether or not to import the class into the component.

But I did try it all, I imported nativescript-checkbox in my component and it would still not show. I even tried using CheckBox as opposed to check-box from the documentation.

In main.js

I am trying to create this screen in NativeScript:

I am using a GridLayout like everyone has recommended. I followed the docs to the letter ( I think ) and this is my outcome:

As you see, not even close. Here is my XML:

I am trying to simply display images in 2 rows, 2 columns - equally centered all around.

I have tried all sorts of Layouts. Here are a couple of my failures:

My XML