Add Sidebar

tazkrtak · Oct 23, 2019 · 8f95788 · 8f95788
1 parent bb8feec
commit 8f95788
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 8 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,6 @@
 # Site settings
-title               : Tazkrtak
-description         : An admin web view to manage Tazkrtak apps.
+title               : تذكرتك
+description         : متابعة برامج تذكرتك عن طريق متصفح الإنترنت
 url                 : "https://tazkrtak-admin.web.app"
 
 # Build settings

diff --git a/_data/sidebar.yml b/_data/sidebar.yml
@@ -0,0 +1,8 @@
+- title: الرئيسية
+  path: #
+
+- title: المستخدمون
+  path: #
+
+- title: الموظفون
+  path: #
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,9 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="{{ site.description }}">
 
-  <link rel="shortcut icon" href="{{ '/assets/favicon.ico' | relative_url }}" type="image/x-icon">
+  <link rel="shortcut icon" href="/assets/favicon.ico">
 
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-
+  <link rel="stylesheet" href="/assets/css/style.css">
+
 </head>
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -0,0 +1,9 @@
+<nav class="navbar navbar-expand navbar-dark bg-success">
+
+  <a id="sidebar-toggle" href="#sidebar-toggle" class="navbar-brand">
+    <span class="navbar-toggler-icon"></span>
+  </a>
+
+  <a class="navbar-brand" href="/">{{ site.title }}</a>
+
+</nav>
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -1,3 +1,4 @@
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<script src="/assets/js/sidebar.js"></script>
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -0,0 +1,7 @@
+<div class="sidebar">
+  <ul class="sidebar-nav">
+    {% for item in site.data.sidebar %}
+    <li><a class="text-decoration-none" href="{{ item.path }}">{{ item.title }}</a></li>
+    {% endfor %}
+  </ul>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,10 +4,15 @@
 
 {% include head.html %}
 
-<body class="bg-dark">
+<body>
 
-  <div class="container text-white text-center p-5 my-5">
-    {{ content }}
+  {% include navbar.html %}
+
+  <div id="wrapper">
+    {% include sidebar.html %}
+    <div class="container-fluid py-3 px-5">
+      {{ content }}
+    </div>
   </div>
 
   {% include scripts.html %}

diff --git a/_sass/_global.scss b/_sass/_global.scss
@@ -0,0 +1,5 @@
+body {
+  direction: rtl;
+  text-align: right;
+  font-family: "Cairo", sans-serif;
+}
diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css?family=Cairo&display=swap');
+
+@import "global",
+        "sidebar";
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
@@ -0,0 +1,51 @@
+body {
+  overflow-x: hidden;
+}
+
+#wrapper {
+  -webkit-transition: all 0.5s ease;
+  -moz-transition: all 0.5s ease;
+  -o-transition: all 0.5s ease;
+  transition: all 0.5s ease;
+
+  .sidebar {
+    position: fixed;
+    right: 250px;
+    width: 0;
+    height: 100%;
+    margin-right: -250px;
+    overflow-y: auto;
+    background: #000;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    -o-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+  }
+
+  &.toggled {
+    margin-right: 250px;
+    .sidebar {
+      width: 250px;
+    }
+  }
+}
+
+.sidebar-nav {
+  position: absolute;
+  top: 16px;
+  width: 250px;
+  padding: 0;
+  list-style: none;
+  li {
+    text-indent: 20px;
+    line-height: 56px;
+    a {
+      display: block;
+      color: #999;
+      &:hover {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.2);
+      }
+    }
+  }
+}
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -0,0 +1,3 @@
+---
+---
+@import "main";
diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js
@@ -0,0 +1,6 @@
+$(function() {
+  $("#sidebar-toggle").click(function(e) {
+    e.preventDefault();
+    $("#wrapper").toggleClass("toggled");
+  });
+});
diff --git a/index.html b/index.html
@@ -2,4 +2,4 @@
 layout: default
 ---
 <h1 class="display-1 font-weight-bold">{{ site.title }}</h1>
-<p class="text-monospace">initial version</h1>
+<p class="text-monospace">{{ site.description }}</h1>