Pavel пре 6 година
родитељ
комит
c93ca3c4ce

+ 1 - 0
app/app.js

@@ -0,0 +1 @@
+var app = angular.module('angularProject',[]);

+ 11 - 0
app/controllers/appRootController.js

@@ -0,0 +1,11 @@
+app.controller('appRootController',['$scope',function($scope){
+  $scope.isOpenMenu = false;
+  $scope.openMenu = function(){
+    if($scope.isOpenMenu){
+      $scope.isOpenMenu = false;
+    }else {
+      $scope.isOpenMenu = true;
+    }
+
+  }
+}])

+ 10 - 0
app/directives/navmenu.js

@@ -0,0 +1,10 @@
+app.directive('navmenu',[function(){
+  return {
+    restrict: 'E',
+    scope: {},
+    templateUrl: 'app/views/navmenu.html',
+    controller: function($scope){
+      
+    }
+  }
+}])

Разлика између датотеке није приказан због своје велике величине
+ 57 - 0
app/lib/angular-animate.min.js


Разлика између датотеке није приказан због своје велике величине
+ 17 - 0
app/lib/angular-route.min.js


Разлика између датотеке није приказан због своје велике величине
+ 34191 - 0
app/lib/angular.js


+ 11 - 0
app/views/app-root.html

@@ -0,0 +1,11 @@
+<div ng-controller="appRootController" ng-class="isOpenMenu?'open-menu' : 'close-menu'" class="navbar">
+  <div class="header-line">
+    <i class="fa fa-bars" ng-click="openMenu()"></i>
+    <div class="logo">
+      Master Kitchen
+    </div>
+    <div class="undefined-btn"></div>
+  </div>
+  <navmenu ng-class="isOpenMenu?'open-menu' : 'close-menu'"></navmenu>
+  <main ng-view></main>
+</div>

+ 8 - 0
app/views/navmenu.html

@@ -0,0 +1,8 @@
+<nav class="nav-menu">
+  <ul>
+    <li><a href="#">Option</a></li>
+    <li><a href="#">Option</a></li>
+    <li><a href="#">Option</a></li>
+    <li><a href="#">Option</a></li>
+  </ul>
+</nav>

+ 100 - 0
content/css/styles.css

@@ -0,0 +1,100 @@
+@font-face {
+  font-family: "Helvetica Neue";
+  src: url('../fonts/helveticaneuecyr-light.otf');
+}
+
+@font-face {
+  font-family: "AvenirNextLTPro-Demi";
+  src: url('../fonts/AvenirNextLTPro-Demi.otf');
+}
+
+body{
+  font-family: Helvetica;
+  margin: 0;
+}
+
+h1,h2,h3{
+  margin: 0;
+}
+
+ul,li {
+  margin: 0;
+  padding: 0;
+}
+
+body * {
+  box-sizing: border-box;
+}
+
+/* navbar */
+.navbar {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 50px;
+  background-color: #F3F3F5;
+}
+
+.navbar .fa-bars {
+  display: inline-block;
+  cursor: pointer;
+  color: #010101;
+  width: 10%;
+  padding-left: 25px;
+  padding-top: 15px;
+  text-align: left;
+  font-size: 22px;
+}
+
+.navbar .logo {
+  display: inline-block;
+  font-family: "Helvetica Neue",Arial,sans-serif;
+  font-weight: bold;
+  font-size: 25px;
+  letter-spacing: 0.1em;
+  width: 80%;
+  text-align: center;
+}
+
+.navbar .undefined-btn {
+  width: 80%;
+  display: inline-block;
+}
+/* navbar */
+
+
+/* navmenu */
+.nav-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 281px;
+  background-color: #1D1D1F;
+  padding: 50px;
+  padding-top: 100px;
+  transform: translateX(-281px);
+}
+
+.nav-menu li {
+  list-style-type: none;
+  padding: 15px 0;
+}
+
+.nav-menu li a {
+  font-family: "AvenirNextLTPro-Demi", Arial, sans-serif;
+
+  color: #fff;
+  text-decoration: none;
+}
+/* navmenu */
+
+.open-menu {
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
+  transform: translateX(281px);
+}
+
+.close-menu {
+  transition: all 1s cubic-bezier(.645,.045,.355,1);
+  transform: translateX(0px);
+}

BIN
content/fonts/AvenirNextLTPro-Demi.otf


BIN
content/fonts/helveticaneuecyr-light.otf


+ 18 - 0
index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="angularProject">
+  <head>
+    <title>TheNetNinja Angular Playlist</title>
+    <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <script src="./app/lib/angular.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
+    <script src="./app/lib/angular-animate.min.js"></script>
+    <script src="./app/app.js"></script>
+    <script src="./app/directives/navmenu.js"></script>
+    <script src="./app/controllers/appRootController.js"></script>
+  </head>
+  <body>
+    <app-root ng-include="'./app/views/app-root.html'"></app-root>
+
+  </body>
+</html>