Utilizing Reactstrap to design a customized vertical login page and NavBar with a unique background and text color scheme

I am currently working on creating a login page for accessing the main site that features a NavBar. I am utilizing ReactStrap, but I am facing challenges in making the NavBar vertical instead of horizontal, as well as customizing the background, text colors, and images. One of my achievements includes implementing conditional rendering to cater different functionalities to administrator users (such as managing products, users, and purchases) and seller users (who are limited to sales and viewing sales records).

Below is a snippet of my code:

App.js:

import React from 'react';
import "./bootstrap.app.css";
import { BrowserRouter as Router, Route} from "react-router-dom";

import Example from "./componentes/navbar.componente"
import RegistroVentas from "./componentes/registro-ventas.componente";
import EditarVenta from "./componentes/editar-venta.componente";
import VenderProducto from "./componentes/realizar-venta.componente";
import NuevoUsuario from "./componentes/nuevo-usuario.componente";
import NuevoProducto from "./componentes/nuevo-producto.componente";
import ComprarProducto from "./componentes/realizar-compra.componente";

function App() {
  return (
    <Router>
      <div className="container">
      <Example />
      <br/>
        <Route path="/" exact component={RegistroVentas} />
        <Route path="/registroVentas" component={RegistroVentas} />
        <Route path="/editar/:id" component={EditarVenta} />
        <Route path="/venta" component={VenderProducto} />
        <Route path="/nuevoUsuario" component={NuevoUsuario} />
        <Route path="/nuevoProducto" component={NuevoProducto} />
        <Route path="/compra" component={ComprarProducto} />
      </div>
    </Router>
  );
}

export default App;

navbar.js:

import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  Badge,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem } from 'reactstrap';

class Ventas extends React.Component {
  render() {
    return(
        ...
      );
  }
}

class Compra extends React.Component {
  render() {
    return(
         ...
      );
  }
}

class Altas extends React.Component {
  render () {
    return(  
          ...
      );
  }
}


export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.tipoUsuario='administrador';
    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    ...
  }

  render() {
    
    return (
            
      <div>
        <Navbar  color="green"  expand="lg">
          <NavbarBrand  href="/">Supermercado Caplan</NavbarBrand>
          <NavbarToggler vertical className="d-flex" onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="d-flex ml-auto" >
              <Ventas />
              {this.tipoUsuario=='administrador' ?      
                <Compra /> : <a></a>
                }
                {this.tipoUsuario=='administrador' ? 
                <Altas /> : <a></a>
                }
            </Nav>
          </Collapse>
        </Navbar>
      </div>lt
    );
  }
}

Current Output:https://i.sstatic.net/JsSoN.png

Desired Output:https://i.sstatic.net/Jpygi.png

If anyone has suggestions on how to accomplish this, it would be greatly appreciated!

Thank you for your help!

Answer №1

When working with Reactstrap, there isn't a built-in component called Sidebar. However, you can easily obtain a template that includes a sidebar and integrate it into your application. As for implementing a login feature, there are numerous examples available online. While most of them should function correctly when implemented correctly, I opted for a straightforward method that suited the requirements of my project. It's worth noting that this method may not be the most secure choice for applications deployed on web services, as security is crucial in such environments compared to locally hosted apps created for educational purposes.

If you're interested in using the same sidebar template and login approach as I did, you can find them here:

Sidebar template: https://codesandbox.io/s/5ku6t

Login method used:

To see how I integrated these components into my app, check out the implementation here: (Be sure to explore the frontend folder for detailed insights)

In my application, I customized the appearance of the sidebar and topbar by creating custom CSS classes and applying them to the respective components. You can view these classes in the App.css file located in the frontend directory.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template

I'm currently experimenting with using Angular CLI alongside the latest JavaScriptServices AspNetCore Angular Spa template. In the past, I would simply copy and paste a .angular-cli.json file into my project's root directory, change "root" to "C ...

Converting a JavaScript object into HTML output

