react-app with sidebar - logo only
tejan
Posted on May 3, 2022
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
💖 💪 🙅 🚩
tejan
Posted on May 3, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
undefined I absolutely love when CSS gets new features (Even though it usually takes me years to remember to use them 😄)
November 27, 2024