Skip to content

Commit

Permalink
Add sidebar section (#247)
Browse files Browse the repository at this point in the history
This addresses #246 and introduces a sidebar with plugin content outlines. To implement the sidebar, several considerations were taken into account:
* Keep the sidebar isolated from the header and footer
* Disable the sidebar for small screens (mobile phones)
* Make it in a fixed position, and allow for scrolling.

We used Materials UI `Drawer` component, it handles most of the above with less code.

Things are done in `App.jsx` and modulized to the have components in `components` folder.

The project folder structure
```
- public
- src
 -- assets
 -- Components
      ---MainIndex.jsx
      ---Details.jsx
      ---Sidebar.jsx
  --App.jsx
  --main.jsx
-index.html
```
  • Loading branch information
AhmedBasem20 authored Aug 10, 2023
1 parent 98c6433 commit 4d94a38
Show file tree
Hide file tree
Showing 5 changed files with 573 additions and 377 deletions.
34 changes: 30 additions & 4 deletions aiida-registry-app/src/App.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
#root {

text-align: left;
}
html {
height: 100%;
}

header {
background-color: black;
transition: top 0.5s;
display: block;
position: fixed;
top: 0;
z-index: 1;
margin: 0;
width: 100%;
padding: 5px 0px 14px 0px;
}

body {
min-height: 100%;
font-family: 'Noto Sans', sans-serif;
Expand All @@ -23,6 +34,8 @@ main {
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
max-width: 1280px;
margin: 0 auto;
}

p {
Expand Down Expand Up @@ -51,6 +64,19 @@ h1 {
background-color: #d5cccc;
}

#detailsContainer {
display: flex;
margin-left: 50px;
}

#sidebar .MuiDrawer-paper {
width: 340px;
max-height:calc(100vh);
background-color:lightgray;
border: 5px solid gray;
transition: 0.5s;
margin-top: 155px;
}
.keyword {
display: inline;
padding: .2em .6em .3em;
Expand All @@ -70,7 +96,6 @@ h1 {
#app-body {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
}

.plugin-header, .plugin-header a {
Expand All @@ -88,8 +113,9 @@ h2 {
color: #333;
}

.details {
#details {
margin-top: 12px;
width: calc(100% - 370px);
}

.currentstate {
Expand Down Expand Up @@ -179,8 +205,8 @@ td {

.footer {
display: table;
width: calc(100% - 64px);
/* Distance with other content */
width: calc(100% - 64px);
margin-top: 16px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
Expand Down
Loading

0 comments on commit 4d94a38

Please sign in to comment.