diff --git a/src/components/GitakoSideBar.js b/src/components/SideBar.js
similarity index 98%
rename from src/components/GitakoSideBar.js
rename to src/components/SideBar.js
index fc61bc2..60de556 100644
--- a/src/components/GitakoSideBar.js
+++ b/src/components/SideBar.js
@@ -12,7 +12,7 @@ import GitHubHelper, { NOT_FOUND } from '../utils/GitHubHelper'
import storageHelper from '../utils/storageHelper'
import URLHelper from '../utils/URLHelper'
-export default class GitakoSideBar extends preact.Component {
+export default class SideBar extends preact.Component {
state = {
// whether Gitako side bar should be shown
shouldShow: false,
diff --git a/src/content.js b/src/content.js
index ece2f7a..ad6f38b 100644
--- a/src/content.js
+++ b/src/content.js
@@ -3,8 +3,8 @@ import preact from 'preact'
import './content.less'
-import GitakoSideBar from './components/GitakoSideBar'
+import SideBar from './components/SideBar'
-const GitakoSideBarElement = document.createElement('div')
-document.body.appendChild(GitakoSideBarElement)
-preact.render(, GitakoSideBarElement)
+const SideBarElement = document.createElement('div')
+document.body.appendChild(SideBarElement)
+preact.render(, SideBarElement)
diff --git a/src/content.less b/src/content.less
index ec207fd..16f467b 100644
--- a/src/content.less
+++ b/src/content.less
@@ -1,8 +1,10 @@
+@name: gitako;
+
@side-bar-width: 260px;
@github-content-width: 1280px;
@content-width: (@side-bar-width + @github-content-width);
-.with-gitako-spacing {
+.with-@{name}-spacing {
margin-left: @side-bar-width;
@media (min-width: @github-content-width) and (max-width: @content-width) {
margin-left: ~'calc(' @content-width ~' - 100vw)';
@@ -63,8 +65,8 @@
visibility: hidden;
}
-.gitako {
- .gitako-side-bar {
+.@{name} {
+ .@{name}-side-bar {
position: fixed;
top: 0;
left: 0;
@@ -85,10 +87,10 @@
.hidden;
}
- .gitako-logo-wrapper.Header {
+ .@{name}-logo-wrapper.Header {
position: relative;
- .gitako-logo {
+ .@{name}-logo {
display: flex;
justify-content: space-around;
align-items: center;
@@ -145,7 +147,7 @@
color: rgba(3, 47, 98, 0.55);
}
- .gitako-side-bar-content {
+ .@{name}-side-bar-content {
display: flex;
flex: 1;
flex-direction: column;
@@ -238,7 +240,7 @@
}
}
- .gitako-settings-bar {
+ .@{name}-settings-bar {
border-top: 1px solid #eaecef;
&-content {
padding: 0 10px;