File Explorer

file-explorer.markdown

File Explorer

A Pen by Dennis on CodePen.

License.

index.html

<div class="app">
  <div class="sidebar">
    <div class="sidebar__nav">
      <i class="material-icons sidebar__nav-icon">arrow_back</i>
      <i class="material-icons sidebar__nav-icon sidebar__next">arrow_forward</i>
      <i class="material-icons sidebar__nav-icon">settings</i>
    </div>
    <div class="dropdown">
      <input type="checkbox" id="quick-access" class="dropdown__click">
      <label for="quick-access" class="dropdown__header">
        <p class="dropdown__title">
          <i class="fas fa-bolt dropdown__icon"></i> 
          <span>Quick Access</span>
        </p>
        <i class="material-icons dropdown__arrow">keyboard_arrow_down</i>
      </label>
      <ul class="dropdown__list">
        <li class="dropdown__item">
          <i class="material-icons dropdown__icon">desktop_windows</i>
          <span>Desktop</span>
        </li>
        <li class="dropdown__item">
          <i class="far fa-file-alt dropdown__icon"></i>
          <span>Documents</span>
        </li>
        <li class="dropdown__item">
          <i class="fas fa-download dropdown__icon"></i>
          <span>Downloads</span>
        </li>
      </ul>
    </div>
    <div class="storage">
      <div class="storage__header">
      <p class="storage__title">Photos</p>
      <div class="storage__size">
        <span>70 GB</span> / <span>100 GB</span>
      </div>
        </div>
      <div class="storage__progress progress">
        <div class="progress__active"></div>
      </div>
    </div>
  </div>
  <div class="body">
    <div class="body__header"></div>
    <div class="body__files"></div>
  </div>
</div>

style.scss

body {
  background-image: url(https://i.pinimg.com/originals/2c/93/3f/2c933fdd5a3b0a5f8a51a0f44eb0f619.jpg);
  width: 1920px;
  height: 1080px;
  background-size: cover;
  padding: 30px;
}

// APP

p {
  margin: 0;
}

.app {
  width: 1170px;
  height: 764px;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
  font-family: "Open Sans", sans-serif;
}

.sidebar {
  position: relative;
  height: 100%;
  width: 300px;
  background-color: rgb(65, 61, 110);
  border-radius: 4px 0 0 4px;
  padding: 30px;
  padding-bottom: 80px;
  box-sizing: border-box;
  color: #fff;
}

.sidebar__nav {
  display: flex;
  align-items: center;
}

.sidebar__nav-icon {
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
  user-select: none;
  &:last-child {
    margin-right: 0;
    margin-left: auto;
  }
}

.sidebar__next {
  opacity: 0.3;
}

.dropdown {
  font-size: 14px;
  font-weight: 300;
  margin-top: 40px;
}

.dropdown__click {
  display: none;
}

.dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.dropdown__icon {
  margin-right: 15px;
  font-size: 15px;
  width: 14px;
  text-align: center;
}

.dropdown__click:checked {
  & + .dropdown__header > .dropdown__arrow {
    transform: rotate(180deg);
  }
  & ~ .dropdown__list {
    display: flex;
  }
}

.dropdown__list {
  display: none;
  padding-left: 35px;
  list-style-type: none;
  flex-direction: column;
  margin: 0;
}

.dropdown__item {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-top: 20px;

  & > .dropdown__icon {
    margin-right: 20px;
  }
}

.storage {
  padding-left: inherit;
  padding-right: inherit;
  left: 0;
  width: 100%;
  position: absolute;
  bottom: 30px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 300;
}

.storage__header {
  display: flex;
  justify-content: space-between;
}

.storage__progress {
  margin-top: 10px;
}

.progress {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: #46427c;
  &__active {
    width: 70%;
    height: 100%;
    border-radius: 3px;
    background-color: #00b1ff;
  }
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />