HTDark | Underground Hacking Forum and Cybersecurity Community
  • Earn real money by being active: Hello Guest, earn real money by simply being active on the forum — post quality content, get reactions, and help the community. Once you reach the minimum credit amount, you’ll be able to withdraw your balance directly. Learn how it works.

Frontend Responsive Sidebar Navigation

dEEpEst

dEEpEst

☣☣ In The Depths ☣☣
Staff member
Administrator
Super Moderator
Hacker
Specter
Crawler
Shadow
Joined
Mar 29, 2018
Messages
13,861
Solutions
4
Reputation
27
Reaction score
45,549
Points
1,813
Credits
55,350
‎7 Years of Service‎
 
56%

index.html​

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Sidebar Navigation</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <nav class="sidebar">
    <div class="sidebar-top-wrapper">
      <div class="sidebar-top">
        <a href="#" class="logo_wrapper">
          <img src="assets/logo.svg" alt="Logo" class="logo-small">
          <span class="hide company-name">Stackcraft</span>
        </a>
      </div>
      <button class="expand-btn" type="button"><!-- SVG icon here --></button>
    </div>

    <div class="search__wrapper">
      <!-- SVG icon -->
      <input type="text" placeholder="Search..." aria-labelledby="search-icon" />
    </div>

    <div class="sidebar-links">
      <ul>
        <li>
          <a href="#dashboard" title="Dashboard" class="tooltip">
            <!-- SVG icon -->
            <span class="link hide">Dashboard</span>
            <span class="tooltip__content">Dashboard</span>
          </a>
        </li>
        <!-- Agrega más elementos aquí -->
      </ul>
    </div>

    <div class="separator separator--top"></div>
  </nav>

  <script src="script.js"></script>
</body>
</html>

style.css​

CSS: 
:root {
  --white: #ffffff;
  --sidebar-primary-hover: #EBEFFD;
  --sidebar-bg: #0f1515;
  --bg: #656c76;
  --text: #808183;
  --text-headline: #f9fafc;
  --text-link: #f9fafc;
  --expand-button: #f9fafc;
  --logout: #FA7575;
  --search-bg: #1e1f21;
  --separator: #1e1f21;
  --link-hover: #2f2f2f;
  --text-dark: var(--sidebar-bg);
  --text-white: var(--text-link);
}

body {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  padding: 1rem;
  height: 100%;
  background: var(--bg);
}

html {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  left: 0;
  min-height: 50rem;
  height: 100%;
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  user-select: none;
  max-width: 18rem;
  min-width: 4rem;
  display: flex;
  color: var(--white);
  flex-direction: column;
  background: var(--sidebar-bg);
  transition: max-width 0.2s ease-in-out;
}

body.collapsed .sidebar {
  max-width: 5rem;
  display: flex;
}

body.collapsed .hide {
  position: absolute;
  visibility: hidden;
}

/* Separator */
.separator {
  width: 100%;
  height: 1px;
  background: var(--separator);
  margin: 1rem 0;
}

.separator--top {
  margin-top: auto;
}

/* Search wrapper */
.search__wrapper {
  position: relative;
}

.search__wrapper input {
  background: var(--search-bg);
  min-height: 3rem;
  width: 100%;
  color: var(--text);
  border-radius: 0.75rem;
  padding-left: 2.75rem;
  font-size: 1.4rem;
  border: none;
}

.search__wrapper input::placeholder {
  color: var(--text);
  font-size: 1.2rem;
}

body.collapsed .search__wrapper input::placeholder {
  color: transparent;
}

.search__wrapper input:focus {
  outline: 2px solid var(--white);
}

.search__wrapper svg {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--text);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Sidebar top */
.sidebar-top-wrapper {
  display: flex;
}

.sidebar-top {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  height: 4rem;
  padding-bottom: 1rem;
}

.logo_wrapper {
  display: flex;
  align-items: center;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.35rem;
  padding: 0 0.6rem;
  gap: 0.75rem;
}

.logo-small {
  height: 2rem;
  width: 2rem;
  overflow: hidden;
  object-fit: cover;
}

.company-name {
  white-space: nowrap;
  color: var(--text-headline);
}

/* Menu links */
.sidebar-links {
  margin-top: 1rem;
}

.sidebar-links ul {
  list-style-type: none;
  position: relative;
  display: flex;
  row-gap: 0.5rem;
  flex-direction: column;
}

.sidebar-links li {
  color: var(--text);
  min-width: 3rem;
}

.sidebar-links li a:hover {
  background: var(--link-hover);
  color: var(--text-link);
}

.sidebar-links li a svg {
  stroke: var(--text-link);
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
}

.sidebar-links li a .link {
  overflow: hidden;
  white-space: nowrap;
  animation: fadeIn 0.2s ease-in-out;
}

.sidebar-links .active:hover {
  background: var(--link-hover);
}

/* Tooltip */
.collapsed .tooltip:hover .tooltip__content,
.collapsed .tooltip:focus .tooltip__content {
  visibility: visible;
}

/* Profile part */
.sidebar_profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-direction: row;
  color: var(--text-link);
  overflow-x: hidden;
  height: fit-content;
}

.avatar_wrapper {
  position: relative;
  display: flex;
}

.avatar {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 0.2s ease-in-out;
}

.avatar:hover {
  border: 2px solid var(--text-link);
}

.avatar_name {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  white-space: nowrap;
}

.user-name {
  font-weight: 600;
  text-align: left;
  color: var(--text-white);
}

.email {
  color: var(--text-white);
  font-size: 0.8rem;
}

.logout {
  margin-left: auto;
}

.logout svg {
  color: var(--logout);
}

/* Expand button */
.expand-btn {
  position: absolute;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--expand-button);
  z-index: 2;
  right: -1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
}

.expand-btn svg {
  transform: rotate(-180deg);
  stroke: var(--sidebar-bg);
  width: 1.25rem;
  height: 1.25rem;
}

body.collapsed .expand-btn svg {
  transform: rotate(-360deg);
}

/* Animation */
@keyframes fadeIn {
  from {
    width: 4rem;
    opacity: 0;
  }
  to {
    opacity: 1;
    width: 100%;
  }
}

script.js​

JavaScript: 
const expand_btn = document.querySelector(".expand-btn");

let activeIndex;

expand_btn.addEventListener("click", () => {
  document.body.classList.toggle("collapsed");
});

const current = window.location.href;
const allLinks = document.querySelectorAll(".sidebar-links a");

allLinks.forEach((elem) => {
  elem.addEventListener("click", function () {
    const hrefLinkClick = elem.href;

    allLinks.forEach((link) => {
      if (link.href == hrefLinkClick) {
        link.classList.add("active");
      } else {
        link.classList.remove("active");
      }
    });
  });
});

const searchInput = document.querySelector(".search__wrapper input");

searchInput.addEventListener("focus", (e) => {
  document.body.classList.remove("collapsed");
});

This set of files recreates the project's behavior and appearance as shown in the video. You'll just need to make sure to include the necessary SVG icons in the marked sections and adjust image paths accordingly.
 
You must log in or register to reply here.
Back
Top