I have received the following JSON data: [    {       "fields": {          "url": "http://www.domain_name.co.uk/MP3/SF560783-01-01-01.mp3\n",          "track_name": "Lion City ",          "release_id": 560783,    ...

Encountering a Project Oxford error - HTTP 404 while trying to access Computer Vision API with Javascript

I am attempting to retrieve JSON data from Microsoft Project Oxford via an API call. Despite following the API reference, I encounter a 404 error when making the call. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">< ...

Change the text inside a container without losing any associated event listeners using JavaScript or jQuery

Here is the HTML code: <div id="div001"> This is ${Row.1}. <p>${Row.2} explain something else.</p> <p>${Row.3} welcome you. <span>${Hello.World}, this is a new world.</span></p> </div> My objective is ...

Problem where ipcMain.handle() fails to send a value back to ipcRenderer.invoke()

After spending 2 days struggling with this problem, scouring the API documentation of Electron.js and various websites, I am turning to you all as my final hope: Here are the 3 files that are causing the issue: main.ts (excerpt): app.whenReady().then(() ...

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...

How can I reduce the size of a Bootstrap 5 carousel that spans the entire screen?

As someone new to web development, I have found using bootstrap to be extremely helpful. However, I am currently struggling with creating a carousel for my website. My goal is to display some pictures in one corner of the page, but the carousel keeps str ...

Implementing a password toggle feature on a form that extends Django's default Authentication Form

Incorporating a password toggle feature has become quite the challenge as I extend Django's AuthenticationForm to create my UserLoginForm. Attempting to implement this feature has proven difficult, especially since I have been unable to make use of th ...

issues with the styling and scripts within the jsp document

During my project work, I encountered an issue with the front end as shown in the image below. https://i.sstatic.net/gLIUr.png Upon loading the project, all styles and scripts disappear completely. How can I resolve this issue promptly? I attempted to up ...

Eliminate item upon alteration of redux state

I am facing an issue with updating a component when removing an element from the Redux state. Here is my component: const mapStateToProps = state => ({ products: state.shoppingBasket.list, }); const ShoppingBasket = React.createClass({ propTypes: ...

Different ways to style this form using only CSS

Consider the HTML code below: <form> <p> <label for="id_name">Name:</label> <input id="id_name" maxlength="40" name="name" type="text"> </p> <p> <label for="id_format">Fo ...

How can multiple elements be connected to an onclick action?

I'm having trouble figuring out how to use an onClick action with jQuery for all the elements in a list of attached files. Here is a snippet of my HTML file: <p>Attachments</p> <div> <ul id="attach"> <li id="KjG34 ...

Is there a way to assign retrieved data to the $scope.variable?

I'm relatively new to both JavaScript and Angular. I have a piece of code that fetches data from an API and successfully prints it to the console, but I'm facing issues when trying to assign this data to $scope.saveData. It seems to only work wit ...

Utilizing CSS filters to add a blur effect to specific elements within an SVG

I've been attempting to use the CSS filter blur on certain elements, but for some reason it's not working as expected. Check out this example in a jsfiddle: http://jsfiddle.net/kuyraypj/ Even though I have applied the following CSS, my '.b ...

Reducing the number of DOM manipulations for websites that heavily utilize jquery.append

Here's a snippet of my coding style for the website: !function(){ window.ResultsGrid = Class.extend(function(){ this.constructor = function($container, options){ this.items = []; this.$container = $($container); ...

Modifying various states within React using the useState() hook

Curiosity strikes me - what actually happens when I modify more than one state in a handler function? Will they be updated simultaneously, or will the changes occur sequentially? const [x, setX] = useState(0) const [y, setY] = useState(0) const handlerFu ...

Having trouble getting material-ui container to work with custom breakpoints in TypeScript?

Currently, I am exploring material-ui and typescript within my educational project. However, I have encountered a perplexing issue for which I am seeking assistance. In this project, I utilize custom breakpoints in the material-ui theme settings. import { ...

How can the object currently being dragged be chosen using JQueryUI Draggable?

Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...

When the button is clicked in Jquery, the HTML is loaded into one div while simultaneously hiding the other div

Looking for some assistance with JQuery, as I am relatively new to it. In my project, I have three divs set up - the first serving as the header, the second containing a slideshow of images along with buttons, and the third that should be displayed upon bu ...

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...