react-app with sidebar - logo only

freecodecamp
react router ref

npx create-react-app name
cd name
code .

npm i @emailjs/browser
npm i @fortawesome/free-brands-svg-icons
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome
npm i animate.css
npm i gsap-trial
npm i loader.css
npm i react-leaflet
npm i react-loaders
npm i react-router-dom
npm i sass

sass
.scss
import .scss

prettier
.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

App.scss

$primary-color: #ffd700;

@import 'animate.css';

@font-face {
  font-family: 'Helvetica Neue';
  src: url('./assets/fonts/helvetica-neu.ttf') format('ttf');
}

@font-face {
  font-family: 'La Belle Aurore';
  src: url('./assets/fonts/LaBelleAurore.woff2') format('woff2');
}

@font-face {
  font-family: 'Coolvetica';
  src: url('./assets/fonts/CoolveticaRg-Regular.woff2') format('woff2');
}

input,
textarea {
  font-family: 'Helvetica Neue';
}

index.scss

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  font-family: 300 11px/1.4 'Helvetica Neue', 'sans-serif';
  color: #444;
  background: #022c43;
  overflow: hidden;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

index.js

import { BrowserRouter } from 'react-router-dom'

<React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>

src/components/Sidebar/index.js

import { Link } from 'react-router-dom'
import './index.scss'
import LogoS from '../../assets/images/logo-s.png'
import LogoSubtitle from '../../assets/images/logo_sub.png'

const Sidebar = () => (
  <div className="nav-bar">
    <Link className="logo" to="/">
      <img src={LogoS} alt="logo" />
      <img src={LogoSubtitle} alt="slobodan" />
    </Link>
  </div>
)

export default Sidebar

src/components/Sidebar/index.scss

.nav-bar {
  background: #181818;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  min-height: 500px;

  .logo {
    display: block;
    padding: 8px 0;

    img {
      display: block;
      margin: 8px auto;
      width: 24px;
    }
  }
}

src/components/Layout/index.js

import Sidebar from '../Sidebar'
import './index.scss'

const Layout = () => {
  return (
    <>
      <Sidebar />
    </>
  )
}

export default Layout